xiaozhuaia 发表于 2015-5-23 08:45:55

Windows Phone开发之路(8) Silverlight三大布局容器

  Silverlight继承了WPF最重要的组成部分,那就是极其灵活的布局模式。使用这种布局模式,你可以将内容组织到一组不同的布局容器中。每个容器有其本身的布局逻辑,一种用来摆放元素(StackPanel),另一种使用一个硬编码的坐标系(Canvas),最后一种用来将元素排列在不可见的单元格中(Grid)。甚至你可以创建自定义布局容器。
  因为最顶层的UserControl定义了一个Silverlight页面,仅能容纳一个元素。要想装载一个以上的元素,并且构建一个更加实用的用户界面,你需要将容器放在网页上,然后将其他元素添加到这个容器中。
  Silverlight提供了三个Panel类的派生类来排列布局:StackPanel,Canvas和Grid。下面来分别介绍这三种布局容器。

StackPanel
  StackPanel的布局逻辑是:将一组元素从上到下或从左到右排列(取决于Orientation)。
  这里利用StackPanel布局,它定义了一段文本和一个按钮。代码如下:




      
      

  效果如图:


Canvas
  Canvas画布是Silverlight三个容器中最简单的一个。它的布局逻辑是:用精确的坐标来放置元素。要在Canvas中布局元素,需要设置3个属性:left坐标,top坐标以及ZIndex层。
  要在XAML中设置附加属性,要使用一种两段式的语法。这两部分用句点隔开,句点的左边是要定义属性类的名称(例如Canvas),右边是该属性的名称(例如Top)。下面是关于Canvas布局的一个例子,在画布中创建了一个矩形Rectangle和一个椭圆Ellipse,代码如下。


View Code



      
      

  效果如图:

  注意,坐标起始于左上角,如果没有设置Left和Top属性,它们都默认为0,即该元素将被放置于Canvas的左上角。

Grid
  Grid(或称网格)是Silverlight中最强大的布局容器,Grid将元素分开放置到多行和多列组成的看不见的网格中,注意,尽管网格被设计成看不见的,但是可以通过将Grid.ShowGridLines属性设置为true来使它显示出来。
  创建基于Grid的布局有两个步骤,第一,选择想要的列数事行数。第二,给包含的元素赋予合适的行和列。
  下面是一个创建基于Grid的布局的例子,代码如下:


View Code



      
      
            
            
      
      
            
            
            
      
      
      
      
      
      

  效果如图:

  注意:1,没有必要在RowDefinition或ColumnDefinition元素中提供任何信息,如果它们为空,Grid将让所有的行和列均匀共享该空间。
       2,要把单独的元素放入一个单元格中,需要使用Grid.Row和Grid.Column这两个附加属性。且这两个附加属性都是采用0作为默认的索引数字的。
       3,如果要把元素放在第一个单元格中,可以不设置这两个附加属性的值,因为它们默认值为0,但最后是显示地指定,因为这样看起来更加清晰。
  当然Grid还有3种尺寸调整策略和关于Grid的嵌套布局的内容可以结合实际使用的时候再去了解,今天要总结的就是这三种布局容器,下一篇将要总结的内容是关于Silverlight动画,希望大家继续支持,谢谢!
页: [1]
查看完整版本: Windows Phone开发之路(8) Silverlight三大布局容器