How to Create a Silverlight Color Resource in a ResourceDictionary
Some have complained that page 33 of my book, Foundation Blend 3 with Silverlight tells how to make a Color Resource in a Resource Dictionary. However, because of reasons that are not completely clear to me what I show is not possible to do in Blend for a Silverlight application. For that reason I have written a short tutorial on how to do just that. You can read it below with no images or download the Word version here: http://tinyurl.com/y9zcp5k
NOTE: The Word version has the images.
Create the Rectangle
1. From the toolbar select the Rectangle tool and draw a Rectangle on the Artboard like I have done in Figure 1.
Figure 1. Draw a Rectangle
2. On the Properties panel select Gradient Brush for the Fill property like I am about to do in Figure 2.
Figure 2. Give the Rectangle a Gradient Fill.
Creating the Color Resource
1. Leave the default Black to White Gradient and click advanced icon next to the Fill property (it looks like a little white square (see Figure 3).
Figure 3. Click the advanced icon next to the Fill property.
2. In the Advanced menu click Convert to New Resource.
3. When the Create Color Resource dialog box appears give the Resource a Name of BlackToWhiteGradient (don’t hit OK yet) like I am doing in Figure 4.
Figure 4. Name the new resource BlackToWhiteGradient.
4. Now click the New ResourceDictionary button like am doing in Figure 5.
Figure 5. Click the New button.
5. When the New Item dialog appears make sure that Resource Dictionary is selected . Leave the default name and click OK like I am doing in Figure 6.
Figure 6. The New Item dialog box.
7. Once you click OK you will again see the Create Color Resource dialog box but now the Resource Dictionary option is enabled and Checked. You can now Click OK to create the new ResourceDictionary and add the BlackToWhite color resource to it like I am doing in Figure 7.
Figure 7. You now can click OK to create a new ResourceDictionary with the BlackToWhiteGradient in it.
Using the new BlackToWhite Color Resource
Now that you have made a new Color Resource in a new ResourceDictionary it is time to show you how to make use of it. Let’s do that now.
- Select the Rectangle on the toolbar
- Draw a new Rectangle out on the Artboard.
- Your new Rectangle might have a default black and white gradient because it was the last color we used. So to change it select the Fill property for the new Rectangle and click Solid color brush like I am doing in Figure 8.
Figure 8. Change the new Rectangle’s Fill to a Solid Color Brush.
4. Now to change the Fill to the Resource click the Advanced icon next to the Fill Property
5. Click Local Resource > BlackToWhiteGradient like I am doing in Figure 9.
Figure 9. Used the Advanced icon to change the fill to use the BlackToWhiteGradient color resource from the ResourceDictionary that we created earlier.
In this short exercise we created a Rectangle with a black/white gradient Fill. We then turned that Fill into a Color Resource inside of a ResourceDictionary that we created. We then created a new Rectangle and reset the Fill to a Solid Color Brush. Finally we set the Fill of the new Rectangle to the BlackToWhiteGradient we created earlier.