全景视图控件Hub

29-UWP开发-全景视图控件Hub

全景视图控件 Hub 是 Windows10 中一个独特的视图，给用户提供一种纵向拉伸延长的视图效果，提供了一种独特显示控件、数据和服务的方式。

语法

<Hub>
    ...
</Hub>Code language: HTML, XML (xml)

其实 Hub 和 Pivot 是同一类控件，都是使用页签的方式来组织页面，不过他们的交互效果却不大一样。

Hub 控件的三个部分：背景、背景标题、全景区域。背景是整个应用的最底层，背景会填满整个设备屏幕，通常是一张全景图。

练一练

本节代码：

<Hub>
    <Hub.Header>
        <StackPanel Orientation="Horizontal">
            <TextBlock>课程详情</TextBlock>
            <Image Source="Assets/LockScreenLogo.scale-200.png" Height="200"/>
        </StackPanel>
    </Hub.Header>
    <HubSection Header="HubSection 0">
        <DataTemplate>
            <StackPanel>
                <TextBlock>课程是说没事没事没事没事没事的范德萨</TextBlock>
            </StackPanel>
        </DataTemplate>
    </HubSection>
    <HubSection Header="HubSection 1">
        <DataTemplate>
            <StackPanel>
                <TextBlock>这里是更多的内容...</TextBlock>
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>Code language: HTML, XML (xml)