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.
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).
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.
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
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):
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:
That’s it! Have fun!