WP8.1学习系列(第十一章)——中心控件Hub开发指南

在本文中

• 先决条件
• 什么是中心控件？
• 添加中心控件
• 将分区添加到中心
• 添加交互式分区头用于导航
• 将展示磁贴添加到中心
• 使用窄应用中的垂直中心
• 借助中心使用语义式缩放视图
• 摘要和后续步骤

重要的 API

• Hub
• HubSection
• SemanticZoom

使用 Hub 控件创建一个进入应用的入口页。Hub 控件在丰富的平移视图中显示内容，这样用户一眼就能看见新鲜有趣的内容，从而吸引他们深入了解你的应用中的更多内容。

先决条件

• 查看并了解 Windows 导航模式。
• 查看并了解中心控件指南。
• 我们假定你可以向使用 C++、C# 或 Visual Basic 的基本 Windows 应用商店应用中添加控件。要了解如何添加控件，请参阅快速入门：添加控件和处理事件。

什么是中心控件？

中心页面是用户进入应用的入口点。它们为用户提供了一种查看新鲜有趣的内容的引人注目的方式，从而吸引他们深入了解你的应用中的更多内容。中心显示不同的内容类别，每个类别映射到应用的分区页中。理想情况下，每个分区都显示内容或功能。中心则提供许多视觉变化、吸引用户，并将他们吸引到应用的各个部分。

以下是使用 Microsoft Visual Studio 中的基本中心模板的自然应用的示例。

可扩展应用程序标记语言 (XAML) Hub 控件提供框架帮助你为应用更轻松地实现中心设计模式。你可以使用任何 XAML 创建视觉丰富的中心页，因此你有自定义你的应用以贴合品牌的灵活性。与从单独源显示数据的 GridView或 ListView 控件不同，每个中心分区都可显示来自不同源的数据。

你可以用于创建中心页的元素是 Hub 控件、展示磁贴、HubSection 控件以及 Hub 和 HubSection 的头。

添加中心控件

Hub 控件通常占用整个页面，而且所有页面元素（例如头）都合并到 Hub 中。将头添加到 Hub 以让用户知道它的上下文。它通常是应用的名称。你可以使用简单文本头，或者定义使用任何 XAML 内容的 HeaderTemplate。头仍然固定在其原位置，不会随中心分区滚动。

添加中心控件

1. 有几种方法可将中心页添加到应用。
   • 使用"中心应用"模板开始新项目。

     若要开始快速创建带有中心页的新应用，请使用 Microsoft Visual Studio 2013 中的“中心应用”项目模板。（请参阅 C#、VB 和 C++ 项目模板。）

   • 使用“中心页”项目模板将中心页添加到现有项目。（请参阅 C#、VB 和 C++ 项目模板。）
   • 将 Hub 控件添加到现有页面。下一步显示 Page 中的 Hub 的 XAML。
2. 要添加简单的文本头，请将 Header 属性设置为字符串值。
   XAML

    

   <Page
       x:Name="pageRoot"
       x:Class="HubApp1.HubPage1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
   
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   
           <Hub Header="Field Guide">
   
               <!-- Hub sections -->
   
           </Hub>
       </Grid>
   </Page>
   

3. 要将其他 XAML 元素或样式包括在头中，请将 DataTemplate 分配到 HeaderTemplate 属性。此处，头中包括后退按钮。

   切记，虽然你可以在头中使用任意内容，但头的高度将影响中心分区内容中可用的垂直空间量。

   注意

   如果你将 Hub 控件添加到使用"基本页面"模板的页面，请将 Hub 添加到根 Grid。然后，将包含后退按钮和页面标题的 Grid 移动到 Hub.HeaderTemplate，如此处所示。

   XAML

    

   <Page
       x:Name="pageRoot"
       x:Class="HubApp1.HubPage1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
   
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   
           <Hub>
               <Hub.HeaderTemplate>
                   <DataTemplate>
                   <!-- Back button and page title -->
                       <Grid Margin="0,20,0,0">
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="80"/>
                               <ColumnDefinition Width="*"/>
                           </Grid.ColumnDefinitions>
                           <AppBarButton x:Name="backButton" Icon="Back" Margin="-30,-14,0,0"
   																																						Click="backButton_Click"/>
                           <TextBlock x:Name="pageTitle" Text="Field Guide" VerticalAlignment="Top"
                                      Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
                                      IsHitTestVisible="false" TextWrapping="NoWrap"/>
                       </Grid>
                   </DataTemplate>
               </Hub.HeaderTemplate>
   
               <!-- Hub sections -->
   
           </Hub>
       </Grid>
   </Page>
   

将分区添加到中心

将 Hub 的内容放在各种 HubSection 控件中。中心分区通常与应用的分区页对应。不要将内容直接添加到HubSection，而应在 DataTemplate 对象中定义 HubSection 的内容。任何有效 XAML 均可在中心分区的DataTemplate 中使用。

与 Hub 一样，HubSection 包含 Header 和 HeaderTemplate 属性，你可以使用这些属性为分区设置可选头。

将分区添加到中心

