Posts tagged UI

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.

After getting the hero image in place for the hub control (see part 1), the next step is to get a nice status bar to go along with it. This is also present as a red bar in the MSN News app for example. This status bar is then present throughout the app.

Because the status bar is present throughout the application I will in this example add the code to the App.xaml.cs file. Firstly add a new function in App.xaml.cs:

public static async void SetStatusBar(string text = "Lizard App")
{
#if WINDOWS_PHONE_APP
   var statusBar = StatusBar.GetForCurrentView();
   statusBar.BackgroundColor = (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color;
   statusBar.ForegroundColor = Colors.White;
   statusBar.BackgroundOpacity = 1;

   statusBar.ProgressIndicator.Text = text;
   statusBar.ProgressIndicator.ProgressValue = null;

   await statusBar.ProgressIndicator.ShowAsync();
#endif
}

As seen the function gets the status bar, sets the wanted color (users accent color as background and white as text color). As the status bar is not present in Windows 8 apps I make sure that the function only runs the code on Windows Phone. Now we just need to call the function, I do this from the function OnLaunched in App.xaml.cs, near line 100, see code snippet below:

         // When the navigation stack isn't restored navigate to the first page,
         // configuring the new page by passing required information as a navigation
         // parameter
         if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
         {
            throw new Exception("Failed to create initial page");
         }
         
         SetStatusBar();
      }

   // Ensure the current window is active
   Window.Current.Activate();
}

If you have a brand color you could use that as background color instead of using the users accent color. Here is an image of the result:

Status bar colored in Windows Store app.