silverlight(三.布局控件)

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