我们紧接着上篇，开始我们的Metro风格应用开发。
-----------------------------------我是华丽的分割线-----------------------------------------
21.添加应用栏
a)博客阅读器应用中的部分导航都发生在用户在 UI 中选取项目时。但在拆分页面上，我们必须提供一种方法，让用户转到博客文章的详细信息视图。
我们可以在页面的某个位置放置一个按钮，但这会影响核心应用体验，即阅读。我们转而将按钮放在应用栏中，只有当用户需要时才会显示应用栏。
应用栏是 UI 的一部分，默认情况下处于隐藏状态，当用户从屏幕边缘轻扫或与应用交互时，可以显示或隐藏屏幕栏。
它可以向用户显示导航、命令和工具。应用栏可以显示在页面顶部、页面底部，也可同时显示在页面顶部和底部。
我建议你将导航放在顶部应用栏中，将工具和命令放在底部应用栏中。
b)要在 XAML 中添加应用栏，我们需要将一个 AppBar 控件指定给 Page 的 TopAppBar 或 BottomAppBar 属性。
我们将添加一个顶部应用栏，其中包含一个按钮可以导航到详细信息页面。StandardStyles.xaml 文件包含适用于常见场景的各种应用栏按钮样式。
我们将使用这些样式作为创建按钮样式的指南。我们将样式放置在 SplitPage.xaml 的 Page.Resources 部分，
代码如下:
View Code
<Page.Resources>
<!-- 此页所显示的项集合-->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"/>
<Style x:Key="WebViewAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="WebViewAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="View Web Page"/>
<Setter Property="Content" Value=""/>
</Style>
</Page.Resources>
<Page.TopAppBar>
<AppBar Padding="10,0,10,0">
<Grid>
<Button Click="ViewDetail_Click" HorizontalAlignment="Right"
Style="{StaticResource WebViewAppBarButtonStyle}"/>
</Grid>
</AppBar>
</Page.TopAppBar>
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
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
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
<Page.Resources>
<!-- 此页所显示的项集合-->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding}"/>
<Storyboard x:Name="PopInStoryboard">
<PopInThemeAnimation Storyboard.TargetName="contentViewBorder" FromHorizontalOffset="400"/>
</Storyboard>
</Page.Resources>
在代码隐藏页面中，我们在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
<Grid x:Name="itemDetailGrid" > <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextStyle}"> <TextBlock.Transitions> <TransitionCollection> <ContentThemeTransition/> </TransitionCollection> </TextBlock.Transitions> </TextBlock> <Border x:Name="contentViewBorder" BorderBrush="Gray" BorderThickness="2" Grid.Row="1" Margin="0,15,0,20"> <Grid> <WebView x:Name="contentView" /> <Rectangle x:Name="contentViewRect" /> </Grid> </Border> </Grid>
我们将ContentThemeTransition添加到TransitionCollection中，然后将后者设置为TextBlock的Transitions属性值。
当 TextBlock 的内容发生更改时， ContentThemeTransition将自动触发并运行。动画是预定义的，无需我们执行任何操作即可运行。
我们只需将其附加到TextBlock 中即可。
未完待续,敬请期待...
转载请注明出处：http://www.cnblogs.com/refactor/