[Win8]Windows8开发入门（三）：导航、布局和视图

最新推荐文章于 2024-09-14 23:11:55 发布

iteye_19603

最新推荐文章于 2024-09-14 23:11:55 发布

阅读量115

点赞数

文章标签：操作系统 ui c#

原教程地址：http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/jj215600.aspx

完整项目源码下载：http://download.csdn.net/detail/wxg694175346/5172480

步骤 1：添加页面和导航

在本教程中，我们将学习在可扩展应用程序标记语言 (XAML) 中创建用户界面的基本知识。为了学习这些基本知识，你创建一个简单的照片查看器，该查看器可让用户从他们的图片库中选取图片，然后查看器会显示该图片以及有关此图片文件的一些信息。在部分 2 的“Hello, world”""应用中为照片查看器添加一个新页面。为使用新页面，你添加一些可在页面间导航的命令。

你需要做的第一件事是为照片查看器将新页面添加到你的应用中。然后，向主页面添加导航命令，以便用户可以导航到新页面。

添加照片查看器页面

我们先从部分 2：管理应用生命周期和状态中的代码开始。

JJ215600.wedge(zh-cn,WIN.10).gif 向应用添加页面。

选择“项目”>“添加新项”。将打开“添加新项目”对话框。
提示确保在“解决方案资源管理器”中选中项目，而不是解决方案。
在左侧窗格中的“Visual C#”或“Visual Basic”下，选择“Windows 应用商店”模板类型。
在中心窗格中，选择“基本页面”。
输入 "PhotoPage.xaml" 作为该页面的名称。
单击“添加”。你的页面的 XAML 和代码隐藏文件即被添加到项目中。
以下是“添加新项”对话框。

首次向“空白应用”模板添加新页面（“空白页”除外）时，Visual Studio 会显示含有消息的对话框，告知你需要添加项目缺失的文件。你已经在部分 1 中添加了这些文件，因此你应该不会看到此警告。如果你看到警告，请单击“是”添加这些文件。将用于多种实用工具类的文件添加到Common文件夹中的项目中。）
若要更改页面标题，请选择 PhotoPage.xaml 顶部附近的"我的应用程序"文本。
确保名为pageTitle的TextBlock在“属性”面板中显示并且已选中“属性”视图()。
在“属性”面板的“常用”下，单击Text属性的属性标记。此时将打开“属性”菜单。
注意“属性标记”是每个属性值右侧的小框符号。Text属性标记为绿色，表示该属性已设置为资源。
在属性菜单中，选择“编辑资源”。随即打开“编辑资源”对话框。
在“编辑资源”对话框中，将值从"我的应用程序"更改为 "Hello, photo!"。
单击“确定”。
资源定义的 XAML 的更新方式与此类似。
XAML
<x:String x:Key="AppName">Hello, photo!</x:String>

添加导航

XAML UI 框架提供了使用Frame和Page的内置导航模型，其工作方式与在 Web 浏览器中的导航方式非常相似。Frame控件可托管Page，并且具有导航历史记录，你可以通过该历史记录在访问过的页面中前进和后退。在导航时，你还可以在页面之间传递数据。

在部分 1 和部分 2，你了解了启动应用时 App.xaml.cs/.vb 中可创建Frame和导航到MainPage的代码。下面，将向MainPage添加命令，以相同的方式导航到新的PhotoPage。

JJ215600.wedge(zh-cn,WIN.10).gif 在页面之间导航的步骤

在“解决方案资源管理器”中，双击 MainPage.xaml 打开它。

在 XAML 编辑器中，查找包含greetingOutputTextBlock的StackPanel。紧接greetingOutputTextBlock之后，添加Button元素，如下所示：

XAML

<Button x:Name="photoPageButton" Content="Go to photo page"/>

下面是你使用包围 XAML 添加的按钮。

XAML

<StackPanel Grid.Row="1" Margin="120,30,0,0">
    <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
    <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                 TextChanged="NameInput_TextChanged"/>
        <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
    <Button x:Name="photoPageButton" Content="Go to photo page"/>
