{"id":35031,"date":"2018-01-23T14:28:44","date_gmt":"2018-01-23T22:28:44","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=35031"},"modified":"2019-04-04T08:58:55","modified_gmt":"2019-04-04T15:58:55","slug":"better-resource-organization-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/better-resource-organization-xamarin-forms\/","title":{"rendered":"Better Resource Organization in Xamarin.Forms"},"content":{"rendered":"

\t\t\t\tResource Dictionary<\/a> is a foundational building block to all Xamarin.Forms mobile development. It’s the primary vehicle for declaring XAML resources you\u2019ll use throughout your mobile application, including everything from styles to value converters, content templates, and data templates. In the most recent stable release<\/a> of Xamarin.Forms, we gained the ability to merge multiple resource dictionaries for even greater flexibility in composing resources. In this article, I\u2019ll show you how to take advantage of that and give you a glimpse at some of the new syntax improvements coming your way.<\/p>\n

Merged Dictionaries<\/h2>\n

Out with the Old<\/h3>\n

Prior to 2.5.0, you probably found yourself implementing a single resource dictionary per ContentPage<\/code> or other control. Every control has a Resources<\/code> property of type ResourceDictionary<\/code> where you declare reusable resources.<\/p>\n

<Application ...>\n    <Application.Resources>\n        <ResourceDictionary>\n            <Color x:Key=\"PageBackgroundColor\">Yellow<\/Color>\n            <Color x:Key=\"HeadingTextColor\">Black<\/Color>\n            <Color x:Key=\"NormalTextColor\">Blue<\/Color>\n            <Style x:Key=\"LabelPageHeadingStyle\" TargetType=\"Label\">\n                <Setter Property=\"FontAttributes\" Value=\"Bold\" \/>\n                <Setter Property=\"HorizontalOptions\" Value=\"Center\" \/>\n                <Setter Property=\"TextColor\" Value=\"{StaticResource HeadingTextColor}\" \/>\n            <\/Style>\n        <\/ResourceDictionary>\n    <\/Application.Resources>\n<\/Application>\n<\/pre>\n
You might define colors and styles that you wish to use throughout your application at the Application<\/code> level in this code.<\/p>\n
If you’re really industrious, you might have discovered that you merge one dictionary with another using the MergedWith<\/code> property.<\/p>\n
<Application ...\n    xmlns:local=\"using:MyApplication\">\n    <Application.Resources>\n        <ResourceDictionary MergedWith=\"local:Colors\">\n        <Style x:Key=\"LabelPageHeadingStyle\" TargetType=\"Label\">\n            <Setter Property=\"FontAttributes\" Value=\"Bold\" \/>\n            <Setter Property=\"HorizontalOptions\" Value=\"Center\" \/>\n            <Setter Property=\"TextColor\" Value=\"{StaticResource HeadingTextColor}\" \/>\n        <\/Style>\n        <\/ResourceDictionary>\n    <\/Application.Resources>\n<\/Application>\n<\/pre>\n
In this example the primary dictionary is being merged with another resource dictionary of colors.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ResourceDictionary\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    x:Class=\"MyApplication.Colors\">\n    <Color x:Key=\"PageBackgroundColor\">Yellow<\/Color>\n    <Color x:Key=\"HeadingTextColor\">Black<\/Color>\n    <Color x:Key=\"NormalTextColor\">Blue<\/Color>\n<\/ResourceDictionary>\n<\/pre>\n
Using a ResourceDictionary<\/code> in this fashion requires a code file to declare the class.<\/p>\n
...\n\npublic partial class Colors : ResourceDictionary\n{\n  ...\n}\n<\/pre>\n
In with the New<\/h3>\n
This syntax gets much cleaner with the new implementation of merged dictionaries, and you can merge multiple dictionaries instead of just the one. Instead of using MergedWith<\/code>, you now add to a new MergedDictionaries<\/code> collection property.<\/p>\n
<Application ...\n    xmlns:local=\"using:MyApplication\">\n    <Application.Resources>\n        <ResourceDictionary>\n            <ResourceDictionary.MergedDictionaries>\n                <local:Colors \/>\n                <!-- Add more resource dictionaries here -->\n            <\/ResourceDictionary.MergedDictionaries>\n            <Style x:Key=\"LabelPageHeadingStyle\" TargetType=\"Label\">\n                <Setter Property=\"FontAttributes\" Value=\"Bold\" \/>\n                <Setter Property=\"HorizontalOptions\" Value=\"Center\" \/>\n                <Setter Property=\"TextColor\" Value=\"{StaticResource HeadingTextColor}\" \/>\n            <\/Style>\n        <\/ResourceDictionary>\n    <\/Application.Resources>\n<\/Application>\n<\/pre>\n
A big thanks to Microsoft MVP Adam Pedley<\/a> for his proposal and initial pull request for merged dictionaries and for working with us to make this happen.<\/p><\/blockquote>\n
Upcoming ResourceDictionary Improvements<\/h2>\n
The next major version of Xamarin.Forms will introduce several improvements to ResourceDictionary<\/code> in XAML, which you can get a taste for now in the nightly build feed<\/a>.<\/p>\n
Pure XAML ResourceDictionaries<\/strong>\nYou\u2019ll notice the Colors.xaml<\/code> needs to have a partial class to accompany it in the example above, even though it\u2019s totally empty. That\u2019s no longer required in the nightly build, where you can declare a XAML file without any Class and it will still be compiled with XAML.<\/p>\n
Here\u2019s another file Colors.xaml<\/code> example, which contains all the colors to be used in an application. The\u00a0<?xaml-comp compile=”true” ?><\/span>\u00a0 does the magic.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<?xaml-comp compile=\"true\" ?>\n<ResourceDictionary\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\">\n    <Color x:Key=\"AccentColor\">#FF4B14<\/Color>\n    <Color x:Key=\"BlackOpacityColor\">#99253748<\/Color>\n    <Color x:Key=\"BlackTextColor\">#253748<\/Color>\n    <Color x:Key=\"BackgroundColor\">#F8F8F8<\/Color>\n    <Color x:Key=\"PinkColor\">#ED0241<\/Color>\n    <Color x:Key=\"GrayColor\">#ACB1B4<\/Color>\n    <Color x:Key=\"DarkColor\">#203446<\/Color>\n    <Color x:Key=\"WhiteColor\">#FFFFFF<\/Color>\n    <Color x:Key=\"GreenColor\">#368F95<\/Color>\n<\/ResourceDictionary>\n<\/pre>\n
More Concise Syntax<\/strong>\nXAML can get pretty verbose as you declare all the resources for your application, so we\u2019ve done some work to cut the corners and save some keystrokes. Instead of writing:<\/p>\n
<ContentPage.Resources>\n  <ResourceDictionary>\n    <ResourceDictionary.MergedDictionaries>\n        <ResourceDictionary Source=\"Colors.xaml\" \/>\n    <\/ResourceDictionary.MergedDictionaries>\n    <StyleSheet Source=\"style.css\" \/>\n    <Color x:Key=\"notgreen\">FF00FF<\/Color>\n  <\/ResourceDictionary>\n<\/ContentPage.Resources>\n<\/pre>\n
You can simply write:<\/p>\n
<ContentPage.Resources>\n  <ResourceDictionary Source=\"Colors.xaml\" \/>\n  <StyleSheet Source=\"style.css\" \/>\n  <Color x:Key=\"notgreen\">FF00FF<\/Color>\n<\/ContentPage.Resources>\n<\/pre>\n
In this new syntax:<\/p>\n