1. 你可以通过添加 DataTemplate 为你的 Hub 定义 XAML 中的 HubSection 内容，如下所示。
   XAML

    

   <Hub Header="Field Guide">
   
       <!-- Hub sections -->
       <HubSection Width="500" Header="Featured">
           <DataTemplate>
               <Grid>
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="*" />
                   </Grid.RowDefinitions>
                   <Image Stretch="Fill" Width="420" Height="280" Source="Assets/LightGray.png"/>
                   <TextBlock Style="{StaticResource SubheaderTextBlockStyle}"
                              Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
                              Text="Lorem ipsum dolor sit nonumy sed consectetuer ising elit, sed diam"/>
                   <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Margin="0,10,0,0"
                              Text="Description text:"/>
                   <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"
                              Text="Lorem ipsum dolor sit amet, consectetuer ising elit... "/>
               </Grid>
           </DataTemplate>
       </HubSection>
   
       <!-- More sections... -->
   
   </Hub>
   

2. 要将 DataTemplate 资源用作 HubSection 的内容，请将它分配到 ContentTemplate 属性，如下：ContentTemplate="{StaticResource FeaturedSectionTemplate}"。

   请参阅 ResourceDictionary 和 XAML 资源参考以获取有关使用 StaticResource 的详细信息。

   XAML

    

   <Page
       x:Name="pageRoot"
       x:Class="HubApp1.HubPage1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
   
       <Page.Resources>
           <DataTemplate x:Key="FeaturedSectionTemplate">
               <Grid>
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="*" />
                   </Grid.RowDefinitions>
                   <Image Stretch="Fill" Width="420" Height="280" Source="Assets/LightGray.png"/>
                   <TextBlock Style="{StaticResource SubheaderTextBlockStyle}"
                              Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
                              Text="Lorem ipsum dolor sit nonumy sed consectetuer ising elit, sed diam"/>
                   <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Margin="0,10,0,0"
                              Text="Description text:"/>
                   <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"
                              Text="Lorem ipsum dolor sit amet, consectetuer ising elit... "/>
               </Grid>
           </DataTemplate>
       </Page.Resources>
   
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
           <Hub Header="Field Guide">
               <!-- Hub sections -->
               <HubSection Width="500" Header="Featured" ContentTemplate="{StaticResource FeaturedSectionTemplate}"/>
   
               <!-- More Sections... -->
           </Hub>
       </Grid>
   </Page>
   

添加交互式分区头用于导航

还可以将分区头设置为交互式头。通常，用户可单击交互头转到相应的应用分区页面。当其 IsHeaderInteractive属性为 true 时，默认头包括 V 型字型，以及“悬停”和“按下”视觉状态。

将分区头设置为交互式头

1. 将 HubHeader.IsHeaderInteractive 属性设置为 true。
2. 为 Hub.SectionHeaderClick 事件添加事件处理程序。

   分区头没有单独的 Click 事件处理程序。Hub 中的每个交互式头在受到单击时引发 Hub 的SectionHeaderClick 事件。

3. 添加确定哪个头受到单击并为该头执行操作的代码。通常，添加用于导航到相应的分区页的代码。

   使用 HubSectionHeaderClickEventArgs 的 Section 属性确定哪个头受到单击。

此处，"特别推荐"中心分区的头为交互式头。

XAML

 

<Hub Header="Field Guide" SectionHeaderClick="Hub_SectionHeaderClick">
    <!-- Hub sections -->
    <HubSection x:Name="Featured" Width="500" Header="Featured" ContentTemplate="{StaticResource FeaturedSectionTemplate}" IsHeaderInteractive="True"/>

    <!-- More Sections... -->

</Hub>

当头受到单击时，使用 Name 属性确定哪个头受到单击，并导航到相应的分区页。

C#

 

private void Hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
{
    switch (e.Section.Name)
    {
        case "Featured":
            this.Frame.Navigate(typeof(FeaturedPage));
            break;
        case "Seasonal":
            this.Frame.Navigate(typeof(SeasonalPage));
            break;
        case "FloraAndFauna":
            this.Frame.Navigate(typeof(FloraAndFaunaPage));
            break;
        default:
            break;
    }
}

将展示磁贴添加到中心

你可以使用展示图像或内容以使第一个中心分区快速吸引用户的兴趣。展示磁贴通常有覆盖屏幕的整个高度（或宽度，如果 Orientation 为 Vertical）的背景图像。

添加展示磁贴

• 将 ImageBrush 用作第一个 HubSection 的 Background。

  对可水平和垂直裁剪而不丢失关注中心的展示磁贴使用大图像。你可以随意添加覆盖背景图像的内容。通常不要添加分区头，因为它会与 Hub 头冲突。

XAML

 

<Hub Header="Field Guide">

    <!-- Hero tile -->
    <HubSection Width="780" Margin="0,0,80,0">
        <HubSection.Background>
            <ImageBrush ImageSource="Assets/DarkGray.png" Stretch="UniformToFill"/>
        </HubSection.Background>
    </HubSection>

    <HubSection Width="500" Header="Featured">
        <!-- ... -->
    </HubSection>

    <!-- More sections... -->