</StackPanel>

在 XAML 编辑器或设计视图中，选择已添加到 MainPage.xaml 的“转到照片页”""Button。
在“属性”面板中，单击“事件”按钮 ()。
在事件列表的顶部查找Click事件。在事件的文本框中，键入 "PhotoPageButton_Click" 作为处理Click事件的函数名称。
按 Enter。事件处理程序方法在代码编辑器中创建和打开，因此你可以添加在事件出现时执行的代码。

向在代码隐藏页面中创建的事件处理程序添加该代码。在事件处理程序中，导航到你向应用中添加的新照片页。

            // Add this code.
            if (this.Frame != null)
            {
                this.Frame.Navigate(typeof(PhotoPage));
            }

按 F5 构建并运行应用。单击“转到照片页”按钮。此时会打开照片页。单击后退按钮，导航回到主页。

页面之间的导航

不需要向照片页添加后退按钮。此照片页基于LayoutAwarePage类，已内置对导航的支持。后退按钮使用Frame历史记录返回上一页，且仅在Frame.CanGoBack属性为true时显示。有关导航支持的更多示例，请参阅项目 Common 文件夹中 LayoutAwarePage.cs/.vb 文件的"导航支持"区域。

步骤 2：向页面添加控件和内容

现在，向照片页添加内容。在开始对照片页进行布局之前，最好使用 XAML 来了解布局的基础。

关于使用 XAML 创建 UI

XAML 布局系统支持静态布局和动态布局。

在静态布局中，你会对控件给定明确的像素大小和位置。当用户更改其设备的分辨率或方向时，UI 保持不变。静态布局可对不同的外形因素和显示尺寸进行拉伸、压缩或剪切。

动态布局可缩小、放大和重新排列，从而适合设备上的可用视觉空间。在动态布局中，当应用重新调整大小时，布局容器和控件会随之自动改变大小和位置。在 Windows 应用商店应用中，你仍可以在一些地方使用静态元素和值，但请确保整体 UI 是动态的，而且适应不同的分辨率、布局和视图。

大部分应用内容可以按分组和分层形式来组织。使用布局容器来分组和排列 UI 元素。XAML 布局系统提供了各种Panel控件，例如Grid、StackPanel和Canvas，这些控件可用作容器，你可以在其中排列内容。大多数容器可自动调整其子元素的大小（如果这些元素没有明确的大小设置）。

使用Grid来排列行和列中的内容。使用Grid.Row和Grid.Column附加属性对元素进行定位。通过使用附加属性Grid.RowSpan和Grid.ColumnSpan，可使得元素跨越多个行和列。

使用StackPanel来排列单个行中的内容。你可以设置Orientation属性来垂直或水平堆叠项目。

如果你想要对内容位置和大小设置的各个方面进行控制，可以使用Canvas。在Canvas中，使用Canvas.Top和Canvas.Left附加属性对元素进行绝对定位。画布不会更改子元素的大小，因此你需要明确设置它们的大小。

为了控制元素的大小和位置，为其设置了布局属性。下面是一些常见的布局属性及其效果。

HorizontalAlignment和VerticalAlignment：指定某个对象相对于其父对象所在的位置。
Margin：指定控件周围在子对象以外和面板边界之间的空白空间量。
Width和Height：指定固定值（以像素为单位）。
MinWidth/MaxWidth和MinHeight/MaxHeight：指定用于约束元素大小，但同时允许动态调整大小的值。

使用这些容器和布局属性为照片查看器页面创建动态布局。

XAML 布局工具

在部分 1 中，通过在 XAML 编辑器中直接输入 XAML 的方式向主页面中添加了控件。但是 Visual Studio 也包含可用于添加和排列控件的可视 XAML 设计器。对于本教程的其他部分，使用 XAML 设计器来创建 UI。在开始之前，让我们来看一看你所使用的 Visual Studio UI 的各个部分以及如何完成一些常见任务。

