1.Grid
Grid 主要是用来定义由列和行组成的可变网格区域。Grid 是用来做布局,不可做数据绑定。如果要使用数据绑定就要用DataGrid。
(使用VS2010视图开发起来比较简单快捷,鼠标右键点击Grid选择网格行或网格列就可以分别添加行和列 ;其高宽与frame框架设置类似 可以使用*代替剩余的布局,也可以将剩余部分按等分,如 高 2* 和 * 是分别把余下的高度等分三份 然后各取所需)
VerticalAlignment="Center" : 垂直局中
HorizontalAlignment="Center" : 水平居中
Margin="0" :单元格内居中
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< 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均可嵌套)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< 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属性即可,默认是垂直的。
代码
< 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,很多东西是看着文档自己摸索的,如果有不正确的地方,请多多指教!
随笔回顾: