.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:
e8m;}1l}F&]0ITPUB个人空间T'\9sIN.L dw

运行后界面的效果如下所示:ITPUB个人空间3i;K:D7lYl(xQ`
ITPUB个人空间A b?D4qH _
ITPUB个人空间Z"r2?)IA b
除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外,还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对 于父容器Canvas同样的边距,则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序,如下面 的XAML声明:
Ok Bc#k1D!Y&IkZe0
<CanvasBackground="#46461F">ITPUB个人空间!cS!MZR1p
<
RectangleFill="#0099FF"Width="160"Height="80"
,d)x2qy0s6kNi0
Canvas.Top="100"Canvas.Left="100">
7U q.v8Wv3f3U0Tj6k0
m"x0T3\5[h'w0<
RectangleFill="#FF9900"Width="160"Height="80"ITPUB个人空间uWm4mi|J{^9OYz
Canvas.Top="100"Canvas.Left="100"/>
B;Yzk4L#Ap!? y0
指定两个矩形相对于父容器Canvas的边距相同,这时默认的后声明的橙色矩形会覆盖蓝色矩形:ITPUB个人空间 `k7^7{0Mkv w
ITPUB个人空间^+nI.T,x?
指定Canvas.ZIndex为1
.Q.G#W%kK0<CanvasBackground="#46461F">
!o;w GSgiY"v0<
RectangleFill="#0099FF"Width="160"Height="80"ITPUB个人空间2x$IBw$^ W.r
Canvas.Top="100"Canvas.Left="100"Canvas.ZIndex="1"/>ITPUB个人空间C7NOQlPc(^
ITPUB个人空间~'nq.X$l5EA$wW4r!z8J
<
RectangleFill="#FF9900"Width="160"Height="80"
"\:a6_cz#y0
Canvas.Top="100"Canvas.Left="100"/>ITPUB个人空间/o5nd#Yz5z0R&X CA)X ]%Z
</
Canvas>ITPUB个人空间t _[GX)L

将会让蓝色矩形显示在上面,值最大的显示在最上面:ITPUB个人空间_`RV/`C}Y.gF
ITPUB个人空间 i&ks'lK D9XJ0p.r

StackPanel

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

<StackPanelBackground="#46461F">
0^0\l'dal/H:Mli0<
RectangleFill="#0099FF"Stroke="White"
/o r/gAOK2kQ.IY)_0
Width="100"Height="50"Margin="10"/>
F4I_)Jq$obF(D;J0<
RectangleFill="#0099FF"Stroke="White"
'L1y0I2b;E1W-T0
Width="100"Height="50"Margin="10"/>ITPUB个人空间+^#J'Tl*Vji2|
<
RectangleFill="#0099FF"Stroke="White"ITPUB个人空间.a_'V zRLv0A
Width="100"Height="50"Margin="10"/>ITPUB个人空间(U o OX|w
</
StackPanel>

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


\jZ(|CO#v `z_0

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

<StackPanelBackground="#46461F"Orientation="Horizontal">ITPUB个人空间`7ZQkF/A
<
RectangleFill="#0099FF"Stroke="White"
BhB+oX2Z5x*D8T0
Width="100"Height="50"Margin="10"/>
a*d ^)r-dn0<
RectangleFill="#0099FF"Stroke="White"
T"UGa)g:[`0
Width="100"Height="50"Margin="10"/>ITPUB个人空间7^1bQ.NN o:Y
<
RectangleFill="#0099FF"Stroke="White"ITPUB个人空间/L;NU|Y o)Q
Width="100"Height="50"Margin="10"/>ITPUB个人空间7I a+b)[4wu2?7JW
</
StackPanel>

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


Hx}2P'd*@0

在这里为了让各个控件之间有一定的距离,使用了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">
:^cf EM,v0<
Grid.RowDefinitions>ITPUB个人空间.V"Lc2T.t&`u
<
RowDefinitionHeight="120"/>ITPUB个人空间 CW@~ l {"Q H9e
<
RowDefinitionHeight="*"/>
wv @ F&O&N;?rw0</
Grid.RowDefinitions>
9Z%Wk&C/Vg C0<
Grid.ColumnDefinitions>
Msg9VX#uF0<
ColumnDefinitionWidth="100"/>
o.Q%]}1R0B0<
ColumnDefinitionWidth="*"/>
1cgO`G0</
Grid.ColumnDefinitions>
],D*}%BW;c0<
TextBlockGrid.Row="0"Grid.Column="0"Text="UserName:"VerticalAlignment="Center"Foreground="White"></TextBlock>ITPUB个人空间&u M?&ip
<
TextBlockGrid.Row="1"Grid.Column="0"Text="Password:"VerticalAlignment="Center"Foreground="White"></TextBlock>
Cb`S5O-y+s;c$]-}0<
TextBoxGrid.Row="0"Grid.Column="1"Width="200"Height="30"HorizontalAlignment="Left"></TextBox>ITPUB个人空间h#S@|)Qd0d"UQ
<
TextBoxGrid.Row="1"Grid.Column="1"Width="200"Height="30"HorizontalAlignment="Left"></TextBox>
'xhBPP5L"z6D1t0</
Grid>

