Silverlight 布局控件

1.1.          Canvas

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

 

<Canvas x:Name="LayoutRoot" Background="White">
<Button Name="SampleButton"
                Content="Sample Button"
                Padding="14"
                Canvas.Top="0"
                Canvas.Left="0"></Button>
</Canvas>

 

 

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

 

SampleButton.SetValue(Canvas.TopProperty, 120D);

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时不用写出。如果不指定控件的大小，控件将占满指定给它的行和列:

 

 

<Grid x:Name="LayoutRoot"
      Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="49"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Name="SimpleButton"
            Content="SimpleButton"
            Grid.Row="0"
            Grid.RowSpan="1"
            Grid.Column="0"
            Grid.ColumnSpan="1">
        
</Button>
</Grid>

 

 

1.3.          StackPanel

 

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

布局方式。

 

 

<StackPanel x:Name="LayoutRoot"
                Orientation="Horizontal"
                Background="White">
<Button Name="FristButton"
                Content="FirstButtonaaaaaaaaaaaaaaa"></Button>
<Button Name="SecondButton"
                Content="SecondButton" Width="100" HorizontalAlignment="Left"></Button>
</StackPanel>

 

1.1.          DockPanel

 

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

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:

 

<toolkit:DockPanel Name="LayoutRoot">
<Button Content="Top Button" toolkit:DockPanel.Dock="Top"/>
<Button Content="Bottom Button" toolkit:DockPanel.Dock="Bottom"/>
<Button Content="Left Button" toolkit:DockPanel.Dock="Left"/>
<Button Content="Right Button" toolkit:DockPanel.Dock="Right"/>
<Button Content="Center"/>
</toolkit:DockPanel>

 

 

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

 

<toolkit:DockPanel Name="LayoutRoot">
<Button Content="Bottom Button" toolkit:DockPanel.Dock="Bottom"/>
<Button Content="Left Button" toolkit:DockPanel.Dock="Left"/>
<Button Content="Top Button" toolkit:DockPanel.Dock="Top"/>
<Button Content="Right Button" toolkit:DockPanel.Dock="Right"/>
<Button Content="Center"/>
</toolkit:DockPanel>

图1.4.1

 

 

图1.4.2