Windows Phone 系列- 在屏幕上的布局
在屏幕上的布局
Silverlight 的 Windows Phone 提供了一个灵活的布局系统，使您可以指定控件在屏幕上的定位方式。这个快速入门介绍如何设计一个不同的屏幕分辨率来自动调整大小的用户界面。
这个快速入门包含以下部分：
- 布局概述
- 绝对布局
- 动态布局
- 面板控件
布局概述
布局是 Windows Phone Silverlight 的应用程序中的大小调整和定位对象的过程。可视对象的位置，您必须将它们放在面板控件或其他容器对象。Silverlight 提供的各种面板控件，如画布、 StackPanel和网格，作为容器，并使您可以定位和排列控件。
Windows Phone Silverlight 的布局系统支持绝对布局和动态的布局。在绝对的布局中，控件的位置使用显式 x/y 坐标 （例如，通过使用画布）。在动态布局中，用户界面会自动以不同的屏幕分辨率大小 （例如，通过使用StackPanel或网格).
绝对布局
在绝对的布局中，您通过指定其相对于其父元素的确切位置排列布局面板的子元素。绝对定位并不认为在屏幕的大小。如果应用程序需要的绝对定位的 UI 元素，您可以设计不同的屏幕分辨率或使用缩放作为备用的不同页面。
Silverlight 的 Windows Phone 提供画布控件支持绝对定位。默认情况下，当您创建一个新的 Windows Phone 应用程序项目，根布局面板是一个网格。若要创建基于绝对定位的布局，必须用帆布替换网格.
在画布上的控件的位置，您可以设置以下附加的属性的控制。在 Visual Studio 中使用设计器时，您将控件拖到设计图面时，将会更新这些属性。
- Canvas.Left
- Canvas.Top
动态布局
在动态布局中，用户界面能够正确显示在不同的屏幕分辨率。您可以通过指定应在如何安排和他们应如何换行相对于其父排列子元素。例如，可以排列面板上的控件并指定他们应包水平。要使用自动或按比例调整大小，您必须为高度和宽度属性指定特殊值。以下是一个动态布局的推荐的设置：
- 设置为自动的高度和宽度的控件或布局。当这些值用于网格布局中的控件时，该控件填充包含它的单元格。为控件和网格和StackPanel布局支持自动调整大小。
- 对于包含文本的控件，卸下的高度和宽度属性，并设置的MinWidth或MinHeight的属性。这可以防止文本向下扩展到不可读的大小。
- 若要设置比例值的RowDefinition和ColumnDefinition元素网格布局中的，使用相对的高度和宽度值。例如，指定一列是五倍宽于另一列，请使用"＊"和"5 ＊"中的ColumnDefinition元素的宽度属性。
汽车和明星调整大小
自动调整大小用于允许控件以适合其内容，即使内容更改大小。明星施胶用于分发的行和列的网格之间的可用空间的加权比例。在 XAML 中，明星的值来表示 ＊ （或 n ＊）。例如，如果您有一个带有四个列的网格，您可以设置列的宽度为下表中显示的值。
| Column_1 | 自动 | 列将调整大小以适合其内容。 |
| Column_2 | * | 后自动计算列，列获取的剩余的宽度的一部分。2 栏将一半列 4 一样宽。 |
| Column_3 | 自动 | 列将调整大小以适合其内容。 |
| Column_4 | 2* | 后自动计算列，列获取的剩余的宽度的一部分。4 列，将列 2 的两倍宽。 |
有关自动和星形调整大小的详细信息，请参阅GridUnitType枚举。
面板控件
内置的布局面板在 Silverlight 的 Windows Phone 是画布， StackPanel和网格.
画布
画布上定义一个区域，在其中您可以显式定位子元素的坐标相对于画布区域。画布是为用户界面元素所包含的永远不会将移动的情况非常有用。
您可以通过指定定位画布内部控制的 x 和 y 坐标。X 和 y 坐标通过使用Canvas.Left和Canvas.Top连接属性中指定。Canvas.Left指定从左侧的画布（x 坐标），包含该对象的距离和Canvas.Top指定对象的距离从包含画布（y 坐标） 的顶部。
以下 XAML 显示如何从的画布上的左和 200 像素的矩形 30 像素的位置.
XAML
前面的 XAML 生成输出类似于下面的插图。
StackPanel
StackPanel是一个简单的布局面板，成为一条直线，可以面向水平或垂直排列其子元素。您可以使用方向属性指定子元素的方向。方向属性的默认值是垂直的。StackPanels通常用于在方案中要安排您的网页上的用户界面的一小部分的位置。
以下 XAML 演示如何创建垂直 StackPanel 的项目。
XAML
前面的 XAML 生成输出类似于下面的插图。
网格
网格控件是最灵活的布局面板，并支持多行和多列布局排列控件。您可以指定网格的行和列的定义，使用网格控件中立即声明的Grid.RowDefinitions和Grid.ColumnDefinitions属性。您可以在特定单元格网格的定位对象通过使用Grid.Column和Grid.Row的附加属性。您可以通过使用自动或星形调整大小分发的列或行中的空间。汽车和星形调整大小都较早前在这个快速入门解释。内容可以跨多个行和列使用RowSpan和ColumnSpan的附加属性。
绘制网格的子元素的标记或代码中出现的顺序。因此，当元素共享相同的坐标，可以实现分层的顺序 （也称为 z-顺序）。关于 z-顺序的详细信息，请参阅z 索引.
以下 XAML 显示如何创建具有三行和两个列的网格。第一和第三行的高度是刚刚足够大，以包含文本。第二行的高度，填满可用高度的其余部分。可用容器宽度内同样拆分列的宽度。
XAML
前面的 XAML 生成输出类似于下面的插图。
如果您正在创建一个复杂的布局，通过使用画布， StackPanel或网格并不很容易实现的您可以创建自定义的面板，允许您定义布局行为面板的儿童。为此，从面板和重写其MeasureOverride和ArrangeOverride的方法。有关详细信息，请参阅自定义面板.