Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Changing the Background and Foreground Colors of Application Bar in WP

From Wiki
Jump to: navigation, search
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Tested with
Devices(s): Nokia Lumia 800
Created: sreerajvr (05 Apr 2012)
Last edited: hamishwillee (31 Jul 2013)



This article shows how to change the foreground and background colour, and opacity, of the Windows Phone Application Bar.

Customised App bar


The following XAML shows how to set the foreground and background colour and opacity of the application bar

  1. <phone:PhoneApplicationPage.ApplicationBar>
  2.     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.75" ForegroundColor="Green" BackgroundColor="Cyan" >
  3.         <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
  4.     <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
  5.     <shell:ApplicationBar.MenuItems>
  6.         <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
  7.         <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
  8.     </shell:ApplicationBar.MenuItems>
  9.     </shell:ApplicationBar>
  10. </phone:PhoneApplicationPage.ApplicationBar>


The same changes can be made in C# using the following code.

In the page constructor, after the call of InitializeComponent(), initialize a new ApplicationBar object.

ApplicationBar = new ApplicationBar();

Now set the AppBar properties :

/*This changes the opacity of the Application Bar. With "1" the bar is completely opaque, 
with "0.5" it's partially transparent, with "0" it's invisible*/

ApplicationBar.Opacity = 0.75;
/*This changes the BackGround color. If you want Default BG Color you can omit it*/
ApplicationBar.BackgroundColor = Color.FromArgb(120, 0,190,190);
/*This changes the ForeGround color (visualized on icon labels or menu text).
If you want Default FG color you can omit it*/

ApplicationBar.ForeGroundColor = Color.FromArgb(120, 0,140, 43);*/


You can provide your colours with changing the attributes Opacity, Foreground, Background in the XAML or C# code.

This page was last modified on 31 July 2013, at 01:33.
497 page views in the last 30 days.