It is important to keep a consistent style, when it comes to the visual appearance of your application. Similarly to what you do when you theme a website using CSS, Silverlight provides you with Resources to manage colors, brushes, and many other visual styles consistently across the application.
Another practical use is when it comes to signalling status using visual clues. For example: signal error with a red dot and a text, signal a confirmation message with a green dot and the message, etc. You should of course never rely on color alone to communicate information (remember 10% of the male population is color blind!) but this does improve readability.This small tutorial uses Blend, but the same can be easily accomplished by typing XAML directly. We will create a Brush resource and use it in XAML and in code.
Where to put your resource
You have several options. I usually put resources that are meaningful to a single control inside the control itself, while I put resources that are valid and used throughout the application in a separate file.
If you create the Resource in the control, you will have the following structure:
<UserControl ...>
<UserControl.Resources ...>
Your resources go here
</UserControl.Resources>
On the other hand, if you want to put your resources in a separate file, you should create a new xaml file (I usually create them in the Assets directory). In Expression Blend, right click on the directory and create a new Resource Dictionary.The entire file will contain just this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib"> Your resources go here </ResourceDictionary>
In this case, remember to link the files in App.xaml, like this:
<Application ...>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Assets/YourNewDict.xaml"/>
...
</Application>
Create a new resource
Solid color brushes are the most basic things you can create, followed by gradient brushes. But they are the most useful :) To create one, open the appropriate XAML file (see previous point) and type:<SolidColorBrush x:Key="your_brush_name" Color="#FFFBFFD8"/>If you are in blend, you can now go to the control, click on an object which has a background property, click on this property, and from the brushes editor select the last tab ("Resource brushes"). The brush you just created is available there. It is useful because you can edit it from these (click on the color swatch left to the resource name) and you will be editing the original resource.
You can also create a resource the other way around. First fill the object the way you want it, then click the little square next to the property name and select Convert into a new resource from the menu.
Set the background property from code using a resource
From code there is nothing easier than to set the color brush of an element.
If you are using a resource local to the control, it goes like this:this.bugDot.Fill = Resources["ConnectedGradientBrush"] as GradientBrush;You are referring to the local resource dictionary of the control. If you are not in the control code, you should get a reference to it and use the control.Resources dictionary.
If you are using a global file, you can refer to it using the Application.Current.Resources dictionary.
