【李会军】一步一步学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中的界面布局，Silverlight 2中新增加了Grid和Panel两个布局容器，使得界面布局更加的强大和灵活。

Canvas面板

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

运行后界面的效果如下所示：ITPUB个人空间!?i5Cvm&I

)D)H9Y)s$ZN"Q} w0
&ac(K%N"Y0[ez0除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外，还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对 于父容器Canvas同样的边距，则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序，如下面 的XAML声明：
x%^/{+[:FP u0

<CanvasBackground="#46461F">

_5o}1P,_7w	R0<RectangleFill="#0099FF"Width="160"Height="80"ITPUB个人空间U;A%`yi:OU!Q
Canvas.Top="100"Canvas.Left="100">
"[wZSV6e)|p*ej0ITPUB个人空间9J
B8Qp\.c
<RectangleFill="#FF9900"Width="160"Height="80"
+Tl"W-y&S5Z!LrY*F0Canvas.Top="100"Canvas.Left="100"/>
"z;V&cpj9^'WO)V"jl)_RB0指定两个矩形相对于父容器Canvas的边距相同，这时默认的后声明的橙色矩形会覆盖蓝色矩形：ITPUB个人空间9J3rFBw.G]1EM
ITPUB个人空间Q(k3yC1C;u	M
指定Canvas.ZIndex为1ITPUB个人空间\9L:a]/bt
<CanvasBackground="#46461F">ITPUB个人空间arVe:oX(Mi
<RectangleFill="#0099FF"Width="160"Height="80"ITPUB个人空间.fnC$u]~|cr
Canvas.Top="100"Canvas.Left="100"Canvas.ZIndex="1"/>ITPUB个人空间!q!h]!y5c	F|

	kTg[L/F0<RectangleFill="#FF9900"Width="160"Height="80"ITPUB个人空间2\c	i"J*uT9z
Canvas.Top="100"Canvas.Left="100"/>
i)d
Bx(_)e#R5GM0I0</Canvas>ITPUB个人空间Ac|8E%`RmIyA

将会让蓝色矩形显示在上面，值最大的显示在最上面：
T9|7~ E3qHPU+M0
/Wz? G/@4l5U0

StackPanel

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

<StackPanelBackground="#46461F">ITPUB个人空间x:Ay!t4s0f)Pk
<RectangleFill="#0099FF"Stroke="White"ITPUB个人空间mwT$n:o;?(V,`H
Width="100"Height="50"Margin="10"/>
}[ami;y/m0<RectangleFill="#0099FF"Stroke="White"
m6RRH"K:M.ch-s0Width="100"Height="50"Margin="10"/>
6r
B4SsI4wyy%Ev0<RectangleFill="#0099FF"Stroke="White"ITPUB个人空间2B7\9fr
mRG`hh
Width="100"Height="50"Margin="10"/>ITPUB个人空间;N'|-|}|a2B
</StackPanel>

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

ITPUB个人空间6L4Q'X3LZ` SN C

当然我们也可以指定为水平排列，通过Orientation属性指定：

<StackPanelBackground="#46461F"Orientation="Horizontal">
(l;@p~s#h0<RectangleFill="#0099FF"Stroke="White"ITPUB个人空间.Osf8W8A(^p
Width="100"Height="50"Margin="10"/>
'P?P2Df4p0<RectangleFill="#0099FF"Stroke="White"ITPUB个人空间Y!X3pL]&u*k&E\$Po
Width="100"Height="50"Margin="10"/>ITPUB个人空间1x4L}Oj.y2Y
<RectangleFill="#0099FF"Stroke="White"
I
F6Mw|!J!Yr;x4n"^%RQ0Width="100"Height="50"Margin="10"/>
iB{M4h0</StackPanel>

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

ITPUB个人空间fPG9M2q4F3S)x

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

Grid

Grid控件类似与HTML中的Table，只不过子元素不用放在单元格中。通过<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>来定义Grid的行和列，使用Grid.Row和Grid.Column两个附加属性指定 子元素在Grid中显示的位置，这是一种非常灵活的布局方式。如下面的XAML声明：

<Gridx:Name="LayoutRoot"Background="#46461F"ShowGridLines="True">
5fI$a6Jfi%V0R.I&X0<Grid.RowDefinitions>
:e9qQ I+Ht0<RowDefinitionHeight="120"/>ITPUB个人空间L},[9Y!K&A*?+|\b
<RowDefinitionHeight="*"/>ITPUB个人空间 [9Sp,O"J
</Grid.RowDefinitions>
S!FeV5B`d"P0<Grid.ColumnDefinitions>
.]VE{aMh
A%ns0<ColumnDefinitionWidth="100"/>

I4l5Z
w,Z0<ColumnDefinitionWidth="*"/>ITPUB个人空间@}Y*vTG
</Grid.ColumnDefinitions>
/A0l1@6H
y4B0<TextBlockGrid.Row="0"Grid.Column="0"Text="UserName:"VerticalAlignment="Center"Foreground="White"></TextBlock>
-o4L0r?8S	o0<TextBlockGrid.Row="1"Grid.Column="0"Text="Password:"VerticalAlignment="Center"Foreground="White"></TextBlock>ITPUB个人空间1c.ZOSY&G9e
<TextBoxGrid.Row="0"Grid.Column="1"Width="200"Height="30"HorizontalAlignment="Left"></TextBox>
%y7Qr;z7Ud0<TextBoxGrid.Row="1"Grid.Column="1"Width="200"Height="30"HorizontalAlignment="Left"></TextBox>
7M&ah$M#Dh+B0</Grid>

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

:q1R"a9is&z0

综合实例

分别了解了上面的三个布局控件，接下来我们看一个综合实例，如何完成如下的一个取色器：ITPUB个人空间X@{/tJU
ITPUB个人空间 \NpFkW.H*Z

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

<Gridx:Name="LayoutRoot"Background="White">
ES:uu'Z"}`0<Grid.ColumnDefinitions>ITPUB个人空间,^
Ld?r!I6Q~x,t
<ColumnDefinitionWidth="260" />
c*E'p\1a0<ColumnDefinitionWidth="*" />
 h4lH7Ay*~O0</Grid.ColumnDefinitions>ITPUB个人空间c!W,hr'e?@
<Grid.RowDefinitions>ITPUB个人空间+},z
c5D3B5qF
<RowDefinitionHeight="120" />ITPUB个人空间g:s#}sr"u
<RowDefinitionHeight="120" />ITPUB个人空间*Ix#s`bc-D
</Grid.RowDefinitions>ITPUB个人空间OuI1d NFx
</Grid>

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

<RectangleGrid.Row="0"Grid.Column="1"x:Name="PreviewColor"
Kw&}z;[a0Fill="#FF6600"Margin="10"Stroke="#666666"StrokeThickness="2" />

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

<StackPanelGrid.Row="1"Grid.Column="1" >
9b
u!^z3I!{0<TextBlockFontSize="12">Color</TextBlock>
{o0W"[6P
R:]P0<TextBoxx:Name="HexColor"Width="160"Height="30"Text="#FF6600"Margin="10,5"FontSize="11"/>ITPUB个人空间:]d2G3q	Yp0Y]Q3K*@
</StackPanel>

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

<StackPanelGrid.Row="0"Grid.Column="0"Grid.RowSpan="2"VerticalAlignment="Center">
$P,s{$wCH%MC0<TextBlockText="Alpha"FontSize="12"Margin="10,15,0,0"/>
bw-@&r
Da4f
f7J0<Sliderx:Name="AlphaSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/>
9XR,JC/S(x0<TextBlockText="Red"FontSize="12"Margin="10,15,0,0"/>
ri/jr5b+k0<Sliderx:Name="RedSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间l
}8TC0XZ%k(d
<TextBlockText="Green"FontSize="12"Margin="10,15,0,0"/>
0hZe,yK1Y0<Sliderx:Name="GreenSlider"Margin="20,0,10,0"Maximum="255"Value="102"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间'v5l\&_+_
<TextBlockText="Blue"FontSize="12"Margin="10,15,0,0"/>
~/y	eopE0<Sliderx:Name="BlueSlider"Margin="20,0,10,0"Maximum="255"Value="0"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间6QD%T8QSPe0A
</StackPanel>

这样我们就完成了上面这样相对复杂的界面布局，对Slider控件添加事件处理程序：

private voidRedSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgs<double> e)
u5v2u+_8U#n0{
{$G!juvVC0Colorcolor =Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);
9H`@8H[
v^0
l3u1^F,^
z0PreviewColor.Fill =newSolidColorBrush(color);
Z-l
A7D3R	U0HexColor.Text = color.ToString();
w7DqhY
}0c3r0}

运行后，可以选取不同的颜色值：

D"h/\q)L4T1X+Qw+Y0
RI+jraK8Jm0

结束语

关于界面布局就说到这里，在Silverlight 2中，通过上面的三种布局控件相结合，可以进行非常强大和灵活的界面布局。

ITPUB个人空间9c9l0L/t9LU+c