我们紧接着上篇，开始我们的Metro风格应用开发。
-----------------------------------我是华丽的分割线-----------------------------------------
21.添加应用栏
a)博客阅读器应用中的部分导航都发生在用户在 UI 中选取项目时。但在拆分页面上，我们必须提供一种方法，让用户转到博客文章的详细信息视图。 我们可以在页面的某个位置放置一个按钮，但这会影响核心应用体验，即阅读。我们转而将按钮放在应用栏中，只有当用户需要时才会显示应用栏。 应用栏是 UI 的一部分，默认情况下处于隐藏状态，当用户从屏幕边缘轻扫或与应用交互时，可以显示或隐藏屏幕栏。 它可以向用户显示导航、命令和工具。应用栏可以显示在页面顶部、页面底部，也可同时显示在页面顶部和底部。 我建议你将导航放在顶部应用栏中，将工具和命令放在底部应用栏中。 b)要在 XAML 中添加应用栏，我们需要将一个 AppBar 控件指定给 Page 的 TopAppBar 或 BottomAppBar 属性。 我们将添加一个顶部应用栏，其中包含一个按钮可以导航到详细信息页面。StandardStyles.xaml 文件包含适用于常见场景的各种应用栏按钮样式。 我们将使用这些样式作为创建按钮样式的指南。我们将样式放置在 SplitPage.xaml 的 Page.Resources 部分， 代码如下:
View Code c)通过设置 IsSticky 和 IsOpen 属性可以控制应用栏显示和消失的方式和时间。
还可以通过处理 Opened 和 Closed 事件响应打开或隐藏的应用栏。 为处理详细信息页面的导航，我们修改SplitPage.xaml.cs: View Code private void ViewDetail_Click(object sender, RoutedEventArgs e) { FeedItem selectedItem = this.itemListView.SelectedItem as FeedItem; if (selectedItem != null && this.Frame != null) { this.Frame.Navigate(typeof(DetailPage), selectedItem); } } d)看效果:
点击红色区域,将显示详细页面:
22.添加动画和过渡
a)在 XAML 中，动画基本上只是一种更改对象的属性值的一种方法。在我们的博客阅读器应用中，我们使用动画使 UI 适用于不同的布局和方向。 我们将在下一部分对此进行深入探讨，但首先，我们需要了解动画的工作方式。 要使用动画，我们需要将它放在一个Storyboard中。当 Storyboard 运行时，属性会按照动画规定发生变化。 Storyboard 中可以包含一个或多个动画。每个动画会指定一个目标对象、该对象上要更改的属性，以及该属性的新值。 在我们的博客阅读器应用中，我们有一个名为 itemListView 的 ListView。 以下是一个当 Storyboard 运行时将 itemListView 的 Visibility 属性更改为 Visible 的动画,代码如下: View Code b)添加主题动画
Windows 8 使用动画和过渡来改进用户的 UI 体验。我们想在应用中具有相同的体验，以符合 Windows 8 的风格。 所幸的是，我们可以在应用中使用内置的主题动画和主题过渡，以与 Windows 8 中的主题动画和主题过渡相匹配。 我们可以在 Windows.UI.Xaml.Media.Animation 命名空间中找到它们。 主题动画是一个预定义的动画，我们可以将其放在一个 Storyboard 中。 PopInThemeAnimation 在页面加载时使 Web 视图从右到左滑入。增加 FromHorizontalOffset 属性的值会使效果更好。 在此，我们将 PopInThemeAnimation 放入 Storyboard，并使其成为 DetailPage.xaml 中的资源。 因为返回按钮和标题在各个页面中均位于相同的位置，我们并不需要将它们弹入， 所以我们将动画的目标设置为围绕在我们的 Web 内容周围的 Border。这样便会使 Border 和其中的所有内容具有动画效果。 代码如下: View Code 在代码隐藏页面中，我们在OnNavigatedTo方法中启动 Storyboard，这样当用户导航到详细信息页面时便可将弹入动画应用于 Border。
以下是更新后的 OnNavigatedTo代码: View Code protected override void OnNavigatedTo(NavigationEventArgs e) { Storyboard sb = this.FindName("PopInStoryboard") as Storyboard; if (sb!=null) { sb.Begin(); } // Add this code to navigate the web view to the selected blog post. FeedItem feedItem = e.Parameter as FeedItem; if (feedItem != null) { this.contentView.Navigate(feedItem.Link); this.DataContext = feedItem; } } 效果是: 蓝色的Border,从左向右移动,最终显示.
c)要使用主题动画，我们仍然必须将其放入某个Storyboard中，然后在发生特定事件时对该Storyboard进行控制。
有时，我们可以改用主题过渡来为 UI 元素设置动画。主题过渡是一个完整的动画集， 还是一个可以附加到 UI 元素的预封装行为的 Storyboard。此处， 我们使用一个 ContentThemeTransition 来为 SplitPage.xaml 中的博客文章标题文本设置动画。 ContentThemeTransition与ContentControl一起使用，并且会在控件内容发生更改时自动触发。 代码如下: View Code 我们将ContentThemeTransition添加到TransitionCollection中，然后将后者设置为TextBlock的Transitions属性值。
当 TextBlock 的内容发生更改时， ContentThemeTransition将自动触发并运行。动画是预定义的，无需我们执行任何操作即可运行。 我们只需将其附加到TextBlock 中即可。未完待续,敬请期待...
转载请注明出处：http://www.cnblogs.com/refactor/