使用Windows8开发Metro风格应用六

晨曦之光 发布于 2012/06/07 10:14
阅读 228
收藏 0

我们紧接着上篇,开始我们的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= " &#xE12B; "/> </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/


原文链接:http://www.cnblogs.com/refactor/archive/2012/06/07/2535144.html
加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部