silverlight(三.布局控件)

最新推荐文章于 2019-06-27 03:03:44 发布

weixin_30339969

最新推荐文章于 2019-06-27 03:03:44 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Simcoder/archive/2010/10/01/1840737.html

本文详细介绍了Silverlight中的三种布局方式：Grid、Canvas和StackPanel。Grid用于创建由列和行组成的网格区域，Canvas允许通过坐标精确放置控件，StackPanel则将子元素沿水平或垂直方向排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Grid

Grid 主要是用来定义由列和行组成的可变网格区域。Grid 是用来做布局，不可做数据绑定。如果要使用数据绑定就要用DataGrid。

(使用VS2010视图开发起来比较简单快捷，鼠标右键点击Grid选择网格行或网格列就可以分别添加行和列；其高宽与frame框架设置类似可以使用*代替剩余的布局，也可以将剩余部分按等分，如高 2* 和 * 是分别把余下的高度等分三份然后各取所需)

VerticalAlignment="Center" : 垂直局中

HorizontalAlignment="Center" : 水平居中

Margin="0" ：单元格内居中

Grid代码

< Grid Height = " 300 " Name = " grid1 " Width = " 400 " Background = " AliceBlue " VerticalAlignment = " Center " HorizontalAlignment = " Center " >
         < Grid.ColumnDefinitions >
             < ColumnDefinition Width = " 125 " />
             < ColumnDefinition Width = " 174 " />
             < ColumnDefinition Width = " 101* " />
         </ Grid.ColumnDefinitions >
         < Grid.RowDefinitions >
             < RowDefinition Height = " 80 " />
             < RowDefinition Height = " 40 " />
             < RowDefinition Height = " 40 " />
             < RowDefinition Height = " 40 " />
             < RowDefinition Height = " * " />
         </ Grid.RowDefinitions >
         < TextBlock Grid.Column = " 1 " Height = " 23 " Name = " textBlock1 " Text = " 新用户注册 "   VerticalAlignment = " Center " HorizontalAlignment = " Center " Margin = " 0 "   FontSize = " 16 " />
         < TextBlock Height = " 23 " HorizontalAlignment = " Center " Margin = " 30,8,0,0 " Name = " textBlock2 " Text = " 用户名： " VerticalAlignment = " Top " Grid.Row = " 1 " FontSize = " 13 " />
         < TextBlock Height = " 23 " HorizontalAlignment = " Center " Margin = " 30,9,0,0 " Name = " textBlock3 " Text = " 密      码： " VerticalAlignment = " Top " Grid.Row = " 2 "   FontSize = " 13 " />
         < TextBlock Height = " 23 " HorizontalAlignment = " Center " Margin = " 30,9,0,0 " Name = " textBlock4 " Text = " 重复密码： " VerticalAlignment = " Top " Grid.Row = " 3 "   FontSize = " 13 " />
         < TextBox Grid.Column = " 1 " Grid.Row = " 1 " Height = " 23 " HorizontalAlignment = " Center " Margin = " 5,8,0,0 " Name = " textBox1 " VerticalAlignment = " Top " Width = " 140 " />
         < TextBox Height = " 23 " HorizontalAlignment = " Center " Margin = " 5,9,0,0 " Name = " textBox2 " VerticalAlignment = " Top " Width = " 140 " Grid.Row = " 2 " Grid.Column = " 1 " />
         < TextBox Height = " 23 " HorizontalAlignment = " Center " Margin = " 5,9,0,0 " Name = " textBox3 " VerticalAlignment = " Top " Width = " 140 " Grid.Column = " 1 " Grid.Row = " 3 " />
         < Button Content = " 确定 " Grid.Column = " 1 " Grid.Row = " 4 " Height = " 23 " HorizontalAlignment = " Left " Margin = " 19,22,0,0 " Name = " button1 " VerticalAlignment = " Top " Width = " 63 " />
         < Button Content = " 重置 " Grid.Column = " 1 " Grid.Row = " 4 " Height = " 23 " HorizontalAlignment = " Left " Margin = " 98,22,0,0 " Name = " button2 " VerticalAlignment = " Top " Width = " 61 " />
     </ Grid >

从代码可以看出，Grid编码再也不像table那样直观，Grid先画出格子，然后在直接拖入控件然后标明是显示到哪一个单元格内。如两个按钮分别设置了 Grid.Column="1" Grid.Row="4" 指明在第5行第2个单元格

2.Canvas

Canvas 定义了一个区域，在该区域中可以使用相对于该区域的坐标显式定位子对象。通过指定 x 和 y 坐标，可以控制对象在 Canvas 中的定位。这些坐标以像素为单位。x 和 y 坐标通常使用 Canvas.Left 和 Canvas.Top的附加属性来指定。

隐藏Canvas方法：设置一下任意一个属性即可

Height=0，Width=0，Background=null，Opacity=0，visibility=Visibility.Collapsed,Canvas的上级对象不可见。

(Canvas与Grid均可嵌套)

代码

< Canvas Height = " 300 " Name = " canvas1 " Width = " 400 " Background = " #FFF41313 " >
         < Canvas Canvas.Left = " 31 " Canvas.Top = " 27 " Height = " 243 " Name = " canvas2 " Width = " 323 " Background = " #FFE7F012 " >
             < Canvas Canvas.Left = " 34 " Canvas.Top = " 33 " Height = " 180 " Name = " canvas3 " Width = " 253 " Background = " #FF1EDD17 " />
         </ Canvas >
     </ Canvas >

3.StackPanel

StackPanel 将子元素排列成一行（可沿水平或垂直方向）。设置Orientation属性即可，默认是垂直的。

代码

< Grid x:Name = " LayoutRoot " Background = " White " >
         < StackPanel Height = " 300 " HorizontalAlignment = " Left " Name = " stackPanel1 " VerticalAlignment = " Top " Width = " 100 " >
             < Rectangle Fill = " Red " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Blue " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Green " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Purple " Width = " 50 " Height = " 50 " Margin = " 5 " />
         </ StackPanel >
         < StackPanel Height = " 100 " HorizontalAlignment = " Left " Margin = " 106,103,0,0 " Name = " stackPanel2 " VerticalAlignment = " Top " Width = " 266 " Orientation = " Horizontal " >
             < Rectangle Fill = " Red " Width = " 50 " Height = " 50 " Margin = " 5 " />
             < Rectangle Fill = " Green " Width = " 50 " Height = " 50 " Margin = " 5 " />
         </ StackPanel >
     </ Grid >

转载请保留此处：小绿虫博客开始学习silverlight,很多东西是看着文档自己摸索的，如果有不正确的地方，请多多指教！

随笔回顾：

转载于:https://www.cnblogs.com/Simcoder/archive/2010/10/01/1840737.html