Search code examples
xamluwpwindows-10-mobile

HubSection default width in UWP

I'm porting a Wp81 app to UWP, and it seems that the Hub layout strategy changed and it's no longer adapting HubSections width to stretch it (almost) to the width of the screen. How can I achieve that in UWP without setting absolute width on HubSections?

Details about my use case: In my HubSection, I have an Image, that instead of being shrunk to screen width (almost - so that the next section is visible) it stretches to its native width. The same happens with TextBlock. It seems that in UWP HubSection doesn't have Width or MaxWith set according to screen width.

Solution

  • The purpose of a hub is to allow the user to discover stuff. So the section is not stretched to full screen by default. For you case, you'd better try with Pivot control. Here is a design guideline for Pivot and Hub.

    Besides, if you still want to use Hub and want the style to adapt to different screen size, below is a simple solution by 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>