一步一步學(xué)Silverlight 2系列（3）：界面布局

概述

Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, Ironpython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性?！兑徊揭徊綄W(xué)Silverlight 2系列》文章帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。

本文為系列文章第三篇，學(xué)習(xí)Silverlight 2中的界面布局，Silverlight 2中新增加了Grid和Panel兩個(gè)布局容器，使得界面布局更加的強(qiáng)大和靈活。

Canvas面板

Canvas 是在Silverlight 1.0時(shí)代就有的一種基礎(chǔ)布局面板，它采用絕對(duì)坐標(biāo)定位?？梢允褂酶郊訉傩裕ˋttached Property）對(duì)Canvas中的元素進(jìn)行定位，通過(guò)附加屬性我們指定控件相對(duì)于其直接父容器Canvas 控件的上、下、左、右坐標(biāo)的位置。如下面的XAML聲明了兩個(gè)矩形，它們分別相對(duì)于父容器Canvas的左邊距是50，相對(duì)于父容器Canvas的上邊距 分別是50和150：

運(yùn)行后界面的效果如下所示：

除 了上面我們用到的Canvas.Top和Canvas.Left兩個(gè)附加屬性外，還有一個(gè)Canvas.ZIndex附加屬性。如果指定了兩個(gè)控件相對(duì)于 父容器Canvas同樣的邊距，則后面聲明的控件父覆蓋前面聲明的控件。這時(shí)我們可以使用Canvas.ZIndex屬性來(lái)改變它們的顯示順序，如下面的 XAML聲明：

<Canvas Background="#46461F">
    <Rectangle Fill="#0099FF" Width="160" Height="80"
               Canvas.Top="100" Canvas.Left="100">
    
    <Rectangle Fill="#FF9900" Width="160" Height="80"
             Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

指定兩個(gè)矩形相對(duì)于父容器Canvas的邊距相同，這時(shí)默認(rèn)的后聲明的橙色矩形會(huì)覆蓋藍(lán)色矩形：

指定Canvas.ZIndex為1

<Canvas Background="#46461F">
    <Rectangle Fill="#0099FF" Width="160" Height="80"
               Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/>
    
    <Rectangle Fill="#FF9900" Width="160" Height="80"
             Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

將會(huì)讓藍(lán)色矩形顯示在上面，值最大的顯示在最上面：

StackPanel

StackPanel支持用行或列的方式來(lái)進(jìn)行頁(yè)面布局，默認(rèn)情況下所有的子元素會(huì)垂直的排列顯示，如下面的XAML聲明三個(gè)矩形：

<StackPanel Background="#46461F">
    <Rectangle Fill="#0099FF" Stroke="White"
               Width="100" Height="50" Margin="10"/>
    <Rectangle Fill="#0099FF" Stroke="White"
               Width="100" Height="50" Margin="10"/>
    <Rectangle Fill="#0099FF" Stroke="White"
               Width="100" Height="50" Margin="10"/>
</StackPanel>

運(yùn)行后在界面顯示效果如下：

當(dāng)然我們也可以指定為水平排列，通過(guò)Orientation屬性指定：

<StackPanel Background="#46461F" Orientation="Horizontal">
    <Rectangle Fill="#0099FF" Stroke="White"
               Width="100" Height="50" Margin="10"/>
    <Rectangle Fill="#0099FF" Stroke="White"
               Width="100" Height="50" Margin="10"/>
    <Rectangle Fill="#0099FF" Stroke="White"
               Width="100" Height="50" Margin="10"/>
</StackPanel>

運(yùn)行后界面顯示效果如下：

在這里為了讓各個(gè)控件之間有一定的距離，使用了Margin屬性，該屬性類似于HTML中的Margin。

Grid

Grid控件類似與HTML中的Table，只不過(guò)子元素不用放在單元格中。通過(guò)<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>來(lái)定義Grid的行和列，使用Grid.Row和Grid.Column兩個(gè)附加屬性指定 子元素在Grid中顯示的位置，這是一種非常靈活的布局方式。如下面的XAML聲明：

<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="120"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Center" Foreground="White"></TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Center" Foreground="White"></TextBlock>
    <TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>
    <TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>
</Grid>

定義一個(gè)兩行兩列的Grid，做一個(gè)簡(jiǎn)單的用戶登錄的布局，為了明顯起見(jiàn)，把ShowGridLines屬性設(shè)為True，以便能夠顯示出邊框線。同時(shí)，我們指定了第一行的高度為120，而第二行的則是剩余的高度，用*來(lái)指定。運(yùn)行后效果如下：

綜合實(shí)例

分別了解了上面的三個(gè)布局控件，接下來(lái)我們看一個(gè)綜合實(shí)例，如何完成如下的一個(gè)取色器：

首先我們添加一個(gè)兩行兩列的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>

添加顏色顯示區(qū)域，用一個(gè)矩形顯示，放入Grid的第0行第1列：

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

再添加顏色值顯示區(qū)，嵌套一個(gè)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>

左邊用四個(gè)Silder控件和四個(gè)TextBlock控件顯示，需要對(duì)Grid的行進(jìn)行合并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>

這樣我們就完成了上面這樣相對(duì)復(fù)雜的界面布局，對(duì)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();
}

結(jié)束語(yǔ)

關(guān)于界面布局就說(shuō)到這里，在Silverlight 2中，通過(guò)上面的三種布局控件相結(jié)合，可以進(jìn)行非常強(qiáng)大和靈活的界面布局。