下面是你所使用的 Visual Studio 的主要部分：

面板	图像	描述
解决方案资源管理器		用于管理你的项目中的文件。双击文件将其打开。如果文件已打开，该文件即为活动文档。
属性		用于查看或编辑所选项目的属性。默认情况下，属性按类别分组。展开类别可查看其属性。通过单击类别底部的向下箭头可显示高级属性。
XAML 设计器		用于添加和排列应用 UI 的元素。常见的交互有拖放（用于排列项）和单击（用于选择项）。
XAML 编辑器		用于直接编辑 XAML。
工具箱		用于向你的应用 UI 添加控件和其他项目。将控件拖放到设计器的图面。
设备		用于模拟设计器中物理设备的不同设置。单击“视图”按钮可模拟设计器中的不同应用视图。更改“显示”设置可模拟设计器中的不同分辨率。
文档大纲		用于选择和排列分层视图中的 UI 元素。单击某个项目可将其选中。单击箭头可展开项目及查看其子元素。按住 Ctrl 并单击可选择多个非连续项目。按住 Shift 并单击可选择多个连续项目。拖放项目可重新排列它们。

我们假定你正在使用 Visual Studio 中的默认窗口布局。如果要更改默认布局，你可以在“窗口”菜单中选取“重置窗口布局”命令来重置布局。

下面是创建 UI 时经常操作的一些常见任务。在我们开始之前先了解如何完成这些任务，将让创建 UI 变得更加容易。

JJ215600.wedge(zh-cn,WIN.10).gif 打开文件的步骤

在“解决方案资源管理器”中双击文件名。如果文件已打开，该文件即为设计器和 XAML 编辑器中的活动文件。

默认情况下，“工具箱”、“设备”和“文档大纲”面板折叠在设计器的左侧。

JJ215600.wedge(zh-cn,WIN.10).gif 打开“工具箱”、“设备”或“文档大纲”面板的步骤

通过单击要打开的面板的名称打开任意面板。
若要保持面板为打开状态，请单击面板标题中的“自动隐藏”(pin) 图标。
提示如果“工具框”中包含你需要在其中拖动控件的 XAML 设计器的一部分，请将“工具框”固定为打开状态。

有多种方式可以选择项目并使其成为活动状态。在某些情况下，其中一种方式可能比其他方式更简单。在这种情况下，我们会建议使用该最简单的方式来选择项目。

JJ215600.wedge(zh-cn,WIN.10).gif 选择项目的步骤

在“文档大纲”中，单击元素或元素名称（如果元素有名称）。
在 XAML 编辑器中，单击元素的开始标记。
在 XAML 设计器中，执行下列操作之一：
- 将鼠标光标移到项目上，直到它周围出现突出显示的蓝色。单击突出显示的项目使其变成活动状态。
- 右键单击设计器中的某个对象。在上下文菜单中，打开“设置当前选定内容”子菜单并选择该项目，使其变成活动状态。
查看“属性”面板以确保处于活动状态的元素准确无误。

“属性”面板包含可管理属性和事件的视图。

JJ215600.wedge(zh-cn,WIN.10).gif 在“属性”和“事件”视图之间切换“属性”面板的步骤

在“属性”面板中，
- 单击“事件”按钮 () 以显示“事件”视图。
- 单击“属性”按钮 () 以显示“属性”视图。

要在代码中引用某个元素，必须为其命名。

JJ215600.wedge(zh-cn,WIN.10).gif 命名 UI 元素的步骤

选择要命名的元素。
在“属性”面板中，在Name文本框中键入名称。
按 Enter 提交名称。

在设计器中添加元素时，设计器会设置布局属性，以对元素进行绝对定位和设置大小。为创建动态布局，通常需要对这些属性进行重置。

JJ215600.wedge(zh-cn,WIN.10).gif 重置属性的步骤

确保已选中具有该属性的元素，并且“属性”面板正显示“属性”视图。
在“属性”面板中，单击属性值旁边的属性标记。此时将打开“属性”菜单。
在“属性”菜单中，单击“重置”。

