Using Shared Theme Resources in Universal Windows Apps

Using Resource Dictionary to store reusable Styles and DataTemplates is a clean way of building an app. In Universal Windows Apps you can have shared Theme Resources which can be used in both Windows Phone and Windows project. To handle scenarios where some resources are platform specific and others are shared you could have two resource dictionaries.

  • SharedResources: For shared resources(In shared project)
  • PlatformSpecificThemes: For platform specific resources(In each of the platform specific projects using the same name)

The solution should something similar to the image shown below.

We will use the same name PlatformSpecificThemes in both the Windows Phone and Windows project for our platform specific resources. What the compiler will do for us is that it will automatically resolve the resource to be used in each of the projects. Anything contained in the “Shared” pseudo-project gets compiled individually into each platform-specific project.

Here are the steps to add shared theme resources in your app:

Step 1: Add a new Resource Dictionary in the Shared Project

Add a new Resource Dictionary named SharedResources.xaml in your Shared project. We have added this resource dictionary under Themes folder. This resource dictionary will contain resources which will be common for both the apps. Styles and Templates defined in this file cab be used on both Windows Phone and Windows.

Step 2: Add a new Resource Dictionary in each of the Platform Specific Projects

Next, we add a new Resource Dictionary file named PlatformSpecificThemes.xaml in each of the platform specific projects ie. Windows Phone and Windows. We keep the folder structure same for all the three projects. The platform specific resource file is kept under Themes folder in both the Windows Phone and Windows apps. You can refer to the project structure screenshot at the beginning of the tutorial.

Step 3: Define Resources in App.xaml

In the App.xaml file of the Shared project define the ResourceDictionary to be used by your projects.

From there, just put any XAML resources you need in the platform-specific PlatformSpecificThemes.xaml file and they will become available throughout your application. Any styles or other resources will work in the Visual Studio designer window and the new XAML static resource auto-completion will continue to work exactly as you’d expect.

The App.xaml file looks similar to this after defining the ResourceDictionary.

Note that ReSharper may continue to show an error but the project will build successfully.

This also makes it easier to share pages and user controls between platforms. You can reference platform-specific styles, DataTemplates, or any other static resource from shared pages/controls as long as a resource exists with the same name on each platform.

Using Platform Specific Resource in Shared Page.

Here’s an example with a shared page. The style MyTextBlockStyle sets the text color to red on Windows and green on Windows Phone. (By the way, you can switch between viewing within the context of Windows or Windows Phone by using the drop-down box.)

In the PlatformSpecificThemes.xaml for Windows Phone project add the following style.

In the PlatformSpecificThemes.xaml for Windows project add the following style.

In the MainPage.xaml add a TextBlock that uses MyTextBlockStyle.

When you deploy the solution on Windows you will see the text appear in red and when you run it on Windows Phone it will appear green.

Here’s how the page looks on Windows.

And here’s how the page looks on Windows Phone.

Using Shared Resource in Platform Specific Project

This is a more general scenario where resources defined in the shared project can be used in any of the platform specific projects. We define a SolidColorBrush named ThemeColor in our SharedResources.xaml file and we can then use it in any of the projects ie any XAML page in the shared project or in Windows Phone or Windows.

We add a BlankPage.xaml in each of the platform specific projects and add the following XAML code in both of them.

Here’s how the XAML is rendered on Windows Phone.

Here’s how it is rendered on Windows.

Notice the following,

  • Both the apps picked up ThemeColor resource from SharedResource.xaml
  • The apps picked up MyTextBlockStyle resource from their PlatformSpecificThemes.xaml

Please, feel free to download the source code for reference or clone it from Github.

Download project SharedThemeResources.zip