一步一步学Silverlight ：界面布局

综合实例

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

首先我们添加一个两行两列的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属性：

<StackPanel Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center">
   <TextBlock Text="Alpha" FontSize="12" Margin="10,15,0,0"/>
   <Slider x:Name="AlphaSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/>
   <TextBlock Text="Red" FontSize="12" Margin="10,15,0,0"/>
   <Slider x:Name="RedSlider" Margin="20,0,10,0" Maximum="255" Value="255" ValueChanged="RedSlider_ValueChanged"/>
   <TextBlock Text="Green" FontSize="12" Margin="10,15,0,0"/>
   <Slider x:Name="GreenSlider" Margin="20,0,10,0" Maximum="255" Value="102" ValueChanged="RedSlider_ValueChanged"/>
   <TextBlock Text="Blue" FontSize="12" 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中，通过上面的三种布局控件相结合，可以进行非常强大和灵活的界面布局。