JJ215600.wedge(zh-cn,WIN.10).gif 更改元素对齐方式的步骤

选择要对齐的元素。
在“属性”面板中的“布局”下，执行下列操作之一：
- 将HorizontalAlignment属性更改为下列内容之一：
  
  Left
  定位到左侧，但在会调整大小时拉伸至右侧。
  
  Center
  无论是否调整大小，总是定位到水平中心位置。
  
  Right
  定位到右侧，但会在调整大小时拉伸至左侧。
  
  Stretch
  调整大小时会向两个水平方向拉伸。
- 将VerticalAlignment属性更改为下列内容之一：
  
  Bottom
  定位到底端，但会在调整大小时拉伸至顶端。
  
  Center
  无论是否调整大小，总是定位到垂直中心位置。
  
  Top
  定位到顶端，但会在调整大小时拉伸至底端。
  
  Stretch
  调整大小时会向两个垂直方向拉伸。

JJ215600.wedge(zh-cn,WIN.10).gif 更改元素的边距的步骤

选择要设置边距的元素。
在“属性”面板中的“布局”下，设置一个或多个Margin值：左、右、上、下。

添加导航命令

在步骤 1 中，添加了Button以从主页面导航到新的照片页。为方便起见，将按钮置于主页面的画布上。但是导航命令与主页面上的其他所有内容均无关联，并且按钮的位置显得不太合适。在设计 Windows 应用商店应用时，考虑命令的位置这一点十分重要。

Windows 应用商店应用提供了分组命令的应用栏（默认情况下隐藏）。在需要显示命令时，可通过从屏幕上边缘或下边缘轻扫或右键单击来显示命令。屏幕顶端的应用栏通常用于导航，因此，添加一个顶端应用栏并将导航按钮移动到该应用栏。

JJ215600.wedge(zh-cn,WIN.10).gif 添加导航应用栏的步骤

在“解决方案资源管理器”中，双击 MainPage.xaml 打开它。
在“文档大纲”中，选择 "pageRoot" 元素。
在“属性”面板中，单击“属性”按钮 ()以显示“属性”视图。
在“属性”面板中的“常用”下，，找到TopAppBar属性。
单击TopAppBar旁边的“新建”按钮。AppBar控件即被添加到该页面。
在“文档大纲”中，展开TopAppBar属性。
选择 "photoPageButton" 元素，将其拖放到AppBar上。
在“属性”面板中的“布局”下，将HorizontalAlignment属性设置为Right()。
按 F5 构建并运行应用。若要测试应用栏，请右键单击主页面。应用栏将在屏幕顶端打开。

应用栏中的命令通常使用带有圆按钮和图标的特定样式显示。很多常见应用栏按钮样式都包含在 StandardStyles.xaml 资源字典中。此时，将这些样式之一应用到应用栏中的导航按钮。

JJ215600.wedge(zh-cn,WIN.10).gif 设置应用栏按钮的样式

在解决方案资源管理器中，展开Common 文件夹，然后双击 StandardStyles.xaml 打开它。

使用x:Key值PicturesAppBarButtonStyle找到Style。

提示按 Ctrl+F 以打开“查找”窗口并搜索 "PicturesAppBarButtonStyle"。

将此Style移动到注释标记 () 之外，使其变为可用状态。

或者，将 XAML 复制到 App.xaml 中的本地ResourceDictionary中。

下面是Style的 XAML。

XAML

<Style x:Key="PicturesAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="PicturesAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Pictures"/>
    <Setter Property="Content" Value="&#xE158;"/>
</Style>

保存 StandardStyles.xaml 并将其关闭。
在 MainPage.xaml 中，选择“文档大纲”面板中的 "photoPageButton" 元素。
（你可能需要展开“TopAppBar”元素进行查看。）
重置以下Button属性：Content。
在“属性”面板中的“其他”下，找到Style属性。
单击Style属性旁边的属性标记可打开菜单。

