UWP 中的 HubSection 默认宽度

Question

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

关于我的用例的详细信息：在我的 HubSection 中，我有一个图像，它没有缩小到屏幕宽度（几乎-以便下一部分可见），而是拉伸到其原始宽度。 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>

UWP 中的 HubSection 默认宽度

HubSection default width in UWP

xaml

windows-10-mobile

uwp