Silverlight入门系列的第二部分

这是 Silverlight入门 系列的第二部分。点击 这里可以查看本系列的目录。

理解XAML应用程序中的布局管理是开发成功Silverlight应用的一个重要方面。对于大多数来自Web领域的人来说，如果你对 CSS不熟悉，那么这将成为你面临的最大的挑战之一。

理解布局选项

Silverlight提供了一个灵活的系统用于在页面上布置界面元素。布局 模型同时支持绝对定位和相对定位的布局风格。虽然提供了多种布局 控件，但最常用的是：

    * Canvas
    * StackPanel
    * Grid

让我们逐个看看当把元素放在其中的时候，它们是如何工作的。我们将使用一个简单的按钮元素来演示。我们使用本系列第一部分创建的项目，并在Home.xaml页面作简单的演示。

Canvas

Canvas是最基础的布局控件，被用于通过坐标绝对地定位元素。你可以通过在Canvas中附加属性来定位元素。附加属性允许父容器（在这个例子中是Canvas）扩展在它之中的控件的属性（在这个例子中是按钮）。我们可以在Canvas中像这样放置很多按钮：

1.   1:  <Canvas>
   
2.   2:      <Button Canvas.Top="50" Canvas.Left="50" Content="Button 1" FontSize="18" Width="150" Height="45" />
   
3.   3:      <Button Canvas.Top="150" Canvas.Left="20" Content="Button 2" FontSize="18" Width="150" Height="45" />
   
4.   4:      <Button Canvas.Top="70" Canvas.Left="80" Canvas.ZIndex="99" Content="Button 3" FontSize="18" Width="150" Height="45" />
   
5.   5:  </Canvas>
   

复制代码

显示效果如下：

gs-step2-canvas_2.png(96.66 K)

1/19/2010 12:42:34 PM

可以看到，这是绝对定位布局的方法。注意到在这个例子中，我也可以通过指定扩展属性ZIndex使得一个按钮叠加在另一个上面。这可能有助于像是 游戏开发或者高物理环境这样对计算非常精确的场合。Canvas在位置移动不太大，或是你想漂亮地控制应用程序的尺寸时是很有用的。然而，Canvas有时不像StackPanel和Grid那么容易利用。

StackPanel

StackPanel是垂直或水平堆叠元素的布局控件（默认是垂直的）。示例代码如下：

1.   1:  <StackPanel>
   
2.   2:      <Button Margin="10" Content="Button 1" FontSize="18" Width="150" Height="45" />
   
3.   3:      <Button Margin="10" Content="Button 2" FontSize="18" Width="150" Height="45" />
   
4.   4:      <Button Margin="10" Content="Button 3" FontSize="18" Width="150" Height="45" />
   
5.   5:  </StackPanel>
   

复制代码

显示效果如下：

gs-step2-stackpanel-v_6.png(12.42 K)

1/19/2010 12:42:34 PM