Silverlight入门教程(4)

资料,教程,编程,文集

> </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 声明三个矩形:
<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"/>
运行后在界面显示效果如下:
当然我们也可以指定为水平排列,通过 Orientation 属性指定:
<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"/>
运行后界面显示效果如下:
在这里为了让各个控件之间有一定的距离,使用了 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="Cen ter" Foreground="White"></TextBlock> <TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Cen ter" Foreground="White"></TextBlock> <TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignme nt="Left"></TextBox> <TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignme nt="Left"></TextBox> </Grid>
定义一个两行两列的 Grid,做一个简单的用户登录的布局,为了明显起见,把 ShowGridLi
nes 属性设为 True,以便能够显示出边框线.同时,我们指定了第一行的高度为 120,而第二行的则是剩余的高度,用 *来指定.运行后效果如下:
综合实例
分别了解了上面的三个布局控件,接下来我们看一个综合实例,如何完成如下的一个取色器:
首先我们添加一个两行两列的 Grid 控

搜索“diyifanwen.net”或“第一范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，第一范文网，提供最新高等教育Silverlight入门教程(4)全文阅读和word下载服务。