在菜单中，选择“本地资源”>“PicturesAppBarButtonStyle”。

下面是应用栏的最终 XAML。（在 VB 中，可能缺少Click事件声明。事件处理程序使用Handles关键字。）

XAML

<common:LayoutAwarePage.TopAppBar>
    <AppBar>
        <Button x:Name="photoPageButton" 
                Click="PhotoPageButton_Click"
                HorizontalAlignment="Right" 
                Style="{StaticResource PicturesAppBarButtonStyle}"/>
    </AppBar>
</common:LayoutAwarePage.TopAppBar>

按 F5 构建并运行应用。若要打开应用栏，请从屏幕上边缘或下边缘轻扫或右键单击应用。

你已使用应用栏清除主页的布局。现在我们将注意力转到新的照片查看器页面。

添加布局网格

你首先添加一个Grid以将页面的内容区域划分为 3 行。前 2 行的高度固定，最后一行填充剩余的可用空间。

JJ215600.wedge(zh-cn,WIN.10).gif 向页面中添加“网格”面板的步骤

打开 PhotoPage.xaml。
将Grid从“工具箱”拖放到页面中间的设计图面上。
Grid即被添加到页面，并且设计器会根据其对你想要布局的最佳推测来设置一些属性。Grid周围即出现突出显示的蓝色以表示它现在是活动对象。
在“属性”面板中，输入 "contentGrid" 作为Grid的名称。
重置以下Grid属性：Width、Height、HorizontalAlignment、VerticalAlignment和Margin。Grid现在完全填满页面的内容区域。
在“布局”下，将左侧Margin和底部Margin设置为 "120"。
在设计器中，虚线称为网格围栏，显示在Grid顶部和左侧边缘。将你的光标移动到左侧网格围栏上。指针将更改为带加号 (+) 的箭头，并且橙色线将显示要添加行的位置。
单击左网格围栏上的任意位置添加一行。
重复上一步骤向Grid添加另一行。
Grid中目前有 3 行。当光标位于网格围栏上时，将出现一个小的弹出窗口，你可以使用该窗口选择大小设置选项和调整行的Height属性。
将光标置于第一行中的网格围栏上，直到出现弹出窗口。
单击向下箭头以打开弹出式菜单。在菜单中选择“像素”。
将光标再次置于网格围栏上，直到出现弹出窗口。在弹出窗口中单击数值。
键入 "50" 并按 Enter 以将Height属性设置为 50 像素。
重复步骤 9-12 中的操作以将第二行Height设置为 70 像素。
最后一行设置为默认值 "1*"（1 星），表示它将使用所有剩余空间。

现在，我们来看看上述操作产生的 XAML。

XAML

<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

若要在Grid中定义行，则需要在Grid.RowDefinitions集合中添加RowDefinition对象。你可以在RowDefinition中设置属性，以指定行的外观。添加列的方法是相同的，只不过要使用ColumnDefinition对象和Grid.ColumnDefinitions集合。

请注意在打开的Grid标记中该设置的情况：Grid.Row="1"。使用Grid.Row和Grid.Column附加属性在Grid中对元素进行定位。行和列编号是从零开始的，因此该设置表示 "contentGrid" 面板已添加到其父Grid的第二行中。此属性由 Visual Studio 根据拖动Grid的位置和添加其的时间来设置。

向照片页添加控件

现在，向Grid中添加控件。添加Button以从图片库获取一张图片、一个Image控件（用于显示该图片）以及一些TextBlock控件（用于显示有关该图片文件的信息）。在最后一个网格行中使用StackPanel来排列Image和TextBlock控件。

JJ215600.wedge(zh-cn,WIN.10).gif 向页面添加控件的步骤