定义一个两行两列的Grid,做一个简单的用户登录的布局,为了明显起见,把ShowGridLines属性设为True,以便能够显示出边框线。同时,我们指定了第一行的高度为120,而第二行的则是剩余的高度,用*来指定。运行后效果如下:
m7A0Y*ow&Hr|*jiS0
Ebp#q rND ^7ny0

综合实例

分别了解了上面的三个布局控件,接下来我们看一个综合实例,如何完成如下的一个取色器:
a'lk%H~9Y0
/|uVM.T-Ekx;U/X0

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

<Gridx:Name="LayoutRoot"Background="White">ITPUB个人空间"pLyp/aazo/p4nR
<
Grid.ColumnDefinitions>ITPUB个人空间 @mc4[&S `]
<
ColumnDefinitionWidth="260" />ITPUB个人空间:W t'b3pcy
<
ColumnDefinitionWidth="*" />ITPUB个人空间1q{#p,L bm/v$E
</
Grid.ColumnDefinitions>ITPUB个人空间*{l w K` S
<
Grid.RowDefinitions>
,])u6d]#X.]$ad0<
RowDefinitionHeight="120" />ITPUB个人空间^\2R bF
<
RowDefinitionHeight="120" />
aI&L:S&tm5Cv4C0</
Grid.RowDefinitions>ITPUB个人空间"Y2WY pf
</Grid>

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

<RectangleGrid.Row="0"Grid.Column="1"x:Name="PreviewColor"ITPUB个人空间_zKVm
L&KO5vz
Fill="#FF6600"Margin="10"Stroke="#666666"StrokeThickness="2" />

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

<StackPanelGrid.Row="1"Grid.Column="1" >ITPUB个人空间@^Q0C*jX4H7wJ&e
<
TextBlockFontSize="12">Color</TextBlock>
K#{M3l"]BJ0<
TextBoxx:Name="HexColor"Width="160"Height="30"Text="#FF6600"Margin="10,5"FontSize="11"/>ITPUB个人空间i Yd$_!}!U-Cu T3Y
</
StackPanel>

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

<StackPanelGrid.Row="0"Grid.Column="0"Grid.RowSpan="2"VerticalAlignment="Center">
a&G!f4Jv"Hi#yM0<
TextBlockText="Alpha"FontSize="12"Margin="10,15,0,0"/>ITPUB个人空间8Z4Sqf?r&~y
<
Sliderx:Name="AlphaSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/>
,GTp Gb,V M%{0<
TextBlockText="Red"FontSize="12"Margin="10,15,0,0"/>ITPUB个人空间^`#?@6U,h*X
<
Sliderx:Name="RedSlider"Margin="20,0,10,0"Maximum="255"Value="255"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间 @|-^8~P
<
TextBlockText="Green"FontSize="12"Margin="10,15,0,0"/>
Xo1Zp$V ]2R0<
Sliderx:Name="GreenSlider"Margin="20,0,10,0"Maximum="255"Value="102"ValueChanged="RedSlider_ValueChanged"/>ITPUB个人空间:v!Qd+W]1k
<
TextBlockText="Blue"FontSize="12"Margin="10,15,0,0"/>
3p:{ \V.|s1m/x0<
Sliderx:Name="BlueSlider"Margin="20,0,10,0"Maximum="255"Value="0"ValueChanged="RedSlider_ValueChanged"/>
'e;p6Ob1U#] d@0</
StackPanel>

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

private voidRedSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgs<double> e)
[{,ji%Y2WX^0{
Jz y,H9r1w*l0Colorcolor =Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);
6D$t tC5]t,L0ITPUB个人空间5E~b"`b@+L
PreviewColor.Fill =newSolidColorBrush(color);
vC?(WL0HexColor.Text = color.ToString();
2Y,O0Q8V{O#F(d R0}
运行后,可以选取不同的颜色值:
@u-C m"Y0L0
.o'kUe3~ Ci4m0

结束语

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

作者:TerryLeeITPUB个人空间R6?7_5g.{+lY5c
出处:http://terrylee.cnblogs.com
ITPUB个人空间b-ti^1} F:A(f/c p

TAG:

引用 删除 Guest   /   2009-04-25 21:38:28
3
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar