Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you are a programmer, you know how to reuse items. You create variables, reusable functions, code modules, or even place code in external DLLs. It's a core ideal of programming: reuse and refactor. Silverlight XAML has an option for defining reusable resources too. It's known as a XAML resource. What this means is that you can instantiate .NET types or other items within your XAML and refer to them elsewhere in your XAML or application code. Resources are stored in a special key value dictionary known as the ResourceDictionary.
Any .NET type with a parameter list constructor can be added to a ResourceDictionary. Since the ResourceDictionary is a key value dictionary, every item added to the dictionary must have a unique key value. Here are a list of some of the common items I've seen in resource dictionaries: custom brushes, styles and templates, a list of color attributes, even custom value converters. Nearly all Silverlight elements derive from the FrameworkElement class. For convenience sake, Microsoft added a Resources property to the FrameworkElement class.
Do you want to guess what the type of the resources property is? Yes, it's a ResourceDictionary. This provides a convenient way of adding items to the ResourceDictionary within your XAML. I'm inside Visual Studio, in a project called UsingXamlResources. I'm going to start by looking at some XAML in this AddResource.xaml file. I have two elements that can have resources in this file: UserControl and Grid. Let me show you how to add a resource section to the user control.
That's all it takes. Now, within these two tags, I can declare any reusable resource. For instance, I want to have SolidColorBrush. Then I give it a Key because it's inside of ResourceDictionary. Now, I have one resource available. The Grid also has a Resources section, because it's a framework element. Now, I can add items at this level. I like to use Expression Blend to create my resources.
I will show you how. I'm in Blend and I have opened this AddResourceInBlend.xaml file. I'm going to drag a rectangle over to my artboard, and then I'm going to create a Gradient Brush. I do that by coming over to my Fill property, selecting Gradient Brush, and then adding some colors. Here is my custom brush. Now I am ready to turn this into a resource. In Expression Blend, I can click on this white property peg and then choose Convert to New Resource.
Since this is going in a ResourceDictionary, I have to provide a key. And I have to choose the scope of this resource: at the application level, in this document level, and elsewhere. In this document, I can create it at the UserControl level or at the Rectangle level. I'm going to leave the items at the default and then click OK. I'll clear out my brush, and I will add a second resource. Gradient Brush. This time I will do a Radial gradient, and now I'm ready to save this one. And done.
If you look at the XAML, you'll see at the top of my UserControl, a Resources section, and here's my WaterBrush. Now that you have seen how to create a resource, it's time to just go over how to use the Resource in your XAML. The simplest way to access the Resource in your XAML is through the StaticResource Markup Extension. The curly braces in the property attribute signify that you are calling the Markup Extension. Here in the screenshot is an example. On the button, I'm setting the Background property to a StaticResource called RedBrush.
And in the TextBlock, I'm setting the Foreground property to the same resource. Resources can be stored in any framework element in your visual tree. They can go in an element, they can go into any of the parents of that element, they can be at the user control level or at the application level. They can also be in an external file called a Merge Dictionary. Silverlight uses a simple search algorithm to find the specified resource. Using the key provided, Silverlight attempts to find a matching resource, and it does that by walking the object tree.
It starts at the element where the resource is requested and walks the object tree trying to find the match. The first match that it finds as it walks through the tree is the one that is used. Here is an example. I have two buttons in an application on separate pages. In this orange button, if I specify that I want to use the default brush, it will look to see if there is a default brush defined at this button level. If not, then it will look in the grid, then the page and then the application and then in any ResourceDictionaries. This blue button will do the same, only it is walking a different tree.
If I specify a resource at the application level, both buttons could use it. I'm back in Expression Blend, and I'm going to use the Resources now. I will start by creating an ellipse, and deleting my rectangle, and then replacing the current brush that's in this ellipse with a Null brush. This pane, by clicking on this button, shows me all the available brush resources that are in scope at this ellipse level. You can see my FireBrush and you can see my WaterBrush.
When I click on the XAML and scroll down to the element, you can see that the Fill value is coming from a StaticResource Markup Extension. There will be times when you need to programmatically access the resources. I've returned to Visual Studio to show you how that's done. I'm going to open this UseResource file. Let's start by looking at my XAML. I have a RadialGradientBrush with a key value of OrbitBrush. And I also have a LinearGradientBrush with a key value of WaterBrush, plus a Named value.
I will first start by showing you how to get the resource by Key. Since I know it's in a Resource Dictionary, and I know what's at the user control level, I can go to the Resources property, provide the key, check to see if I'm getting a null value back or not, and if I'm getting a non-null value, I can pull that piece of information out and cast to the correct type and then apply it to this property. Now, this works if I know the element that contains the resources. If I don't know the element that contains the resources, I can't programmatically walk the tree unless I do a little recursion.
So here I have a function that does that for you. It's called TryFindResource. Now, my code is greatly simplified if I have a named resource. Then all I need to do is use the name and assign it like any other normal assignment. Now you've seen how to add brushes to the Resource Dictionary. In the next movie, you will see how to add styles to your resources.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97283 Viewers
61 Video lessons · 84555 Viewers
71 Video lessons · 68756 Viewers
56 Video lessons · 101245 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.