Using the Accent Color - Page 2
       by kirupa  |  27 July 2010

In the previous page you learned what the accent color is how to apply the color resource in your own applications that maps to the accent color the Windows Phone operating system exposes. In this page, let's take what you learned and go further by applying the accent color and previewing it all inside Expression Blend.

Simple Walkthrough
Let’s go through and actually try to use what you’ve learned:

  1. Create a new Windows Phone project using Expression Blend.

  2. In the Objects and Timeline panel, expand LayoutRoot and select your friendly neighborhood Grid called ContentPanel:

[ select your ContentPanel Grid control ]

  1. With ContentPanel selected, draw a small rectangle into ContentPanel:

[ draw a rectangle somewhere - anywhere! ]

You can do this by double clicking on the Rectangle tool from your toolbox or selecting the Rectangle tool and drawing out a neat rectangle.

  1. Make sure your newly created Rectangle is selected, and from the Brushes panel, select the Fill brush if it isn’t already selected for you.

  2. With the Fill brush selected, click on the Color resources tab and select PhoneAccentColor:

[ apply the PhoneAccentColor to the Fill brush ]

  1. When you apply the PhoneAccentColor to your rectangle’s Fill brush, notice that your rectangle’s background is now the same color as what your PhoneAccentColor is:

[ your PhoneAccentColor has now been applied ]

Previewing Accent Colors
In the previous sections, you learned how to set the accent color via the Color resources tab. Setting the color is only part of the fun. The other part is actually seeing it work. You could, as my video earlier showed, run your application in the emulator and change the Theme settings while your application is running.

While that approach is easy and it works, there is an even easier and possibly lazier way to preview your accent color. You can preview accent colors simply through the Device panel. Make sure your Device panel is displayed, and from the Theme row, select a color that you are interested in:

[ select a preview color from the Theme row in the Device panel ]

For example, I am going to select the Red color. Once I do that, for a brief moment, your artboard will go blank and redraw itself. When it reappears, notice that any elements whose color came from PhoneAccentColor resource will now be displayed in Red.
If you drew the rectangle earlier and set its Fill brush to the PhoneAccentColor resource, your rectangle will look like the following if you also selected the Red color to preview on:

[ a new PhoneAccentColor value has been applied ]

In fact, if you select any element on your artboard and click on the Color resources tab, you will notice that your PhoneAccentColor value shows up as Red:

[ notice that you see a new PhoneAccentColor under Color resources ]

This design-time preview of accent color is great for quickly ensuring that your application works well across any accent color a user may pick.

List of Accent Colors
For the last item on our menu, in case you are curious or need it for some programmatic vodoo, the following table lists all of the Windows Phone 7 accent colors and their values:

Preview Color Hex Value
Blue #1BA1E2
Brown #A05000
Green #339933
Lime #8CBF26
Magenta #FF0097
Orange #F09609
Pink #E671B8
Purple #A200FF
Red #E51400
Viridian #00ABA9
Custom ???

Everything seems pretty straightforward except for the last row. Device manufacturers will have the ability to customize the look of their phones by having their own custom accent color. They may or may not specify a custom color to go along with the 10 colors that the operating system provides by default, so be sure to remember that if you are doing anything in code that only expects 10 colors to be present. There may be 11 colors present instead.

Conclusion
The accent color is something that users will change and have a personal attachment to. You are more than free to create applications that do not listen to the accent color, but if you do decide to have the accent color reflected in your designs, this tutorial should help.


Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.

COMMENTS

 1 | 2




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.