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

在本文中

重要的 API

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

先决条件

什么是中心控件？

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

以下是使用 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>
时间： 2024-11-15 07:11:46

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

WP8.1学习系列(第二十三章)——到控件的数据绑定

在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Visual Basic 的 Windows 应用商店应用中将控件绑定到单个项或将列表控件绑定到项目集合.此外,本主题向你介绍了如何自定义控件项目的显示.如何基于所选内容实现详细信息视图,以及如何转换数据以进行显示.有关更多详细信息,请参阅使用 XAML 进行数据绑定. 路线图: 本主题与其他主题有何关联

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

Windows Phone 应用商店应用中的中心控件指南 在本文中 说明 示例 用法指南 设计指南 相关主题 重要的 API Hub (XAML) HubSection (XAML) 说明 中心控件(在手机上,仅适用于按纵向使用)显示一系列可以来回平移的区域.它是应用的全屏容器和导航模型. 中心(以前称为全景)体验是本机 Windows Phone 外观的一区域.与旨在适合手机屏幕边界的应用不同,中心应用通过使用超出屏幕边界的水平虚拟宽画布提供了一个查看控件.数据和服务的独特方式.在 Windo

WP8.1学习系列(第十二章)——全景控件Panorama开发指南

2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows Phone 外观的一部分.与旨在适合手机屏幕边界的标准应用不同,全景应用通过使用超出屏幕边界的长水平画布提供了一个查看控件.数据和服务的独特方式.这些固有的动态视图使用分层动画和内容,以便各层以不同的速度流畅地平移,类似于视差效果. 本主题包括以下部分. 全景控件概述 导航支持 全景应用功能 相关

WP8.1学习系列(第二十一章)——本地应用数据

了解如何存储和检索本地应用数据存储中的设置和文件. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual Basic 的 Windows 运行时应用的路线图 使用 C++ 的 Windows 运行时应用的路线图 获取应用的设置和文件容器 使用 ApplicationData.LocalSettings 属性可以获取 ApplicationDataContainer 对象中的设置.使用ApplicationData.LocalFolder 属性可以获取 StorageFold

WP8.1学习系列(第五章)——交互UX中心或透视控件

具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的方法,让用户在这些 UI 区域中导航.此类应用需要应用程序中心,用户可在其中启动到应用的每个子区域. 例如,请想象设计一个用于管理足球队的应用.此应用需要多个功能区域—一个用于比赛和练习的日历管理,一个用于球队花名册信息,一个用于得分和球员统计数据,另一个用于过往赛事的视频片段.你会希望提供一种方式

WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

“应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可能构成整个应用,或者还可用于应用的子区域.例如,你可以使用中心控件作为应用主要的第一层级(如之前主题所述),然后让用户从该控件导航到应用使用“应用选项卡”模式的子部分(使用透视控件). 想象你希望拥有一个将你家里收藏的电影分类的应用.你可以使用“应用选项卡”模式提供几个不同的电影筛选视图.你可能希望

WP8.1学习系列(第六章)——交互UX：具有面板部分的Hub

本主题中呈现的模型类似于适用于 Windows Phone 的具有主页菜单(中心或透视控件)的中心应用中描述的模型.正如之前的案例所示,你要向用户呈现不同的功能区域.此处的区别在于你可以在顶层呈现所有主要 UI,而无需主页菜单. 用于足球队管理的中心应用中心 UI 如果你的应用没有要导航到的子区域,则你的所有 UI 都可位于一组水平的可访问部分中.你仍可使用 中心控件,但在此案例中,你无需具有主页部分.Windows Phone 上的 People Hub 即属于这种情况.下图显示了中心的基本布

WP8.1学习系列(第四章)——交互UX

交互模式和指南 这部分包括三部分内容,分别是导航模式.命令模式和输入模式. 导航模式 虽然 Windows 导航模式提供了框架,但它提倡创新.激发你的创造力并在已建立的模式上构建. 命令模式 使用应用栏.超级按钮.菜单和页面内容,以使用户可以控制你的应用. 输入模式 了解用户可用于与应用交互的许多方式.深入了解如何设计良好的触摸交互. 导航模式 组织 Windows 或 Windows Phone 应用中的内容,以便用户可以轻松而直观地进行导航. 适用于 Windows 的导航模式 适用于 Wi

WP8.1学习系列(第十七章)——Windows Phone重要图形、视觉指示器和通知

美感在手机应用中是不可或缺的,它是直观操作的代名词.在 Windows Phone 中,你的磁贴.初始屏幕.图标.控件和导航的视觉元素会引起用户对应用程序内的相关任务.优先事项或操作的注意,并采用新颖的且引人注目的方式显示信息.你的应用将需要自定义设计的动态磁贴.动画图标以及初始屏幕图像(用于在用户加载应用时向其介绍应用).这些设计和其他视觉指示器是本部分的主题. 尽量少使用图形.请记住,使用可以引起视觉吸引力的内容和版式,并且始终不要使用纯天然修饰的视觉元素. 请记住,在移动平台上,简洁性是最