添加"获取照片"按钮
1. 在“文档大纲”中，选择 "contentGrid" 面板。
2. 选中 "contentGrid" 面板，将Button控件从“工具箱”拖放到第一个网格行。
3. 在“属性”面板中，重置以下Button属性：HorizontalAlignment、VerticalAlignment和Margin。
4. 将按钮的Content属性设置为"获取照片"。
添加图像名称 TextBlock
1. 选中 "contentGrid" 面板，同时将TextBlock控件从“工具箱”拖放到第二个网格行。
2. 在“属性”面板中，重置以下TextBlock属性：HorizontalAlignment、VerticalAlignment和Margin。
3. 展开“其他”组并找到“样式”属性。
4. 在“样式”属性菜单中，选择“本地资源”>“PageSubheaderTextStyle”。
添加图像
1. 选中 "contentGrid" 面板，同时将StackPanel从“工具箱”拖放到最后一个网格行。
2. 重置以下StackPanel属性：Width、Height、HorizontalAlignment、VerticalAlignment和Margin。
3. 在“属性”面板中，将StackPanel的Orientation属性设置为Horizontal。
4. 在StackPanel的Name文本框中，键入 "imagePanel"，然后按 Enter。
5. 选中StackPanel，同时将Border控件从“工具箱”拖放到StackPanel。
6. 在“属性”面板中的“画笔”下，选择Background。
7. 选择纯色画笔选项卡，然后将颜色值设置为 "#FF808080"。
8. 对BorderBrush属性重复步骤 6 到步骤 7。
9. 将Image控件从“工具箱”拖放到Border。
10. 在Image的Name文本框中，键入 "displayImage"，然后按 Enter。
11. 在ImageSource属性的下拉列表中，选择 "Logo.png"。
12. 在“文档大纲”中，选择包含Image的Border。
13. 在“属性”面板中，重置BorderWidth属性。
添加图像信息
1. 将TextBlock控件从“工具箱”拖放到 "imagePanel"StackPanel（位于Image控件的右侧）。
  在此处，你无需重置任何布局属性，这与在网格中放置TextBlock不同。StackPanel和Grid对其子元素的大小调整处理方式不同。有关详细信息，请参阅快速入门：添加布局控件。
2. 向StackPanel中再拖放 5 个TextBlock控件。
  现在在Image控件的右侧有 6 个TextBlock控件水平排列。
3. 选择第一个TextBlock并将其Text属性设置为"文件名称："。
4. 选择第三个TextBlock并将其Text属性设置为"路径："。
5. 选择第五个TextBlock并将其Text属性设置为"创建日期："。

现在，照片查看器的 UI 如下所示。布局已差不多完成，但仍需修复显示图片信息的TextBlock的外观。

XAML 设计器中的应用

以下是为此布局生成的 XAML。

XAML

<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="Get photo"/>
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource PageSubheaderTextStyle}"/>
    <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
         <Border BorderBrush="Gray" BorderThickness="7" Background="Gray">
             <Image x:Name="displayImage" Source="Assets/Logo.png"/>
         </Border>
         <TextBlock TextWrapping="Wrap" Text="File name:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Path:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Date created:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
    </StackPanel>
</Grid>

你需要修复已添加的TextBlock的布局和格式。为了将图片信息文本设置为你所希望的布局，将控件组合到垂直的StackPanel中。

JJ215600.wedge(zh-cn,WIN.10).gif 将项目组合到 StackPanel 的步骤

在“文档大纲”中，单击 "imagePanel"StackPanel中的第一个TextBlock。
按住 Shift，然后单击组中的最后一个TextBlock。现在已选择 6 个TextBlock控件。
右键单击选定的TextBlock控件组。在上下文菜单中，选择“组合到”>“StackPanel”。
StackPanel已添加到页面，并且 6 个TextBlock控件已置于StackPanel内。
在“属性”面板中的“布局”下，将StackPanelOrientation属性设置为Vertical。
将StackPanel左侧Margin设置为 "20"。

要做的最后一件事便是格式化图片信息文本。使用内置的文本样式，并设置一些边距以在元素之间创建空间。

JJ215600.wedge(zh-cn,WIN.10).gif 设置文本样式的步骤

