×
Namespaces

Variants
Actions

Changing the Background and Foreground Colors of Application Bar in WP

From Nokia Developer 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
CompatibilityArticle
Created: sreerajvr (05 Apr 2012)
Last edited: hamishwillee (31 Jul 2013)

Contents

Introduction

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

Customised App bar

XAML

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>

C#

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);*/

Summary

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 04:33.
613 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×