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

xiaozhuaia

　　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动画，希望大家继续支持，谢谢！