Using static and theme resources in Windows 8.1 XAML

Well, this stopped me up for a few days so I thought I’d write down the answer – which was surprisingly subtle!

The Problem:
You are using Visual Studio 2013 to create a Windows 8.1 Store App. You want to create centralized styles, or even theme-specific styles for UI controls. So, you create a resource dictionary and reference it like this in your App.xaml:

<Application.Resources>
    <x:String x:Key="AppName">My App Name</x:String>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Common/CommonStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

But wait a second, now I get a XAML validation error in my App.xaml file:

mx3F25

EVERY single reference I can find, has a ResourceDictionary WITHOUT an x:Key. But OK Visual Studio, I’ll add a key for it. Now, on some arbitrary page in my project, let me try to reference a resource defined in CommonStyles.xaml:

mx32EF8

That was where I was early in the week. I’ve spent a significant chunk of the week trying to figure out why this didn’t work. Well, I ran across this blog post and video:

http://blogs.msdn.com/b/mspfe/archive/2014/01/14/xaml-styles-and-themed-resources-in-windows-8-1.aspx

But again, this guy too was barking up the wrong tree! He has a ResourceDictionary defined with no key – yet his app worked. And wait, he was specifically working on an 8.1 app!

I watched the video embedded on that page several times, and re-wound to try to find what I was missing…

The Solution:
It’s pretty subtle, but when you define a ResourceDictionary, you can no longer have other elements at that root level. They need to move into your new ResourceDictionary.

In other words, instead of this:

<Application.Resources>
    <x:String x:Key="AppName">My App Name</x:String>
    <ResourceDictionary x:Key="Default">
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Common/CommonStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Do this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Common/CommonStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <x:String x:Key="AppName">My App Name</x:String>
    </ResourceDictionary>
</Application.Resources>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Notice the change? The AppName setting or anything else which was defined at the Application.Resources level must now move into your default ResourceDictionary. Now, voila! The resource name resolves:

mx3F3BC

By the way, if you want to do theme-specific styles, that video above covers that very simply too – check it out, and it does apply to Windows 8.1. This is significant because several things about themes and resource lookups have changed from 8.0 to 8.1.

Tagged with: , , , ,
Posted in Uncategorized, Visual Studio, Windows Store, XAML

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Archives
Categories

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9 other followers

%d bloggers like this: