.NEt专家博客！

【李会军】一步一步学Silverlight 2系列（3）：界面布局

上一篇 / 下一篇 2008-04-11 19:06:51

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个人空间bb~X#pb,D V

/XN3g^ HW:F2LR0

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

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

<CanvasBackground="#46461F">
%q4j![Ru6vk0<RectangleFill="#0099FF"Width="160"Height="80"
*~!KW]Cm|k |s(W0Canvas.Top="100"Canvas.Left="100">
$hj4Q;oY%C0ITPUB个人空间R~%hM8u
H&|'Q;AZ	[3K
<RectangleFill="#FF9900"Width="160"Height="80"ITPUB个人空间B\C:j,w:__k.c:S
Canvas.Top="100"Canvas.Left="100"/>
0LC1I3R3^tn4v'm0指定两个矩形相对于父容器Canvas的边距相同，这时默认的后声明的橙色矩形会覆盖蓝色矩形：
"fu"]sT'{)gJ S5Q0ITPUB个人空间[j"A2]1U[Mm#Ep
指定Canvas.ZIndex为1
8V1[EBo,r1mu\0<CanvasBackground="#46461F">ITPUB个人空间/Jo
fyv`7WF7ZC-s
<RectangleFill="#0099FF"Width="160"Height="80"
jP9C9nq(l,@0Canvas.Top="100"Canvas.Left="100"Canvas.ZIndex="1"/>ITPUB个人空间FKi+jf/usc

	EIhX'`
]@p0<RectangleFill="#FF9900"Width="160"Height="80"
^%x*\
gj*w9dKg0Canvas.Top="100"Canvas.Left="100"/>ITPUB个人空间c:s,Of ^ u{,@
</Canvas>
\6oV*Hj)g'W6E?3C0

将会让蓝色矩形显示在上面，值最大的显示在最上面：
FT{1b4Do0
1na(Tz1[9O0

StackPanel

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

<StackPanelBackground="#46461F">
-d:C a/bw!Y!Hw0<RectangleFill="#0099FF"Stroke="White"

Z"_a
f'nT/\.w0Width="100"Height="50"Margin="10"/>ITPUB个人空间z!Y@dy#X^WyS
<RectangleFill="#0099FF"Stroke="White"
AaJ-?	m	E~5x|0Width="100"Height="50"Margin="10"/>ITPUB个人空间+@{hjL7Y5rG
<RectangleFill="#0099FF"Stroke="White"ITPUB个人空间^2l,e+|0b_6~N
Width="100"Height="50"Margin="10"/>
-|FW+d:FR0</StackPanel>

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

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

<StackPanelBackground="#46461F"Orientation="Horizontal">
3D4c6@4M$bTY;n0<RectangleFill="#0099FF"Stroke="White"
*`m;n.~8~0^\}$wT0Width="100"Height="50"Margin="10"/>ITPUB个人空间+hQ6\Q"bl3LV
<RectangleFill="#0099FF"Stroke="White"ITPUB个人空间^9CX(nr
Width="100"Height="50"Margin="10"/>ITPUB个人空间PV*vX{f`k
<RectangleFill="#0099FF"Stroke="White"
1ycrc	s0J.]h1I0Width="100"Height="50"Margin="10"/>
Fv!B-`?E"g0</StackPanel>

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

在这里为了让各个控件之间有一定的距离，使用了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">ITPUB个人空间\[Ul-g)VDgB
<Grid.RowDefinitions>ITPUB个人空间6N#H,P.b1LiI
<RowDefinitionHeight="120"/>ITPUB个人空间/P
aF1vgv8w*f
<RowDefinitionHeight="*"/>
rs
\L}MIo{x0</Grid.RowDefinitions>ITPUB个人空间*I4l1YI$nZa
<Grid.ColumnDefinitions>ITPUB个人空间A1k`9yK
<ColumnDefinitionWidth="100"/>
il)|0FO0u
D5h6y0<ColumnDefinitionWidth="*"/>
2BK|f9\$ZM0</Grid.ColumnDefinitions>ITPUB个人空间g5t'd+_yY
<TextBlockGrid.Row="0"Grid.Column="0"Text="UserName:"VerticalAlignment="Center"Foreground="White"></TextBlock>
@;wwTwdzW0<TextBlockGrid.Row="1"Grid.Column="0"Text="Password:"VerticalAlignment="Center"Foreground="White"></TextBlock>
$ki*D!H8v#q0<TextBoxGrid.Row="0"Grid.Column="1"Width="200"Height="30"HorizontalAlignment="Left"></TextBox>ITPUB个人空间S(z[q4e1qx3\
<TextBoxGrid.Row="1"Grid.Column="1"Width="200"Height="30"HorizontalAlignment="Left"></TextBox>
O+W]*]PG6h0</Grid>

定义一个两行两列的Grid，做一个简单的用户登录的布局，为了明显起见，把ShowGridLines属性设为True，以便能够显示出边框线。同时，我们指定了第一行的高度为120，而第二行的则是剩余的高度，用*来指定。运行后效果如下：ITPUB个人空间Kx(~k7Y Q(A D7e
ITPUB个人空间5r]:A+YN3z#rlx/Q

综合实例

分别了解了上面的三个布局控件，接下来我们看一个综合实例，如何完成如下的一个取色器：
v){+k2xayR0ITPUB个人空间4\5g8H lr3kQO

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

<Gridx:Name="LayoutRoot"Background="White">
4vdJ^s!R0<Grid.ColumnDefinitions>
:C8Z
Z[Bz*U0<ColumnDefinitionWidth="260" />ITPUB个人空间c*X&B}0z'_+XA
<ColumnDefinitionWidth="*" />
Q
Z7dU"M6_$W0</Grid.ColumnDefinitions>
y+D!eOcY#Ahi#l0<Grid.RowDefinitions>ITPUB个人空间0Iu4A1@$whj^
<RowDefinitionHeight="120" />ITPUB个人空间XG6R2l
u
<RowDefinitionHeight="120" />
E;f*p{:L0</Grid.RowDefinitions>
8iT!BIi$|B0</Grid>

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

<RectangleGrid.Row="0"Grid.Column="1"x:Name="PreviewColor"
S \{6Mh0Fill="#FF6600"Margin="10"Stroke="#666666"StrokeThickness="2" />

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

<StackPanelGrid.Row="1"Grid.Column="1" >
eI%|k	y*g"gs Z;g0<TextBlockFontSize="12">Color</TextBlock>ITPUB个人空间2v[ E4pJ5mC'P
<TextBoxx:Name="HexColor"Width="160"Height="30"Text="#FF6600"Margin="10,5"FontSize="11"/>
L@N*r'f#f!E0</StackPanel>

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

<StackPanelGrid.Row="0"Grid.Column="0"Grid.RowSpan="2"VerticalAlignment="Center">ITPUB个人空间9bOlTug:\
<TextBlockText="Alpha"FontSize="12"Margin="10,15,0,0"/>

A9a0P$u!b
@x:yo0<Sliderx:Name="AlphaSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间	W1`,PJ8uL-S
<TextBlockText="Red"FontSize="12"Margin="10,15,0,0"/>ITPUB个人空间4tuF3J8IF
<Sliderx:Name="RedSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间dfj	r8j
<TextBlockText="Green"FontSize="12"Margin="10,15,0,0"/>
1s*d {3sy:U-bB0<Sliderx:Name="GreenSlider"Margin="20,0,10,0"Maximum="255"Value="102"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间6H&y)I{LbYu3k	{N.U
<TextBlockText="Blue"FontSize="12"Margin="10,15,0,0"/>
Sg5vVD#~x0<Sliderx:Name="BlueSlider"Margin="20,0,10,0"Maximum="255"Value="0"ValueChanged="RedSlider_ValueChanged"/>
{nN[#b+o{0</StackPanel>

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

private voidRedSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgs<double> e)
hR	_7G'\d3d
JyO0{
:M5K$_'U#d#~	~R"Q0Colorcolor =Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);
%|1Vv8Dj3g3|0
0P]#aY:|oS&Y_0PreviewColor.Fill =newSolidColorBrush(color);ITPUB个人空间O}SX&nN [
HexColor.Text = color.ToString();ITPUB个人空间j{$H w)|ZU
}