Now you're Stylin’

The idea is to define colors and style templates in resource dictionaries that can be easily changed out to change the look and feel without touching the code.  Blend is a good tool for managing and modifying resource dictionaries.  It is the same ideas behind CSS


There are very few times when I make a color resource local page and even fewer when I will statically define a color.  Instead, I define my Resource Dictionary(s) when I first start a project and in the Dictionary(s), I immediately define all the colors that I plan to use (see image below).


I use generic names when naming my colors like color_1_dark, color_1_warm, color_1_light.
I group my colors by like colors or functional areas and use a naming convention that describes the idea behind the color.   In this case, I have used light, warm, dark so the person who is changing the resource dictionary has some idea of other schemes that would fit.  If I had areas that were segmented by color, I would prefix these names with that area, for example sales_color1_light or contact_header_color1_light. 

If I have specific company colors, those will be named appropriately so anyone who looks at the resource dictionary knows that these are company specific colors and should only be changed if that definition changes.

I will use a functional area if appropriate… for instance, below you see backgroundGradient.



If I need a shade of a color, I will use the base color I defined as a  resource and apply an opacity mask to change the color appropriately.  In other words, if I think it is appropriate to use just a lighter shade of color_4_Dark, I will bind color_4_Dark and apply an opacity mask to just tone it down a bit rather than define a whole new color.  Keep in mind that the goal is to be able to switch out the color underneath so if your opacity mask won’t work with any dark color, then make it a resource also.

For gradients, you can define the whole gradient as a resource as you see above for backgroundGradient or bind the Gradient points to Colors that you have already defined.


I have specifically shown colors in this example but this concept can apply to fonts or other elements if they are setup as a resource that can be changed to change look and feel.

Add Comment Filed Under [ Expression Blend ]


Comments are closed.
Comments have been closed on this topic.