Silverlight入门：第二部分 - 定义界面布局和导航

Silverlight入门：第二部分 - 定义界面布局和导航2010-12-10 博客园焦炜理解XAML应用程序中的布局管理是开发成功Silverlight应用的一个重要方面。对于大多数来自Web领域的人来说，如果你对CSS不熟悉，那么这将成为你面临的最大的挑战之一。

理解布局选项

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

Canvas

StackPanel

Grid

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

Canvas

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

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

显示效果如下：

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

StackPanel

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

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

显示效果如下：