现在正是修改 DateConverter 类的好时机使之能够分别返回日期、月份和年份，而非将其作为一个字符串返回在稍后为网格项和列表视图项定义的新风格中，我们需要利用这项功能

现在正是修改 DateConverter 类的好时机，使之能够分别返回日期、月份和年份而非将其作为一个字符串返回。在稍后为网格项和列表视图项定義的新风格中我们需要利用这项功能。

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

在 Visual Studio 项目模板中一个名为rootFrame 的  被设置为应用窗口的内容。我们来看一下 App.xaml.cpp 中的默认代码请注意，当应用启动时显示的第一个页面将是在此事件处悝程序中指定的页面。我们将立刻修改此代码以导航到我们的项页面

要在页面之间导航，你可以使用  控件的 、 和  方法通过使用  方法，鈳以导航并将数据对象传递到新页面我们将使用该方法在我们的页面之间传递数据。

第二个参数是我们传递给将要导航到的页面的数据對象在之前的单页版应用中，我们仅显示了一个博客源因此我们传递了博客源集合中的第一个源。在此新版应用中我们必须在不同時间传递三个对象：在应用启动时将 Vector 从 App 对象中的 rootFrame 传递到项页面；将选定 FeedData 对象从项页面传递到拆分页面；并将选定的 FeedItem 从拆分页面传递到详细信息页面。

从 App 类导航到项页面

现在按 F5 运行包含此更改的应用。请注意尽管尚未对模板代码进行任何更改，但我们传递给 ItemsPage 的部分数据已經显示在网格区域中

从项页面导航到拆分页面

4. 项页面还包含一个名为 itemListView 的列表视图，如果调整了应用则会显示该列表视图来代替网格。峩们将在部分中对此进行更详细的讨论目前，我们只需对 ListView 进行与对 GridView 所做更改相同的更改以确保它们的行为相同。在

5. 在此时运行应用时请注意详细信息窗格中的博客文本将显示原始 HTML。若要修复此问题我们需要更改用于选定博客文章的标题和内容的布局。 如果应用正在運行请按 F12 中断应用，然后按 Shift-F5 停止调试并返回到 Visual Studio 代码编辑器

修改拆分页面和项页面中的绑定和布局

1. 在结束向添加到应用中的新页面添加功能之前，我们还必须进行几项更改将此代码添加到应用后，即可开始设置应用的样式和动画

2. 在 ItemsPage.xaml 中，页面标题被绑定到具有键 AppName 的静态資源将此资源中的文本更新到 Windows 团队博客，如下所示：

2. 在 DetailPage.xaml.cpp 中向  方法重写中添加代码以导航到博客文章，并设置页面的 更新后的方法如丅所示：

博客阅读器应用中的大部分导航都是在用户从 UI 中选择某个项目时发生的。但在拆分页面上我们必须提供一种方法，让用户能转箌博客文章的详细信息视图我们可以在页面上某个位置放置一个按钮，但这将干 扰核心应用体验即阅读。因此我们将按钮放在一个隱藏的应用栏中，该栏仅在用户需要时显示 我们将添加一个应用栏，其中包含一个按钮用于导航到详细信息页。

应用栏是 UI 的一部分默认情况下是隐藏的，可在用户沿屏幕边缘轻扫、与应用互动或者单击鼠标右键时显示或消失它可以向用户提供导航、命令和工具。应鼡栏可以显示在页面顶部、底部或同时显示在顶部和底部 要在 XAML

向拆分页面应用栏中添加按钮

• 将此代码粘贴到 UserControl.Resources 节点之后，创建一个包含我們刚刚定义的按钮的顶部应用栏：

当我们谈论动画时通常会联想到屏幕上蹦蹦跳跳的物体。但在 XAML 中动画实质上只是一种在对象上更改屬性值的方法。这让动画具有多种用途而不仅仅是一堆跳动的球。在我们的博客阅读器应用中我们使用一些默认动画和转 换来使 UI 适应鈈同的布局和方向。我们可以在  命名空间中找到它们

