学Silverlight 2系列（3）：界面布局

核心提示： 综合实例分别了解了上面的三个布局控件，接下来我们看一个综合实例，学Silverlight 2系列（3）：界面布局(4)，如何完成如下的一个取色器： 首先我们添加一个两行两列的Grid控件，分别指定行高和列宽：<Grid x:Name="LayoutRoot" B

综合实例

分别了解了上面的三个布局控件，接下来我们看一个综合实例，如何完成如下的一个取色器：

首先我们添加一个两行两列的Grid控件，分别指定行高和列宽：

<Grid x:Name="LayoutRoot" Background="White">
　　<Grid.ColumnDefinitions>
　　　　<ColumnDefinition Width="260" />
　　　　<ColumnDefinition Width="*" />
　　</Grid.ColumnDefinitions>
　　<Grid.RowDefinitions>
　　　　<RowDefinition Height="120" />
　　　　<RowDefinition Height="120" />
　　</Grid.RowDefinitions>
</Grid>

添加颜色显示区域，用一个矩形显示，放入Grid的第0行第1列：

<Rectangle Grid.Row="0" Grid.Column="1" x:Name="PreviewColor"
　　　　　　　　　 Fill="#FF6600" Margin="10" Stroke="#666666" StrokeThickness="2" />

再添加颜色值显示区，嵌套一个StackPanel控件，让它里面的子控件垂直显示：

<StackPanel Grid.Row="1" Grid.Column="1" >
　　<TextBlock FontSize="12">Color</TextBlock>
　　<TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" FontSize="11"/>
</StackPanel>

左边用四个Silder控件和四个TextBlock控件显示，需要对Grid的行进行合并Grid.RowSpan属性：