Posts tagged Hero Image

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:

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:

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 theApp.xaml.cs file. Firstly add a new function in App.xaml.cs:

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: