使用Silverlight实现布局的3种方式
4.68/5 (10投票s)
使用Silverlight实现布局的3种方式。
更新： 其他文章链接已移至底部。
目录
- 引言
- 其他 Silverlight FAQ
- Canvas、Grid 和 StackPanel
- Canvas – 绝对定位
- Grid – 表格布局
- Stack – 一个在另一个之上
- 源代码
- 其他 Silverlight FAQ
引言
这篇文章可能非常基础。但我见过很多 Silverlight 开发者在使用 Silverlight 中的布局控件和对象时遇到困难。在本节中，我们将快速了解 Silverlight 的 3 种不同的布局方法。在本文中，我们将介绍每种布局的实现，并为其制作一个简单的示例。
Canvas、Grid 和 StackPanel
Silverlight 提供了三种布局管理方式 - Canvas、Grid 和 Stack 面板。每种方法都适用于不同的布局需求。所有这些布局控件都继承自 Panel 类。在接下来的章节中，我们将逐一了解它们的工作原理。
Canvas – 绝对定位
Canvas 是最简单的布局管理方法。它支持使用“X”和“Y”坐标进行绝对定位。“Canvas.Left”有助于指定 X 坐标，而“Canvas.Top”有助于提供“Y”坐标。
下面是一个简单的代码片段，展示了如何使用“Canvas”在坐标 (50,150) 上定位一个矩形对象。
<Canvas x:Name="MyCanvas">
<Rectangle Fill="Blue" Width="100"
Height="100"
Canvas.Left="50"
Canvas.Top="150"/>
</Canvas>
下面是显示效果。当您运行代码时，XAML 查看器会将矩形对象定位在绝对“X”和“Y”坐标上。
Grid – 表格布局
Grid 布局可帮助您使用行和列定位控件。它与 HTML 中定义的表格非常相似。
下面是一个简单的表格，其中使用 Grid 定义了两列两行。我们展示了表格的显示效果。 使用 Grid.ColumnDefinition，我们定义了两列，并使用 Grid.RowDefinition 定义了两行。 然后，我们创建了 4 个文本块，然后使用 Grid.Column 和 Grid.Row 在每个部分中指定它们。 例如，要放置在第一列中，我们需要将 Grid.Column 指定为 0，将 Grid.Row 指定为 0。 我们对每个人都遵循相同的模式，您可以看到所有文本块都放置在相应的章节中。
Stack – 一个在另一个之上
顾名思义，行为也是如此。 Stack 允许您垂直或水平排列 UI 元素。
例如，下面是 4 个排列在堆栈面板元素中的元素。您可以看到堆栈如何对齐/将元素一个叠放在另一个之上。您还可以根据布局的性质水平或垂直堆叠 UI 元素。
源代码
我们提供了一个单独的源代码，其中包含三个 XAML 文件，解释了每个布局的示例。您可以从这里下载源代码。
其他 Silverlight 常见问题解答
Silverlight 常见问题解答第 1 部分：本教程有 21 个基本常见问题解答，可帮助您了解 WPF、XAML，帮助您构建您的第一个 Silverlight 应用程序，并解释整个 Silverlight 架构。
SilverLight 常见问题解答第 2 部分（动画和变换）：本教程包含 10 个常见问题解答，从 Silverlight 动画基础知识开始，然后展示一个简单的动画矩形。 然后，本文继续讨论转换对象的 4 种不同方法。
进一步阅读，请观看下面的面试准备视频和分步视频系列。