信息
您所需的主题如下所示。但此主题未包含在此库中。

Windows Phone 8 的布局

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone 提供灵活的布局系统,让您可以指定控件在屏幕上的定位方式。本快速入门介绍如何设计可以根据不同的屏幕分辨率自动调整大小的用户界面。

本主题包括以下部分。

布局指在 Windows Phone 应用中调整对象大小和定位对象的过程。要定位可视化对象,您必须将它们放置于从 Panel 派生出来的容器控件或其他容器对象中。Windows Phone 提供多个 Panel 控件,例如 CanvasStackPanelGrid,这些控件可用作容器,使您能够对控件进行定位和排列。

Windows Phone 布局系统既支持绝对布局,也支持动态布局。在绝对布局中,使用显式 x/y 坐标定位控件(例如,通过使用 Canvas)。在动态布局中,用户界面根据不同的屏幕分辨率自动调整大小(例如,通过使用 StackPanelGrid)。

在绝对布局中,通过指定子元素相对于其父元素的准确位置,在布局面板内排列子元素。绝对定位不考虑屏幕大小。如果应用要求 UI 元素为绝对定位,您可以针对不同的屏幕分辨率设计不同的页面,或者使用缩放。

Windows Phone 提供 Canvas 控件以支持绝对定位。在默认情况下,当您创建新的 Windows Phone 应用项目时,根布局面板是 Grid,它在绝对定位的基础上创建布局,您必须用 Canvas 替换 Grid

若要在画布上定位控件,则在控件上设置以下附加属性。当您在 Visual Studio 中使用设计器时,这些属性会在您将控件拖至设计图面时更新。

在动态布局中,用户界面会根据不同的屏幕分辨率正确显示。通过指定子元素相对于其父元素应该如何排列以及应该如何换行来排列子元素。例如,您可以在面板上排列控件并指定它们应水平换行。若要使用自动或成比例调整大小,则必须向 HeightWidth 属性分配特殊的值。以下是针对动态布局的建议设置:

  • 将控件或布局的高度和宽度设置为 Auto。当这些值用于 Grid 布局中的控件时,控件填充其所在的单元格。控件以及 GridStackPanel 布局支持自动调整大小。

  • 对于包含文本的控件,移除 HeightWidth 属性,并设置 MinWidthMinHeight 属性。这可以防止文本缩小至不可读的大小。

  • 若要在 Grid 布局中为 RowDefinitionColumnDefinition 元素设置成比例值,则使用相对的 Height 和宽度值。例如,若要指定一列比另一列宽 5 倍,则在 ColumnDefinition 元素中对 Width 使用“*”和“5*”。

自动和星号调整大小

Auto 调整大小用于允许控件容纳它们的内容,即使内容更改大小也是如此。Star 调整大小用于根据加权比例分配网格的行和列之间的可用空间。在 XAML 中,星号值表示为 *(或 n*)。例如,如果您的网格有 4 列,您可以按照下表所示的值设置各列的宽度:

Column_1

自动

该列的大小将根据其内容调整。

Column_2

*

计算完“自动”列之后,该列获得其余宽度的一部分。第 2 列的宽度将为第 4 列的一半。

Column_3

自动

该列的大小将根据其内容调整。

Column_4

2*

计算完“自动”列之后,该列获得其余宽度的一部分。第 4 列的宽度将为第 2 列的两倍。

有关自动和星号调整大小的更多信息,请参见 GridUnitType 枚举。

Windows Phone 中的内置布局面板是 CanvasStackPanelGrid

画布

Canvas 定义一个区域,在该区域内,您可以使用相对于 Canvas 区域的坐标显式定位子元素。Canvas 对于所含 UI 元素从不移动的方案有用。

通过指定 x 和 y 坐标,可以在 Canvas 中定位控件。x 和 y 坐标是通过使用 Canvas.LeftCanvas.Top 附加属性指定的。Canvas.Left 指定对象与包含它的 Canvas 的左侧之间的距离(x 坐标);Canvas.Top 指定对象与包含它的 Canvas 的顶部之间的距离(y 坐标)。

下面的 XAML 演示如何定位与画布左侧相距 30 像素、与画布顶部相距 200 像素的矩形。

<Canvas Background="Transparent">
    <Rectangle Canvas.Left="30" Canvas.Top="200"
        Fill="red" Width="200" Height="200" />
</Canvas>

下图演示如果在 LayoutRoot 中,在名为 TitlePanel 的 StackPanel 后面添加上述 XAML 的输出结果。

QS Layout Canvas

StackPanel

StackPanel 是简单的布局面板,它将其子元素排列成一条水平或垂直方向的直线。您可以使用 Orientation 属性指定子元素的方向。Orientation 属性的默认值为 VerticalStackPanel 通常用于您希望排列页面上的 UI 的较小子节的方案中。

下面的 XAML 演示如何创建项的垂直 StackPanel

<StackPanel Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>

上述 XAML 将生成与下面的 Windows Phone 插图所描述的类似的输出。

QS Layout StackPanel

网格

Grid 控件是最灵活的布局面板,支持以多行和多列布局排列控件。您可以使用在 Grid 控件中立即声明的 RowDefinitionsColumnDefinitions 属性指定 Grid 的行和列定义。可以通过使用 Column 和 Row 附加属性,在 Grid 的特定单元格中定位对象。您可以使用自动或星号调整大小分配列或行内的空间。本快速入门前面已解释了自动和星号调整大小。使用 RowSpanColumnSpan 附加属性可以使内容跨多个行和列。

Grid 的子元素按其在标记或代码中出现的顺序绘制。因而,当各元素共享相同的坐标时,便可以获得分层的顺序(也称为 z 顺序)。有关 z 顺序的更多信息,请参见 ZIndex

以下 XAML 演示如何创建三行两列的 Grid。第一行和第三行的高度刚好可以包含文本。第二行的高度填充剩余的可用高度。在可用容器宽度内平均分配各列的宽度。

<Grid ShowGridLines="True" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />
    <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />
    <Button Content="1st row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="0" />
    <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />
</Grid>

上述 XAML 将生成与下图所描述的类似的输出。

QS Layout GridPhone

如果您正在创建不能通过使用 CanvasStackPanelGrid 轻松实现的复杂布局,可以创建一个自定义面板,该面板允许您定义面板子级的布局行为。若要这样做,请从 Panel 派生并重写其 MeasureOverrideArrangeOverride 方法。

显示: