<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系列(3):界面布局全部内容,希望文章能够帮你解决一步一步学Silverlight 2系列(3):界面布局所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)