当前位置: 首页 > web开发 > 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>

显示效果如下: