Posts tagged Status Bar

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")
   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();

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");

   // Ensure the current window is active

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.