Previous posts in this sequence on Getting Started with Xamarin.Forms:
Multi-Targeting in Visual Studio, SDK Versions, MvvmCross, Authenticating with ADAL
Refactoring MvvmCross and Services, Effects, Navigation with MvvmCross
Presentation Attributes in MvvmCross, Resources and Styles
Last post, on Resources and Styles, we discussed how resources, such as styles, can be defined at different levels within the view hierarchy. In this post we’re going to cover using resource dictionaries to better manage resources. Let’s start by recapping how resources can be defined by starting with a basic application level resource, which are resources that can be accessed anywhere in the application.
<Application.Resources>
<Thickness x_Key=”LeftRightMargin”>48,0</Thickness>
As we go down the view hierarchy, we can define resources at a page level, which are resources that will only be accessible to elements on the same page
<Page.Resources>
<Thickness x_Key=”LeftRightMargin”>36,0</Thickness>
A couple of things to note here – firstly we’re defining a resource with the same name as at the application level, which means we’re going to be overriding the resource value but only for this page. It’s also worth nothing that we’re using Page.Resources, despite the type of the page being ContentPage (for a normal Xamarin.Forms page) or MvxContentPage (for an MvvmCross page). This is acceptable since Page is the base class for both ContentPage and MvxContentPage, meaning that we can use it to reference the Resources property. It’s up to you whether you use Page.Resources or ContentPage.Resources, or even MvxContentPage.Resources, as they all reference the same property.
We can continue down the hierarchy, defining resources at either the container, or element level. As before, the resources are only accessible to the element and it’s children where the resource is defined.
<Grid.Resources>
<Thickness x_Key=”LeftRightMargin”>24,0</Thickness><Label.Resources>
<Thickness x_Key=”LeftRightMargin”>12,0</Thickness>
Now that we’ve seen how we can define resources at any level in the view hierarchy but currently we’re storing all our application level resources into the App.xaml, which overtime is going to get quite hard to manage. One approach to make resources easier to manage is to create separate resource dictionaries for different types of resources. My preference is to have a dictionary that contains literals such a colours, strings, Thickness, converters, and another resource dictionary that has styles and templates.
Let’s start by creating a separate dictionary and linking it to our App.xaml. Unfortunately Visual Studio doesn’t currently come with an item template for a ResourceDictionary for Xamarin.Forms. I’m going to create a folder called Resources within the UI project, open the folder in File Explorer and create a new file called StyleAndTemplateResources.xaml.
<?xml version=”1.0″ encoding=”utf-8″ ?>
<ResourceDictionary
><!– Add all Style and Template resources here –>
<Style TargetType=”Label” x_Key=”SomeLabelStyle” />
</ResourceDictionary>
This needs to be referenced in App.xaml to ensure the resources are loaded at application startup.
<Application.Resources>
<ResourceDictionary Source=”ResourcesStyleAndTemplateResources.xaml”/>
</Application.Resources>
Note that we’re using the new syntax supported in Xamarin.Forms v3+ where we do not need to include the MergedDictionaries tag and we can load the ResourceDictionary based on the path to the XAML. This means that we don’t need to specify the Class attribute in the XAML for the ResourceDictionary; nor do we need the code behind file.
Let’s also add another ResourceDictionary which will contain our literals. This will follow the same structure as the StyleAndTemplateResources.xaml but called LiteralResources.xaml, and we need to update the App.xaml.
<Application.Resources>
<!– This will NOT work –>
<ResourceDictionary Source=”ResourcesLiteralResources.xaml”/>
<ResourceDictionary Source=”ResourcesStyleAndTemplateResources.xaml”/>
</Application.Resources>
As the comment in the XAML states, adding the two resource dictionaries in parallel like this in the App.xaml will not work. At runtime you can expect a XAML parsing error, stating that resources defined in LiteralResources can’t be found when loading resources in StyleAndTemplateResources.
This is because both resource dictionaries are loaded independently and then merged into the resource dictionary for the application. In order to reference resources from LiteralResources, it needs to be loaded first, followed by StyleAndTemplateResources. You should be able to do this by chaining resource dictionaries as follows (Warning: this currently does not work!):
App.xaml
<Application.Resources>
<ResourceDictionary Source=”ResourcesStyleAndTemplateResources.xaml”/>
< /Application.Resources>
StyleAndTemplateResources
<?xml version=”1.0″ encoding=”utf-8″ ?>
<ResourceDictionary
>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source=”ResourcesLiteralResources.xaml”/>
</ResourceDictionary.MergedDictionaries><!– Other resources –>
</ResourceDictionary>
So, the question is – if this doesn’t work, what do you have to do? Well the good news is that we’re on the right track using a hierarchy of dictionaries. Unfortunately due to some issues with Xamarin.Forms, we can’t use the simplified form, instead we need to make sure that each resource dictionary has a Class attribute and a code behind file, and we need to explicitly use the MergedDictionaries element.
Start by creating code behind files for both resource dictionaries:
public partial class LiteralResources
{
public LiteralResources()
{
InitializeComponent();
}
}
public partial class StyleAndTemplateResources
{
public StyleAndTemplateResources()
{
InitializeComponent();
}
}
Next, we’ll update App.xaml and the other resource xaml files to define the Class attribute and fix the hierarchy:
LiteralResources.xaml
<?xml version=”1.0″ encoding=”utf-8″ ?>
<ResourceDictionary
x:Class=”StrataPark.UI.Resources.LiteralResources”>
<Thickness x_Key=”LeftRightMargin”>48,0</Thickness>
<x:Double x_Key=”DefaultLabelFontSize”>24</x:Double>
<Color x_Key=”FeatureColor”>Green</Color>
</ResourceDictionary>
StyleAndTemplateResources.xaml
<?xml version=”1.0″ encoding=”utf-8″ ?>
<ResourceDictionary
x:Class=”StrataPark.UI.Resources.StyleAndTemplateResources”>
<ResourceDictionary.MergedDictionaries>
<res:LiteralResources />
</ResourceDictionary.MergedDictionaries>
<Style x_Key=”FeatureLabelStyle” TargetType=”Label”>
<Setter Property=”TextColor” Value=”{StaticResource FeatureColor}”/>
<Setter Property=”FontSize” Value=”{StaticResource DefaultLabelFontSize}”/>
</Style>
<Style TargetType=”Label” BasedOn=”{StaticResource FeatureLabelStyle}”/>
</ResourceDictionary>
App.xaml
<?xml version=”1.0″ encoding=”utf-8″ ?>
<Application
x_Class=”StrataPark.UI.App”>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<res:StyleAndTemplateResources />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
And there you have it – resources are separated out for easier maintainability.