HubSection UWP中的默认宽度

Question

我正在将一个Wp81应用程序移植到UWP，似乎Hub布局策略发生了变化，并且它不再调整HubSections宽度来将其拉伸（几乎）到屏幕的宽度。如何在没有在HubSections上设置绝对宽度的情况下在UWP中实现这一点？

关于我的用例的详细信息：在我的HubSection中，我有一个Image，它不是缩小到屏幕宽度（几乎 - 以便下一部分可见），它会延伸到其原始宽度。 TextBlock也是如此。似乎在UWP HubSection中没有根据屏幕宽度设置Width或MaxWith。

Answer 1

集线器的目的是允许用户发现内容。因此默认情况下，该部分不会拉伸到全屏。对于你的情况，你最好尝试使用Pivot控件。 Here是Pivot和Hub的设计指南。

此外，如果您仍想使用Hub并希望样式适应不同的屏幕大小，下面是VisualStateManager的简单解决方案：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Phone" >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="HeroImg.Width" Value="100" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Tablet" >
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="HeroImg.Width" Value="800" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Hub Header="News" >
        <HubSection  Header="Hero"  x:Name ="HeroImg" >
            <HubSection.Background>
                <ImageBrush   ImageSource="Assets/circle_hero.jpg" Stretch="UniformToFill"/>
            </HubSection.Background>
        </HubSection>

    </Hub>
</Grid>