</Hub>

使用窄应用中的垂直中心

在默认情况下，中心水平平移。如果应用支持窄视图，则可以使中心垂直平移，如下所示。

使用垂直平移的中心

• 在窄应用中，将 Orientation 属性设置为 Vertical。
  XAML

   

  <Hub Header="Field Guide" Orientation="Vertical">
  
      <!-- Hub sections -->
  
  </Hub>
  

借助中心使用语义式缩放视图

如果你在 Hub 中有许多分区，请考虑添加 SemanticZoom 控件以使用户更快速地在分区间导航。有关SemanticZoom 的详细信息，请参阅语义式缩放指南。

使用具有中心的语义式缩放

1. 将 Hub 添加为 SemanticZoom 控件的 ZoomedInView。
2. 将 ListView（或 GridView）添加为 SemanticZoom 控件的 ZoomedOutView。

   有关使用 SemanticZoom 控件的详细信息，请参阅快速入门：添加 SemanticZoom 控件。

3. 向 ListView 提供应用的合适的头。在以下示例中，使页面头成为可重新使用的资源并且在 Hub 和 ListView间共享它。

   由于页面头已合并到 Hub 控件中，它在用户将 SemanticZoom 更改为 ZoomedOutView 时将不可见。将头添加到 ZoomedOutView 的 ListView。

4. 将 ListView 的 ItemsSource 属性绑定到 Hub 的 SectionHeaders 属性，如下所示：ItemsSource="{Binding SectionHeaders, ElementName=FieldGuideHub}"。
5. 如果 HubSection.Header 未设置为字符串值（例如，如果你使用 HeaderTemplate），则将 x:Uid 指令设置为字符串资源，如下所示：<HubSection x:Uid="SeasonalSectionHeader" Width="520">。否则，ListView 将为该分区显示空白项。

   SeasonalSectionHeader 的值在 resources.resw 文件中定义。请参阅快速入门：使用字符串资源获取详细信息。

6. 要使分区头在 ListView 中显示，但不在 Hub 中显示，请设置 x:Uid 指令并定义空的HubSection.HeaderTemplate。
   XAML

    

   <!-- Hero tile -->
   <HubSection Width="780" Margin="0,0,80,0" x:Uid="HeroTileHeader">
       <HubSection.HeaderTemplate>
           <DataTemplate/>
       </HubSection.HeaderTemplate>
       <HubSection.Background>
           <ImageBrush ImageSource="Assets/DarkGray.png" Stretch="UniformToFill"/>
       </HubSection.Background>
   </HubSection>
   

以下是使用带有 Hub 的 SemanticZoom 控件的中心页和用于使用户快速导航到不同中心分区的 ListView。此 XAML 已经过简化以仅显示相关元素。例如，未显示 HubSection 内容。

XAML

 

<Page
    x:Name="pageRoot"
    x:Class="HubApp1.HubPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <x:String x:Key="AppName">Field Guide</x:String>

        <DataTemplate x:Key="PageHeaderTemplate">
            <!--Back button and page title-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
                    Margin="-1,-1,39,0"
                    VerticalAlignment="Top"
                    Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                    AutomationProperties.Name="Back"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"/>
                <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}"
                    Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
                    VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page.
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SemanticZoom>
            <SemanticZoom.ZoomedInView>
                <Hub x:Name="FieldGuideHub"  HeaderTemplate="{StaticResource PageHeaderTemplate}"
                     SectionHeaderClick="Hub_SectionHeaderClick">

                    <!-- Hero tile -->
                    <HubSection Width="780" Margin="0,0,80,0" x:Uid="HeroTileHeader">
                        <HubSection.HeaderTemplate>
                            <DataTemplate/>
                        </HubSection.HeaderTemplate>
                        <HubSection.Background>
                            <ImageBrush ImageSource="Assets/DarkGray.png" Stretch="UniformToFill"/>
                        </HubSection.Background>
                    </HubSection>

                    <!-- Hub sections -->
                    <HubSection Header="Featured" Width="500">
                        <!-- Hub content -->
                    </HubSection>
                    <HubSection x:Uid="SeasonalSectionHeader" Width="520">
                        <HubSection.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="Assets/StoreLogo.png"/>
                                    <TextBlock Text="Seasonal"/>
                                </StackPanel>
                            </DataTemplate>
                        </HubSection.HeaderTemplate>
                        <!-- Hub content -->
                    </HubSection>
                    <HubSection Header="Flora &amp; Fauna">
                        <!-- Hub content -->
                    </HubSection>
                    <HubSection Header="Video">
                        <!-- Hub content -->
                    </HubSection>

                    <!-- More sections... -->

                </Hub>
            </SemanticZoom.ZoomedInView>

            <SemanticZoom.ZoomedOutView>
                <ListView ItemsSource="{Binding SectionHeaders, ElementName=FieldGuideHub}"
                          HeaderTemplate="{StaticResource PageHeaderTemplate}"
                          Padding="40,60,40,0">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalAlignment" Value="Center"/>
                            <Setter Property="Margin" Value="0,20"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
    </Grid>
</Page>