Wednesday, 20 February 2013

How do you add a XAML resource dictionary to your project in Expression Blend?

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 Expression Blend.
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 Expression Blend.

Now I have a WPF project open here in Expression Blend 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 Expression Blend 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 Projects window and select Add Existing Item.

You then locate the required file and then click the Add button.

Simply adding the Resource Dictionary isn't enough.

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

In fact. If I zoom in you will see the star alongside my app.xaml file. This indicates that it has been updated.

Let me open this file to take a look.

Notice that Expression Blend is telling me that it cannot display the contents of this XAML file. That is because this isn't a Page, Window, UserControl etc. It simply contains resources.

So I must click on the XAML button to view the mark-up.

Now, as you can see. Expression Blend has added an entry to the app.xaml file. It is a ResourceDictionary element with a Source property referencing the file that I just added to the project.

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

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.

Let me open the Resource Dictionary to show you what we have added to the project. It too cannot be displayed as it doesn't contain UI in the same way that a Page or Window does.

It contains a GeometryDrawing which is held within a DrawingBrush that has a key of Layer_2.

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.

The OpacityMask property is selected but I actually want Fill.

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. Layer_2. 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'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 Layer_2.

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

Let's take a look behind the scenes to see how the brush was applied.

I'll click on the XAML button to view the mark-up.

So here are my Rectangle and Ellipse.

And to each one's Fill property has been applied the Dynamic Resource with a key of Layer_2.

So there you go. That's how simple it is to add a resource dictionary to a project in Expression Blend. No matter whether it is WPF, Silverlight, Windows Phone or Windows Store. Any project type in fact, as long as it uses XAML for its 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 Expression Blend.

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. I would like to intergrate xaml in my project for UI, but am not sure how i add or where to find the xaml demo or files, what do i need to do before i can start using the xaml??
    Kind regards