Using WP7 accent color effectively

11 03 2011

All Windows Phone 7 devices ship with ten different accent colors (mine’s orange of course). I’d like to show a few good ways to use this in XAML and runtime-code to get better looking apps.

accentcolors

Click below to read more…

Why use accent colors?

Accent colors are a nice way to alternate colors in an application with a lot of text. One could argue that using a theme of your own is just as effective, if not more, since you get to control all colors. I however think that users appreciate their theme bleeding through into their applications. Also, each of the standard accent colors are very effective on a black background. Let’s look at some examples from the project I’m working on ATM. (Some parts of the image are scrambled/changed in order to withhold our customer’s identity).

chat_edit

Above you can see how I’ve used accent colors in two different ways. Both to indicate which chat-mode is active (Everyone), and to indicate when a new message begins by coloring the sender’s name. This is a very rudimentary way of creating chat messages, but since I’m using accent colors, this will look different to each user.

image

image

 

If you’re developing a game, you could use the accent color on power-ups or the user interface to make a more personalized game experience. FPS games could color mini-maps, weapon displays etc while platformer games could color point-orbs or charge-effects.

Samus is obviously using the Pink accent color

 

 

image

Another good place to use accent colors are on loading animations.

 

Sounds good. How do I do it?

You can apply accent colors in three main ways. Either via XAML markup, code-behind (runtime) application or through Expression Blend (sidenote: if you’re not using Blend, shame on you. Go download it right away).

In XAML, you use the following (to apply as a foreground brush):

Foreground="{StaticResource PhoneAccentBrush}"

At runtime/codebehing you use the following (to apply to a button’s border):

Button.BorderBrush = Application.Current.Resources["PhoneAccentBrush"] as SolidColorBrush;

And finally, in Blend, you look for this:

image

 

That’s it! Have fun!

Advertisements

Actions

Information

3 responses

17 03 2011
Linksammlung WP7–17/3/2011 | Silverlight, WPF & .NET

[…] Using WP7 accent color effectively […]

3 06 2013
http://www.raptorblog.altervista.org/

Good web site you have got here.. It’s hard to find quality writing like yours these days. I truly appreciate people like you! Take care!!

24 08 2014
vacation home remember

Excellent way of telling, and pleasant article to get data concerning my presentation subject, which i am going to deliver in academy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: