使用Windows8开发Metro风格应用六

我们紧接着上篇，开始我们的Metro风格应用开发。

-----------------------------------我是华丽的分割线-----------------------------------------

 21.添加应用栏
 
 　　a)博客阅读器应用中的部分导航都发生在用户在 UI 中选取项目时。但在拆分页面上，我们必须提供一种方法，让用户转到博客文章的详细信息视图。
 　　　　我们可以在页面的某个位置放置一个按钮，但这会影响核心应用体验，即阅读。我们转而将按钮放在应用栏中，只有当用户需要时才会显示应用栏。 
 　　　　应用栏是 UI 的一部分，默认情况下处于隐藏状态，当用户从屏幕边缘轻扫或与应用交互时，可以显示或隐藏屏幕栏。
 　　　　它可以向用户显示导航、命令和工具。应用栏可以显示在页面顶部、页面底部，也可同时显示在页面顶部和底部。
 　　　　我建议你将导航放在顶部应用栏中，将工具和命令放在底部应用栏中。
 
 　　b)要在 XAML 中添加应用栏，我们需要将一个 AppBar 控件指定给 Page 的 TopAppBar 或 BottomAppBar 属性。 
 　　　　我们将添加一个顶部应用栏，其中包含一个按钮可以导航到详细信息页面。StandardStyles.xaml 文件包含适用于常见场景的各种应用栏按钮样式。
 　　　　我们将使用这些样式作为创建按钮样式的指南。我们将样式放置在 SplitPage.xaml 的 Page.Resources 部分，
 　　　　代码如下:　　　　

    <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:

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 的动画,代码如下:

  <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 和其中的所有内容具有动画效果。
  　　代码如下:

    <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代码:

    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一起使用，并且会在控件内容发生更改时自动触发。
　　代码如下:

     <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/