MergedWith with Xamarin Forms

  • Posted:
  • / By: Adam Pedley
  • / In: Design

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>

namespace 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>

Mobile Developer | Build Flutter

15 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.

  3. 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)
    });

  4. Tushar

    Hi , Thanks for the post..!
    But i didn’t got the meaning of “Create a new XAML page and create a ResourceDictionary” , what i guess is that , we need to add xamal page first then convert it to the ResourceDictionary,
    is it correct ?

    1. Adam Pedley

      A ResourceDictionary is a property on a Page or Application. In your App.cs or MyPage.cs you can add a ResourceDictionary.

      <Application.Resources>
      <ResourceDictionary>

      </ResourceDictionary>
      </Application.Resources>

      or in codebehind you can do

      this.Resources.Add(….);

  5. Piyush Poddar

    How to reference the Resource Dictionary from the App.xaml.cs instead of App.Xaml.?

      1. Piyush Poddar

        I need to add a resource dictionary from code behind not the resources. The Merged with tag available in design mode is accessible in code behind but not sure of how to read and pass the style xaml being created to it from code behind.

  6. Adam Pedley

    You need to create a new ResourceDictionary class

    public class MyCustomResourceDictionary : ResourceDictionary
    {
    public MyRD()
    {
    Add(“key”, “value”);
    }
    }

    Then add it to MergedWith via

    this.Resources.MergedWith = typeof(MyCustomResourceDictionary);

  7. Piyush Poddar

    Thanks for the help. It works like a charm !!.

    One more help I am trying to read the XAML from the app.config in PCL using PCLAppconfig nuget package but unable to add that in this.Resources.MergedWith = typeof(MyCustomResourceDictionary); post that. Any way we can read that fileName as a xaml in code behind something like XAMLReader we do in WPF.

    1. Adam Pedley

      If you add an x:Name attribute you may be able to get a reference to it from code behind. If not, when the XAML has loaded, you should be able to get a reference to it from the existing ResourceDictionary, if you have already added it somewhere in XAML.

      If you needed to load the XAML from a string, there is nothing publicly available, however the XamlLoader in Xamarin Forms can be taken from source control and used. You will need to go to the Xamarin Forms source code on GitHub for that.

      1. Piyush Poddar

        Hi adam.

        My requirement is to create multiple resource dictionary files and use them one at a time by passing the Resource Dictionary in app.config at build time.

        I have achieved the same in WPF using

        if (!string.IsNullOrEmpty(fileName))
        {
        using (FileStream fs = new FileStream(fileName, FileMode.Open))
        {
        // Read in ResourceDictionary File
        ResourceDictionary dic = (ResourceDictionary)XamlReader.Load(fs);
        // Clear any previous dictionaries loaded
        Resources.MergedDictionaries.Clear();
        // Add in newly loaded Resource Dictionary
        Resources.MergedDictionaries.Add(dic);
        }
        }

        But for xamarin forms am unable to get to the bottom of it.