Posts tagged Hub

When designing an app I wanted an appearance similar to the Bing MSN News app, as seen below:

So in a few blog posts I will describe how I recreated a similair look in my own apps. In this first part we will look at adding the background image of the first hub section. I am starting out on a new blank Windows Phone 8.1 Runtime app.

So the first step is to add a page with a Hub control, with the sections I want. Like the MSN News app, I am not setting the Header of the Hub control, as the status bar will be used for that instead:

<Hub>
    <HubSection>
    </HubSection>
    
    <HubSection Header="section two">
    </HubSection>
    
    <HubSection Header="section three">
    </HubSection>
    
    <HubSection Header="section four">
    </HubSection>
</Hub>

As you can see I also omit the Header on the first section. The next step is to add the image we want as hero image for the first section, so we set the background of the HubSection to the wanted image:

<HubSection>
    <HubSection.Background>
        <ImageBrush ImageSource="Assets/HeroImage.jpg" Opacity="0.75" Stretch="UniformToFill" />
    </HubSection.Background>
</HubSection>

But as seen in the screenshot below, the HubSection has an unwanted left margin:

To resolve this we have to edit the style of the HubSection, so add the following style on the page to remove the margin:

<Page.Resources>
    <ResourceDictionary>
        <Style x:Key="HubSectionHeroImage" TargetType="HubSection">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="HubSection">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RenderTransform>
                                <CompositeTransform x:Name="WrappingTransform"/>
                            </Grid.RenderTransform>
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Page.Resources>

This style sets the Margin of the ContentPresenter to the template bound value, and not a fixed left margin (which was the default). Finally set the style to the first hub section:

<HubSection Style="{StaticResource HubSectionHeroImage}">

This gives a hero image which is nicely aligned to the left of the screen:

What is left to do now is adding content on top of the hero image, set application title in the status bar, and style the headers of the other hub sections.