Hub control

时间：2021-10-18 08:05:37
  • Hub（中心）

  • 中心页是用户进入应用的入口点。中心页在丰富的平移视图中显示内容，这样用户一眼就能看见新鲜有趣的内容，从而吸引他们深入了解你的应用中的更多内容。中心显示不同的内容类别，每个类别映射到应用的分区页中。每个部分都应该显示内容或功能。中心应该提供许多可以看到的变化，吸引用户，并将他们吸引到应用的各个部分。

    XAML Hub 控件提供元素帮助你为应用更轻松地实现中心设计模式。与从单独源显示数据的 GridView 或 ListView 控件不同，每个中心分区都可显示来自不同源的数据。任何 XAML 内容均可用于创建视觉效果丰富的中心页。若要开始快速创建带有 Hub 页的应用，请使用 Microsoft Visual Studio 2013 中的“中心应用”模板。

    将头文件添加到 Hub，让用户知道你的中心的内容。它通常是应用的名称。你可以使用简单文本 Header，也可以定义使用任何 XAML 内容的 HeaderTemplate。切记，虽然你可以在头中使用任意内容，但头的高度将会影响中心分区内容中可用的垂直空间量。头仍然固定在其原位置，不会随中心分区滚动。

    中心分区

    将中心的内容放在各种 HubSection 控件中。与中心一样，HubSection 包含 Header 和 HeaderTemplate 属性，你可以使用这些属性为分区设置可选头。还可以将分区的头设置为交互式头。通常，用户可点击交互头转到相应的应用分区页面。当其 IsHeaderInteractive 属性为 true 时，默认头包括 V 型字型，以及"悬停"和"按下"视觉状态。如果使用自定义 HeaderTemplate，请提供类似的视觉提示，表明该头为交互式头。

    不要将内容直接添加到中心分区，而应在 DataTemplate 对象中定义 HubSection 的内容。可以通过内联方式定义内容，也可以将内容绑定到数据源。任何有效 XAML 均可在中心分区中使用。

  • HubDemo.xaml 
    <Page
    
    x:Class="vs2013win8._1.AppBarDemo"
    
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    
    xmlns:local="using:vs2013win8._1"
    
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    mc:Ignorable="d">
    
    <Grid Background="Transparent">
    
        <Grid.ChildrenTransitions>
    
            <TransitionCollection>
    
                <EntranceThemeTransition/>
    
            </TransitionCollection>
    
        </Grid.ChildrenTransitions>
    
        <Hub DefaultSectionIndex="1" SectionHeaderClick="Hub_SectionHeaderClick">
    
            <Hub.Header>
    
                <!--
    
                    后退按钮和页标题
    
                -->
    
                <Grid>
    
                    <Grid.ColumnDefinitions>
    
                        <ColumnDefinition Width="80"/>
    
                        <ColumnDefinition Width="*"/>
    
                    </Grid.ColumnDefinitions>
    
                    <Button  x:Name="backButton" Margin="-1,-1,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
    
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
    
                        VerticalAlignment="Top"
    
                        AutomationProperties.Name="Back"
    
                        AutomationProperties.AutomationId="BackButton"
    
                        AutomationProperties.ItemType="Navigation Button"/>
    
                    <TextBlock x:Name="pageTitle" Text="Title" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
    
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
    
                </Grid>
    
            </Hub.Header>

            <!--hub 的第 1 个 section-->
    
            <HubSection Width="780" Margin="0,0,80,0">
    
                <HubSection.Background>
    
                    <ImageBrush Stretch="UniformToFill" ImageSource="/Assets/login.jpg" />
    
                </HubSection.Background>
    
            </HubSection>

            <!--hub 的第 2 个 section-->
    
            <HubSection Width="500" Header="Section 2" Name="s2" IsHeaderInteractive="True">
    
                <DataTemplate>
    
                    <Grid>
    
                        <Grid.RowDefinitions>
    
                            <RowDefinition Height="Auto" />
    
                            <RowDefinition Height="Auto" />
    
                            <RowDefinition Height="Auto" />
    
                            <RowDefinition Height="*" />
    
                        </Grid.RowDefinitions>
    
                        <Image Stretch="Fill" Width="420" Height="280"/>
    
                        <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, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. "/>
    
                    </Grid>
    
                </DataTemplate>
    
            </HubSection>

            <!--hub 的第 3 个 section-->
    
            <HubSection Width="520" Header="Section 3" Name="s3" IsHeaderInteractive="True">
    
                <DataTemplate>
    
                    <Grid>
    
                        <Grid.RowDefinitions>
    
                            <RowDefinition Height="Auto" />
    
                            <RowDefinition Height="Auto" />
    
                            <RowDefinition Height="Auto" />
    
                            <RowDefinition Height="*" />
    
                        </Grid.RowDefinitions>
    
                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Margin="0,0,0,10"
    
                                   Text="Item Title" />
    
                        <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1"
    
                                   Text="Quisque in porta lorem dolor amet sed consectetuer ising elit, sed diam non my nibh uis mod wisi quip."/>
    
                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Grid.Row="2" Margin="0,20,0,0"
    
                                   Text="Item Sub Title"/>
    
                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"
    
                                   Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper."/>
    
                    </Grid>
    
                </DataTemplate>
    
            </HubSection>

        </Hub>

    </Grid>

</Page>
     private async void Hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
    
        {
    
            switch (e.Section.Name)
    
            {
    
                case "s2":
    
                    await new MessageDialog("点击了 Section 2", "提示").ShowAsync();
    
                    break;
    
                case "s3":
    
                    await new MessageDialog("点击了 Section 3", "提示").ShowAsync();
    
                    break;
    
                default:
    
                    break;
    
            }
    
        }

相关文章