Wednesday, 20 February 2013

How do you add a XAML resource dictionary to your project in Visual Studio?

This another in a brand new series of videos that I am producing for my new YouTube channel HowDoYouDoStuff.

A channel dedicated to short videos on how to do stuff.
In this video, I am going to show you how simple it is to add a XAML resource dictionary to your project in Visual Studio.
You can read the transcript below.

HTML5 player



In this video, I am going to show you how simple it is to add a XAML resource dictionary to your project in Visual Studio.

This is Visual Studio 2012 but the process is exactly the same for Visual Studio 2010. 

Now I have a WPF project open here in Visual Studio but it could just as well be a Silverlight, Windows Phone or Windows Store project. The procedure here will be the same.

A Resource Dictionary is a XAML file containing resources such as brushes, styles and so on. All of these frameworks use XAML resources.

I have a Resource Dictionary that we can use. In fact I created it in my previous video by converting it from an Adobe Illustrator (ai) file using Expression Design.


It is called Bike.xaml. If I just edit it in Notepad, you will see that it holds a ResourceDictionary that contains a DrawingBrush.

Unfortunately, it has a poor key value of Layer_2. This is the name assigned to it by Expression Design when it imported the Adobe Illustrator file.

It can and probably should be updated before we try and use it.

The DrawingBrush actually contains a GeometryDrawing which is of a bike.

OK. Let me switch to Visual Studio in order to add this Resource Dictionary.

As with any other asset that you wish to add to a project, you right click on the project in the Solution Explorer  and select Add Existing Item.

You then locate the required file. By default, the dialog doesn't consider XAML files so I need to select the appropriate file type.  Once I have selected my file, I can then click the Add button.

As you can see, Visual Studio has added my Resource Dictionary to the project. Let me open it up to show you.

Here you can see the ResourceDictionary element containing a DrawingBrush with a key of Layer_2.

Now this key was generated by Expression Design when I converted an Adobe Illustrator file in an earlier video.

Let me change the key to something better like Bike.

Now, simply adding the Resource Dictionary to the project isn't enough.

You must reference it in your app.xaml file. Or the application.xaml file if you code in VB.NET.

Let me open this file to take a look.

I need to add some code to the Application.Resources element to reference the XAML file that I just added to the project.

I'll just paste in some code that I prepared earlier to save some time.

My code contains a ResourceDictionary section which itself contains a ResourceDictionary.MergedDictionaries section which in turn contains another ResourceDictionary element. This one references my file with its Source property.

It is this line of code that makes the resources contained in the file available to the entire app.

It is worth noting at this point that I have recorded this exact same demo but using Expression Blend instead of Visual Studio. In Expression Blend, this code in app.xaml is added automatically for you when you add a Resource Dictionary to your project.

In this regard, Visual Studio is less helpful.


And that's it.

I have successfully added a Resource Dictionary to my project.

But that doesn't make for such a good demo unless I can actually demonstrate my resources in action.

I really need to show that brush in action.

Let me open my MainWindow file and add a couple of controls such as a Rectangle and an Ellipse.

Now then, I'll select my Rectangle and head over to the Properties window to view the brush properties.

There are different brush types available including SolidColorBrush, LinearGradientBrush and RadialGradientBrush. And over here we have Brush Resources.

Just the sort of thing that could be found in a Resource Dictionary.

In fact. Resources can be defined in the current window, the app.xaml file or a Resource Dictionary referenced in the app.xaml file.

So I'll click on that button and you will see all of the system colours available as brush resources.

But look here. Bike. That is my brush resource. And it is available in my project because I have added the Resource Dictionary that contains it to my project.

And if I select it, you can see that it has been applied to my Rectangle control's Fill property.

At first glance it might appear to have been produced with an Image control but in fact it is a Rectangle.

Let me try and do the same thing with this Ellipse.

Once again, I'll head over to the Fill property, select Brush Resources and choose Bike.

That puts me in mind of the first picture disc that I ever owned. My Best Friends Girl by the Cars. Superb!

So there you go. That's how simple it is to add a resource dictionary to a project in Visual Studio. No matter whether it is WPF, Silverlight, Windows Phone or Windows Store. Any project type in fact, as long as it uses XAML for it's UI.


There you have it.

In this video, I have shown you how easy it is to add a XAML resource dictionary to your project in Visual Studio.

I'll produce some more videos showing how to use XAML resources in your project in Expression Blend and Visual Studio, just as soon as I have uploaded this one.

Flash player

See you soon

Phil Stirpé
"I don't do average!"

1 comment:

  1. In windows phone DrawingBrush is not supporting. Please can you ensure once again it will support in Windows phone. If can you provide sample project and video.