XAML 101: Resource Dictionaries

FacebookTwitterGoogle+Share

Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/014_ResourceDictionaries

We have seen how to create our own resources, use built in resources and styles, and create styles of our own. This gives us a lot of power over the layout of our app, but all of these resource definitions can clutter our pages and/or the App.xaml file. You also might want to reuse your resource definitions on other pages or in other apps, and that his hard to do if you have these resources defined inline unless you just copy/paste everything. Fortunately there is a better way by using resource dictionaries.

A Resource Dictionary is a special type of XAML file that contains a set of resource definitions. Let’s add one to our project. First let’s create a new folder in the project called Resources. This isn’t required but I feel it’s good to organize a bit. Select this new folder then in the Project menu select Add New Item (you can also right click on the Resources folder and select it there):

image

Now you should see the types of new items you can create. One of them will be Resource Dictionary. We’ll call it MyResources.xaml.

image

This is what Visual Studio creates for us:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml.Resources">
    
</ResourceDictionary>

Consider this XAML where we declare a Style in the Page Resources:

<Page
    x:Class="HelloXaml.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="TitleBlueStyle" BasedOn="{StaticResource TitleTextBlockStyle}" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock Text="Here is some text" Style="{StaticResource TitleBlueStyle}"/>
            <TextBlock Text="Some more text"/>
            <TextBlock Text="3rd line of text"/>
        </StackPanel>
    </Grid>
</Page>

And this what the the app looks like when running:

image

We can move the Style definition to the MyResources.xaml file:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml.Resources">
    <Style x:Key="TitleBlueStyle" BasedOn="{StaticResource TitleTextBlockStyle}" TargetType="TextBlock">
        <Setter Property="Foreground" Value="Blue"/>
    </Style>
</ResourceDictionary>

And then we can use this resource dictionary in our page:

<Page
    x:Class="HelloXaml.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary Source="Resources/MyResources.xaml"/>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock Text="Here is some text" Style="{StaticResource TitleBlueStyle}"/>
            <TextBlock Text="Some more text"/>
            <TextBlock Text="3rd line of text"/>
        </StackPanel>
    </Grid>
</Page>

And this will give us the same result. So this is great if we have one file with all our resource definitions in it, and then we can just reference it like this in each page, or we could reference it in the App.xaml file so the whole app can have access to these resources:

<Application
    x:Class="HelloXaml.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary Source="Resources/MyResources.xaml"/>
    </Application.Resources>
</Application>

But what if we have more than one resource dictionary to combine? This could happen if you have a fairly large app, and you want to keep your resources manageable. This can be done using the MergedDictionaries property like this:

<Application
    x:Class="HelloXaml.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/MyResources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

The MergedDictionaries property can take a list of ResourceDictionary entries so that you can break down your resources in any way that makes sense to your development process.

  • hugovermaak

    Hi Bill
    When I create the resource dictionary as shown above, I loose the IntelliSense when applying the style in my MainPage.xaml, at first I thought I did something wrong and was looking at my spelling etc. to see where my mistake is, I eventually just typed it out and it worked. Is it normal to loose the IntelliSense on resource dictionaries?