在“文档大纲”中，单击 "imagePanel"StackPanel中的第一个TextBlock。
按住 Ctrl，然后单击组中的第三个和第五个TextBlock。现在已选择 3 个TextBlock控件。
在“属性”面板中的“其他”下，找到Style属性。
在Style属性菜单中，选择“本地资源”>“CaptionTextStyle”。
选择组中的第二个、第四个和第六个TextBlock控件。
将Style属性设置为“本地资源”>“ItemTextStyle”。
将左侧Margin属性值设置为 10，并将底部值设置为 30。

图片信息文本的 XAML 现在应如下所示。

XAML

<StackPanel Margin="20,0,0,0">
    <TextBlock TextWrapping="Wrap" Text="File name:" 
               Style="{StaticResource CaptionTextStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource ItemTextStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Path:" 
               Style="{StaticResource CaptionTextStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource ItemTextStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Date created:" 
               Style="{StaticResource CaptionTextStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource ItemTextStyle}" Margin="10,0,0,30"/>
</StackPanel>

按 F5 构建并运行应用。导航到照片页。现在它的外观如下所示。

XAML 设计器中的应用

步骤 3：调整页面布局以适应不同的方向和视图

目前，将应用设计为以全屏幕方式横向查看。但新的 Windows UI 必须能够适应各种不同的方向和布局。具体来说，它必须对纵向和横向都支持。在横向方位中，它必须支持全屏、填充和辅屏布局。下面，我们来了解一下如何使你的应用在任何分辨率、任何方向均能显示正常。

在 Visual Studio 中使用不同的视图

若要查看应用在每种视图中的外观，可以使用 Microsoft Visual Studio2012 中的“设备”面板。你可以在 Visual Studio 设计器中使用该面板为应用模拟多种视图、显示情况和显示选项。在此，你将了解如何使用“视图”选项，但你还需要使用“显示”选项以查看 UI 在不同屏幕分辨率下的外观。动态视图在不同的屏幕上均可正常显示。

“设备”面板

首先，我们来试试不同的视图以查看应用的外观。

JJ215600.wedge(zh-cn,WIN.10).gif 在 Visual Studio 中使用不同的视图的步骤

在“设备”面板中，单击填充 () 视图按钮。设计器将更改为模拟填充视图。
以下是用户将其他应用辅屏到该应用时此应用的外观。此视图看起来正常，因此可保留不变。
在“设备”面板中，单击辅屏 () 按钮。设计器将更改为模拟辅屏视图。
以下是用户将该应用辅屏到其他应用附近时此应用的外观。该视图对于显示整个应用过于狭窄，因此，需要进行一些调整使之正常显示。
在“设备”面板中，单击纵向 () 按钮。设计器将更改为模拟纵向视图。
以下是用户将该应用旋转为纵向时此应用的外观。该视图也过于狭窄。需要对其做出一些与辅屏视图类似的调整。

调整辅屏视图

首先对辅屏视图做出一些更改。

JJ215600.wedge(zh-cn,WIN.10).gif 调整辅屏视图的步骤

在“设备”面板中，单击辅屏 () 按钮以显示辅屏视图。
选中“启用状态记录”复选框。
启用状态记录后，对布局的更改只会应用到当前可视状态，并且会在 XAML 的VisualStateManager部分做出更改。否则，只会对默认视图做出更改。
旋转 "contentGrid"Grid控件。
在“布局”下，将网格的左侧Margin设置为 "20"。
将网格的底部Margin设置为 "20"。
选择 "imagePanel"StackPanel。
在“属性”面板中的“布局”下，将面板的Orientation属性设置为Vertical。

此应用在辅屏视图中的外观如下所示。

辅屏视图

当你将StackPanel从Horizontal更改为Vertical时，Border和Image将自动调整大小。下面是动态布局的示例。StackPanel允许其子元素在其定向的方向上延伸，并限制它们在反方向上延伸。除了要将图像设置为固定大小之外，将允许布局面板排列其子元素并设置它们的大小。