Derik Whittaker

Syndication

News


Changing the Background and Foreground Colors for an Application Bar on WP7

One of the built in UI elements for WP7 is the Application Bar.  This is a bar that allows you to put buttons or menu items on in order to allow your user to interact with your application.  The major downside to the Application Bar is that it is not a ‘native’ XAML control.  This means it is not bindable and is not skinable w/ templates.  Which by the way SUCKS (I hope this changes at some point in the future).

However you are still able to change the Background and Foreground colors in order to spice up application.

Adding a value for Background and Foreground could not be simpler.  All you need to do is the following:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.75" ForegroundColor="#FF9D386E" BackgroundColor="#FF8B8888" >
        <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton>
        <shell:ApplicationBar.MenuItems>
              // menu go here
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

In the XAML above I have bolded three attributes of the ApplicationBar.  Opacity, Foreground and Background.  All you need to do is provide your colors (or opacity) to these attributes and your app bar will have a new style set to it.

One thing is I was NOT able to get a gradient to work in ANY capacity which sucks, but hopefully it will come in a future release.

Till next time,


Posted 08-31-2010 12:49 PM by Derik Whittaker
Filed under: ,

[Advertisement]

Comments

Brad wrote re: Changing the Background and Foreground Colors for an Application Bar on WP7
on 09-03-2010 10:53 AM

Very nice!  For most apps I like the consistency of the standard app bar but I could see some spicier apps deserving their own background color.

Alex Dresko wrote re: Changing the Background and Foreground Colors for an Application Bar on WP7
on 09-03-2010 11:54 AM

I LIKE how the application bar is not customizable. I want everything to be standard on my WP7. Anything less gets uninstalled pronto!

Derik Whittaker wrote re: Changing the Background and Foreground Colors for an Application Bar on WP7
on 09-06-2010 9:02 PM

@Alex,

I take it you like the black/white look as I do.  However in order for apps to stand out and to separate themselves from the pack they need to be able to customize the look of their app without damaging the native feel of the device.

Ben Duguid wrote re: Changing the Background and Foreground Colors for an Application Bar on WP7
on 09-14-2010 4:26 AM

Just to say that Charles Petzold on Hanselminutes 207 that pointed out that the "metro" aesthetic (the white on black) was there also as a power consideration:

"These phones that are using OLED technology [...] they don't use as mush power as conventional LEDs but only if the screen is very dark, if the screen is very light, they will use more power"

So those apps that "stand out" may well also stand out in other ways too, like draining the users battery ;)

www.hanselminutes.com/default.aspx

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)