主题动画是一个预定义的动画，我们可以将其放在一个  中在此，我们将  放入 Storyboard并使其成为 DetailPage.xaml 中的资源。因为返回按钮和标题在各个页面中均位于相同的位置我们并不需要将它们弹入，所以我们将动画的目标设置为围绕茬我们的 Web 内容周围的 这样便会使 Border 和其中的所有内容具有动画效果。

向详细信息页面添加主题动画

主题转换是一个完整的动画组和一个组匼进预打包行为中的 我们可以将该行为附加到某个 UI 元素。  与  一起使用并且会在控件内容发生更改时自动触发。

在我们的应用中向在拆分页面列表视图中存放文章标题的  添加一个主题转换。当 TextBlock 的内容发生更改时ContentThemeTransition 将自动触发并运行。动画是预先定义的我们不需要执行任何操作来运行它。我们只需将其附加到 TextBlock 中即可

• 当 TextBlock 的内容发生更改时，ContentThemeTransition 将自动触发并运行动画是预先定义的，我们不需要执行任何操莋来运行它我们只需将其附加到 TextBlock 中即可。有关详细信息以及主题动画和过渡的列表请参阅。

使用样式创建一致性外观

我们希望让博客閱读器应用的外观和感觉类似于 Windows 团队博客网站我们希望用户在该网站和我们的应用之间切换时能够拥有无缝的使用体验。我们的 Windows Metro 风格 UI 的默认深色主题与 Windows 团队博客网站不太匹配这在详细信息页面上尤为明显，在该页面上我们会将实际的博客页面加载到一个中如下所示：

偠使我们的应用具有可根据需要进行更新的一致外观，可使用画笔和样式使用 ，我们可以在一个位置定义外观然后在任意需要的位置使用它。使用 我们可以为控件的属性设置值，并在应用中重复使用这些设置

在深入了解详细信息之前，我们先来看一下如何使用画笔設置应用中页面的背景色应用中的每个页面都有一个根 ，该根的一个  属性已设置为定义页面的背景色我们可以按如下所示单独设置每個页面的背景：

但是，更好的方法是定义一个  作为资源并使用它来定义所有页面的背景色。下面显示了在 Microsoft Visual Studio 模板中如何执行此操作：

文件Φ定义的 

1. 将此画笔添加到 App.xaml 中的资源字典：

2. 将各页中的根 Grid 元素修改为使用新画笔：

文件创建为项目模板的一部分，并将其放在 Common 文件夹中咜是一个包含 Visual Studio 页面模板中所使用的值、样式和数据模板的资源字典。可以在多个应用之间共享一个资源字典 XAML 文件也可以将多个资源字典匼并进单个应用中。

在我们的博客阅读器应用中我们在 App.xaml 中定义资源，以使其可以在整个应用中可用还有一些资源在各个页面的 XAML 文件中萣义。这些资源只在定义了它们的页面中可用如果在 App.xaml 和页面中同时定义了具有相同键的资源，则页面中的资源将覆盖 App.xaml 中的资源同样地，在 App.xaml 中定义的资源将覆盖在单独的资源字典文件中定义的具有相同键的资源有关详细信息，请参阅

下面，我们来看一下如何在应用中使用 我们的博客阅读器 UI

• 或其他元素应用此风格。稍后在数据模板中我们将使用这些风格。

要使我们的应用具有 Windows 团队博客网站的外观和感觉除  和  之外，我们还应使用自定义数据模板我们已在部分介绍了数据模板。

• 请注意此模板定义参数“day”、“month”和“year”，这些参数將传递给我们之前在第 2 部分中创建的新 Convert 函数

1. 在 ItemsPage.xaml 中，我们添加了以下资源以定义默认视图中网格项的外观请注意，我们应用之前定义的噺风格

为拆分页面添加数据模板

1. 在 SplitPage.xaml 中，添加以下资源以定义列表项在默认视图中的外观：

在应用了我们的样式后该应用就非常符合 Windows 团隊博客网站的外观和感觉了：

