Exercise 3: Creating and Using Resources

Task 1 – Creating a Resource from the Background Property of a Button

1. For this exercise, you can continue to use the solution from Exercise 2 or open the begin solution located at\Ex03-CreatedAndUsingResources\begin\(Choosing the folder that matches the language of your preference.) You will need to build the solution (click Build | Build Solution) before the designer will show the WPF work we did in Exercise 2.
2. Open Window1.xaml and select the forwardButton created in Exercise 2.

3. In the Properties window, use the Search tool to find the Background property.

   Figure 19

   Setting Background Property

4. Click the Background property and the Brush editor will appear. Click the eyedropper tool and select a color from anywhere on your screen. You will see the background of the button has changed.

5. Now click the black square next to background label in the property browser to pick the “Extract to Resource” option.

   Figure 20

   Extract Value to Resource

6. Click OK in the Create Resource dialogue, accepting the default values. This window lets you extract the property’s value into a resource that you can re-use. In this case, the resource will be created in Window1.xaml.

7. Look in the XAML code editor and you’ll find a SolidColorBrush element inside the Window.Resources node.

   XAML

   <Window.Resources> <!-- Additional Resources Omitted --> <SolidColorBrush x:Key="LightOrangeBrushKey">#FFFFF0D0</SolidColorBrush> </Window.Resources>

Task 2 – Using the Resource to Update Background Property of Another Button

1. Select the backButton and locate the Background property in the properties windows.

2. Click the black square in the properties window next to the Background property label and select Apply Resource.

   Figure 21

   Apply Resource

3. Select the resource from the Local expander.

   Figure 22

   Apply Resource

4. The forwardButton and backButton now share the same resource, defining the Background.

Next Step

Summary