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

概述概述 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。 概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic,Visual C#,IronRuby,Ironpython，对JsON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列文章第三篇，学习Silverlight 2中的界面布局，Silverlight 2中新增加了GrID和Panel两个布局容器，使得界面布局更加的强大和灵活。

Canvas面板

Canvas是在Silverlight 1.0时代就有的一种基础布局面板，它采用绝对坐标定位。可以使用附加属性（Attached Property）对Canvas中的元素进行定位，通过附加属性我们指定控件相对于其直接父容器Canvas 控件的上、下、左、右坐标的位置。如下面的XAML声明了两个矩形，它们分别相对于父容器Canvas的左边距是50，相对于父容器Canvas的上边距分别是50和150：

运行后界面的效果如下所示：

除了上面我们用到的Canvas.top和Canvas.left两个附加属性外，还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对于父容器Canvas同样的边距，则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序，如下面的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>

指定两个矩形相对于父容器Canvas的边距相同，这时默认的后声明的橙色矩形会覆盖蓝色矩形：

指定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>

将会让蓝色矩形显示在上面，值最大的显示在最上面：

StackPanel

StackPanel支持用行或列的方式来进行页面布局，默认情况下所有的子元素会垂直的排列显示，如下面的XAML声明三个矩形：

<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>

运行后在界面显示效果如下：

当然我们也可以指定为水平排列，通过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>

运行后界面显示效果如下：

在这里为了让各个控件之间有一定的距离，使用了margin属性，该属性类似于HTML中的margin。

GrID

GrID控件类似与HTML中的table，只不过子元素不用放在单元格中。通过<GrID.RowDeFinitions> 和 <GrID.ColumnDeFinitions>来定义GrID的行和列，使用GrID.Row和GrID.Column两个附加属性指定子元素在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>

定义一个两行两列的GrID，做一个简单的用户登录的布局，为了明显起见，把ShowGrIDlines属性设为True，以便能够显示出边框线。同时，我们指定了第一行的高度为120，而第二行的则是剩余的高度，用*来指定。运行后效果如下：

综合实例

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

首先我们添加一个两行两列的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"/>   <SlIDer x:name="AlphaSlIDer" margin="20,10,0" Maximum="255" Value="255" ValueChanged="RedSlIDer_ValueChanged"/>   <TextBlock Text="Red" FontSize="12" margin="10,0"/>   <SlIDer x:name="RedSlIDer" margin="20,0" Maximum="255" Value="255" ValueChanged="RedSlIDer_ValueChanged"/>   <TextBlock Text="Green" FontSize="12" margin="10,0"/>   <SlIDer x:name="GreenSlIDer" margin="20,0" Maximum="255" Value="102" ValueChanged="RedSlIDer_ValueChanged"/>   <TextBlock Text="Blue" FontSize="12" margin="10,0"/>   <SlIDer x:name="BlueSlIDer" margin="20,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中，通过上面的三种布局控件相结合，可以进行非常强大和灵活的界面布局。

下一篇：一步一步学Silverlight 2系列（4）：鼠标事件处理

作者： TerryLee
出处： http://terrylee.cnblogs.com 总结

以上是内存溢出为你收集整理的一步一步学Silverlight 2系列（3）：界面布局全部内容，希望文章能够帮你解决一步一步学Silverlight 2系列（3）：界面布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。