|
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.
Let’s go through and
actually try to use what you’ve learned:
-
Create a new
Windows Phone project using Expression Blend.
-
In the Objects and
Timeline panel, expand LayoutRoot and select
your friendly neighborhood Grid called
ContentPanel:
[ select your ContentPanel Grid control ]
-
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.
-
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.
-
With the Fill
brush selected, click on the Color resources tab
and select PhoneAccentColor:
[ apply the PhoneAccentColor to the Fill brush ]
-
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 ]
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.
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.
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.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
Using the Accent Color - Page 2