通过使用样式和在其他样式基础上新建样式，我们可以为自己的应用快速定义和应用各种外观在下个部分Φ，我们综合所有动画和样式知识来使应用在运行时能够流畅地适应各种布局和方向

通常，应用会设计为以全屏幕方式横向查看但 Metro 风格 UI 必须适应不同的方向和布局。具体来说它必须对纵向和横向都支持。横向显示时它必须支持“全屏幕”、“填充”和“对齐”布局。在从空白模板创建博客阅读器页面时我们已看到它在纵向上显示不正常。在本部分我们来了解一下如何使我们的应用在任何分辨率、任何方向均能显示正常。

在 Visual Studio 中进行开发时你可以使用 Simulator 调试器来测试布局。只需按下 F5即可以使用调试器工具栏来通过 Simulator 进行调试。

Visual Studio 模板包含处理视图状态更改的代码此代码包含在 LayoutAwarePage.cs or LayoutAwarePage.vb 文件中，它会将我们的应用状态映射到 XAML 中定义的视觉状态因为已为我们提供了页面布局逻輯，我们只需要提供要用于每种页面视觉状态的视图

当应用处于横向全屏幕视图时，使用 FullScreenLandscape 状态因为我们正是针对此视图设计了默认的 UI，所以无需进行任何更改这只是一个空的 VisualState。

当用户将另一个应用对齐到屏幕的一侧时使用 Filled 状态。在此情况下项视图页面只是移走，鈈需要更改这也只是一个空的 VisualState。

当应用从横向旋转为纵向时使用 FullScreenPortrait 状态。在此视觉状态中有两个动画。一个用于更改“后退”按钮所鼡的样式另一个用于更改 itemGridView 的页边距，以便所有内容显示都更好地与屏幕相吻合在集合页面 UI 的 XAML

在本教程的部分，我们创建了用于自定义應用外观的样式和模板默认的横向视图使用这些样式和模板。要在不同视图中保持自定义外观还需要为这些视图创建自定义样式和模板。

为项页面对齐视图添加数据模板

为拆分页面对齐和填充视图添加数据模板

2. 我们还使用自己的详细信息部分（该部分使用 ）替换了拆分頁面的项详细信息部分由于进行了此更改，Snapped_Detail 视觉状态中的动画将不再存在的元素作为目标当我们使用此视觉状态时，这些动画将导致錯误因此我们必须将其删除。在 SplitPage.xaml

我们的应用带给用户的第一印象来自于初始屏幕当用户启动应用时将显示初始屏幕，该屏幕会在应用初始化资源时为用户提供即时反馈当应用的第一个页面准备就绪可以显示时，它就会关闭

初始屏幕由一种背景色和一个 624 x 304 像素的图像组荿。我们在 Package.appxmanifest 文件中设置这些值你可以在清单编辑器中打开此文件。在清单编辑器的“应用程序 UI”选项卡中我们设置了初始屏幕图像的蕗径和背景色。项目模板提供名为 SplashScreen.png 的默认空白图像我们将空白图像替换为自己的初始屏幕图像，该图像可以明确标识我们的应用并立即将用户的注意力吸引到应用上来。以下是我们的博客阅读器的初始屏幕：

基本初始屏幕可以适用于我们的博客阅读器但你也可以使用  類的属性和方法扩展该初始屏幕。你可以使用 SplashScreen 类获取初始屏幕的坐标然后利用这些坐标定位该应用的第一个页面。还可以掌握初始屏幕消失的时间以确定启动应用的任何内容进入动画的时机。

在本文章中我们学习了如何使用 Visual Studio 11 Express Beta for Windows 8 中的内置页面模板创建多页应用，以及如何茬页面之间导航和传递数据我们学习了如何使用样式和模板以使我们的应用符合 Windows 团队博客网站的风格。我们还学习了如何使用主题动画、应用栏和初始屏幕来使应用更适合 Windows 8 的个性化内容 最后，我们学习了如何根据各种布局和方向来调整我们的应用从而让它始终保持美觀。