综合实例分别了解了上面的三个布局控件，接下来我们看一个综合实例，如何完成如下的一个取色器：
附件:
您所在的用户组无法下载或查看附件首先我们添加一个两行两列的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 F>Color</TextBlock>
<TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" F/>
</StackPanel>
左边用四个Silder控件和四个TextBlock控件显示，需要对Grid的行进行合并Grid.RowSpan属性：
<StackPanel Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center">
<TextBlock Text="Alpha" F Margin="10,15,0,0"/>
<Slider x:Name="AlphaSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/>
<TextBlock Text="Red" F Margin="10,15,0,0"/>
<Slider x:Name="RedSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/>
<TextBlock Text="Green" F Margin="10,15,0,0"/>
<Slider x:Name="GreenSlider" Margin="20,0,10,0" Maximum="255" Value="102" ValueChanged="RedSlider_ValueChanged"/>
<TextBlock Text="Blue" F Margin="10,15,0,0"/>
<Slider x:Name="BlueSlider" Margin="20,0,10,0" Maximum="255" Value="0" ValueChanged="RedSlider_ValueChanged"/>
</StackPanel>
这样我们就完成了上面这样相对复杂的界面布局，对Slider控件添加事件处理程序：
private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
Color color = Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);
PreviewColor.Fill = new SolidColorBrush(color);
HexColor.Text = color.ToString();
}
运行后，可以选取不同的颜色值：
附件:
您所在的用户组无法下载或查看附件结束语关于界面布局就说到这里，在Silverlight 2中，通过上面的三种布局控件相结合，可以进行非常强大和灵活的界面布局。
