Merged Dictionaries with Xamarin Forms

Styling in XAML in Xamarin Forms has always been less than perfect in my eyes when trying to define and organize styles for your app.

In early 2015 I blogged about putting Styles in the App.xaml in Application.Resources to have globally accessible styles across your app. This was a great place to start, having some global styles and then locally define styles in each pages’ Application.Resources. Easy App Theming for Xamarin.Forms nicely details this process. However merged dictionaries like WPF would really enhance the capabilities.

At Evolve 2016 as I watched the live stream they announced Themes but what popped out in their code sample was ‘MergedWith’ and my instant response.

What are Merged Dictionaries?

They are the ability to merge dictionaries together from different sources. Think of it as importing CSS into a style. This functionality starts with version 2.3.0 of Xamarin.Forms, make sure you are using this version or higher.

Lets Create a Theme

Create a new XAML page and create a ResourceDictionary

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="UIDemo.Style.NewStyle">
    <Style TargetType="Label">
        <Setter Property="TextColor" Value="Blue" />
    </Style>
</ResourceDictionary>
Nnamespace UIDemo.Style
{
    public partial class NewStyle
    {
        public NewStyle()
        {
            InitializeComponent();
        }
    }
}

Apply the Theme

Now we can merge the dictionary with one on the page and voila, a merged dictionary.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:theme="clr-namespace:UIDemo.Style"
             x:Class="UIDemo.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary MergedWith="theme:NewStyle" />
    </ContentPage.Resources>
    <Grid>
        <Label Text="Hello" />
    </Grid>
</ContentPage>
Microsoft MVP (Xamarin) | Exrin | Xamarin Forms Developer | Melbourne, Australia | Open to sponsorship to Canada or US

Related Posts

5 Comments

  1. Rob

    One important thing to mention about merged dictionaries support in Xamarin Forms is you can’t merge multiple dictionaries.
    This is useful when you want to keep resource dictionaries separate in different files for maintainability.

    In WPF you can do this:

    But in Xamarin Forms you only have a `MergedWith` attribute which takes only one resource dictionary.

  2. Sasan

    hi
    is there a way not to create a partial class and add a simple xaml file and all the resources in there and then add it to the dictionary later ?

    something like ( this example is used from WPF)

    Current.Resources.MergedDictionaries.Add(new ResourceDictionary
    {
    Source = new Uri(@”/UIModule;component/Presentment/PresentmentTemplates.xaml”, UriKind.RelativeOrAbsolute)
    });

Leave A Comment?