Silverlight 布局控件

1.1. Canvas

在Canvas 布局中，控件使用Canvas.Top和Canvas.Left来定位内容:

View Code

1 <Canvas x:Name="LayoutRoot" Background="White">
2 <Button Name="SampleButton"
3                 Content="Sample Button"
4                 Padding="14"
5                 Canvas.Top="0"
6                 Canvas.Left="0"></Button>
7 </Canvas>

以编码的形式使用方法如下：

View Code

1 SampleButton.SetValue(Canvas.TopProperty, 120D);
2 
3 SampleButton.SetValue(Canvas.LeftProperty, 140D);

1.2. Grid

在Grid布局中，需要使用RowDefinition和ColumnDefinition定义行和列可以在Grid控件的开始和结束标记中间建立Grid.RowDefinitions节点和Grid.ColumnDefinitions节点，并在其子节点中声名行或列。

控件使用Grid.Row和Grid.Column中来定义控件所处的行和列，使用Grid.RowSpan和Grid.ColumnSpan来定义控件可以占用多少行和多少列，当其值默认为1，为1时不用写出。如果不指定控件的大小，控件将占满指定给它的行和列:

View Code

 1 <Grid x:Name="LayoutRoot"
 2       Background="White">
 3 <Grid.RowDefinitions>
 4 <RowDefinition Height="49"></RowDefinition>
 5 </Grid.RowDefinitions>
 6 <Grid.ColumnDefinitions>
 7 <ColumnDefinition Width="140"></ColumnDefinition>
 8 </Grid.ColumnDefinitions>
 9 <Button Name="SimpleButton"
10             Content="SimpleButton"
11             Grid.Row="0"
12             Grid.RowSpan="1"
13             Grid.Column="0"
14             Grid.ColumnSpan="1">
15         
16 </Button>
17 </Grid>

1.3. StackPanel

在StackPanel布局中，控件以垂直或水平堆积的方式排列。如果不指定控件的大小，那么控件将使用默认高度，宽度将占满整个StackPanel的宽度。如果指定了Orientation="Horizontal"那么控件将使用默认宽度，高度占满整个StackPanel。StackPanel默认使用Orientation="Vertical"

布局方式。

View Code

1 <StackPanel x:Name="LayoutRoot"
2                 Orientation="Horizontal"
3                 Background="White">
4 <Button Name="FristButton"
5                 Content="FirstButtonaaaaaaaaaaaaaaa"></Button>
6 <Button Name="SecondButton"
7                 Content="SecondButton" Width="100" HorizontalAlignment="Left"></Button>
8 </StackPanel>

1.1. DockPanel

DockPanel包含在Silverlight ToolKit中，所以如果想要使用DockPanel而已，将需要安装Silverlight ToolKit，并引入如下xmlns：

View Code

1 xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

在DockPanel布局方式中，控件使用DockPanel.Dock属性来指定其停靠方式，如果不指定其值，则控件停靠在中间位置，其可取值Top，Left，Right，Bottom。

在DockPanel布局中，先出现的控件有着更高的优先级别来占用它所处的位置。

例如：DockPanel.Dock为Top的控件出现在了DockPanel.Dock为Left的控件的前面，那么，DockPanel.Dock为Top的控件则会至少占用停靠在中间位置的控件的宽度+DockPanel.Dock为Left的控件的宽度如图1.4.1:

View Code

1 <toolkit:DockPanel Name="LayoutRoot">
2 <Button Content="Top Button" toolkit:DockPanel.Dock="Top"/>
3 <Button Content="Bottom Button" toolkit:DockPanel.Dock="Bottom"/>
4 <Button Content="Left Button" toolkit:DockPanel.Dock="Left"/>
5 <Button Content="Right Button" toolkit:DockPanel.Dock="Right"/>
6 <Button Content="Center"/>
7 </toolkit:DockPanel>

而DockPanel.Dock为Top的控件出现在了DockPanel.Dock为Left的控件的后面，那么，DockPanel.Dock为Top的控件则至少少占用了DockPanel.Dock为Left的控件的宽度的宽度,如图1.4.2:

View Code

1 <toolkit:DockPanel Name="LayoutRoot">
2 <Button Content="Bottom Button" toolkit:DockPanel.Dock="Bottom"/>
3 <Button Content="Left Button" toolkit:DockPanel.Dock="Left"/>
4 <Button Content="Top Button" toolkit:DockPanel.Dock="Top"/>
5 <Button Content="Right Button" toolkit:DockPanel.Dock="Right"/>
6 <Button Content="Center"/>
7 </toolkit:DockPanel>