{"id":24266,"date":"2016-02-03T13:33:14","date_gmt":"2016-02-03T21:33:14","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=24266"},"modified":"2016-02-03T13:33:14","modified_gmt":"2016-02-03T21:33:14","slug":"easy-app-theming-with-xamarin-forms-styles","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/easy-app-theming-with-xamarin-forms-styles\/","title":{"rendered":"Easy App Theming with Xamarin.Forms"},"content":{"rendered":"

\t\t\t\t\"PopularBeautiful user interfaces sell mobile apps, and designing a successful user experience for your app is a great first step for success.\u00a0But what about all of the little details that combine to create a fantastic design, such as colors and fonts? Even if you create\u00a0what you believe to be the perfect design, users will often find something to dislike about it.<\/p>\n

Why not let the user decide exactly<\/em> how they would like their\u00a0app to look?\u00a0Many popular apps have taken this approach.\u00a0Tweetbot has light and dark modes and the ability to change fonts to find the one that works best on the eyes during late-night\u00a0Twitter sessions. Slack\u00a0takes user customization to the next level by allowing users to customize the entire theme of the app through hexadecimal color values. Properly supporting theming also brings some tangible benefits to code, such as minimizing duplicated hardcoded values throughout apps to increase code maintainability.<\/p>\n

Xamarin.Forms allows you to take advantage of styling to build beautiful, customizable UIs\u00a0for iOS, Android, and Windows. In this blog post, we’re going to take a look at how to add theming to MonkeyTweet<\/em><\/a>, a minimalistic (we mean it!) Twitter client, by replicating Tweetbot’s light and dark mode as well as Slack’s customizable theming.<\/p>\n

Introduction to Resources<\/h2>\n

Resources allow you to share common definitions throughout an app to help you reduce hardcoded values in your code, resulting in massively increased code maintainability. Instead of having to alter every value in your app when a theme changes, you only have to change one: the resource.<\/p>\n

In the code below, you can see several duplicated values that could be extremely tedious to replace and are ideal candidates for using resources:<\/p>\n

\n
    \n#33302E\nWhite\n24\n<\/pre>\n
You can define a ResourceDictionary<\/code> at both the page and app-level, depending on the particular scope needed for the resource at hand. If a particular resource will be shared among multiple pages, it’s best to define it at the app-level in App.xaml to avoid duplication, as we do below with the MonkeyTweet<\/em> app<\/a>:<\/p>\n
   \n\n    \n\t\t\n\t\t\t#33302E\n\t\t\tWhite\n        \n    \n\n<\/pre>\n
Now that we have defined reusable resources in our application ResourceDictionary<\/code>, how do we reference these values in XAML? Let’s take a look at the two main types of resources, StaticResource<\/code> and DynamicResource<\/code>, and how we can utilize them to add a light and dark mode to MonkeyTweet<\/em><\/a>.<\/p>\n
Static Resources<\/h3>\n
The StaticResource<\/code> markup extension allows us to reference predefined resources, but have one key limitation: resources from the dictionary are only fetched one time during control instantiation and cannot be altered at runtime. The syntax is very similar to that for bindings; just set the property’s value to “{StaticResource Resource_Name}”. Let’s update our ViewCell<\/code> to use the resources we defined:<\/p>\n
  \n
Dynamic Resources<\/h3>\n
StaticResource<\/code>s are a great way to reduce duplicated values, but what we need is the ability to alter the resource dictionary at runtime (and have those resource updates reflected where referenced). DynamicResource<\/code> should be used for dictionary keys associated with values that might change during runtime. Additionally, unlike static resources, dynamic resources don’t generate a runtime exception if the resource is invalid and will simply use the default property value.<\/p>\n
We want MonkeyTweet’s<\/em> user interface to be able to switch between light and dark modes at runtime, so DynamicResource<\/code> is perfect for this situation. All we need to do is change StaticResource<\/code>s to DynamicResource<\/code>s. Updating our resources on-the-fly is super easy as well:<\/p>\n
  \nApp.Current.Resources [\"backgroundColor\"] = Color.White;\nApp.Current.Resources [\"textColor\"] = Color.Black;\n<\/pre>\n
Users can now switch between a light and dark theme<\/a> with the click of a button:\n\"Monkey<\/p>\n
Introduction to Styles<\/h2>\n
When building a user interface and theming an app, you may find yourself repeatedly configuring controls in a similar way. For example, all controls that display text may use the same font, font attributes, and size. Styles are a collection of property-value pairs called Setter<\/code>s. Rather than having to repeatedly set each of these properties to a particular resource, you can create a style, and then simply set the Style<\/code> property to handle the theming for you.<\/p>\n
Building Custom Styles<\/h3>\n
To define a style, we can take advantage of the application-wide resource dictionary to make this style available to all controls. Just like resources, each style must contain a unique key and target class name for the style. A style is made up of one or more Setter<\/code>s, where a property name and value for that property must be supplied. The TargetType<\/code> property defines which controls the theme can apply to; you can even set this to VisualElement to have the style apply to all subclasses of VisualElement. Setters<\/code> can even take advantage of resources to further increase maintainability.<\/p>\n
  \n\n    \n\t\t\n\t\t\t#33302E\n\t\t\tWhite\n\n\t\t\t\n            \t\n        \t\n        \t\n           \t\t\n        \t\n        \n    \n\n<\/pre>\n
We can apply this style by setting the Style<\/code> property of a control to the name of the style’s unique key. All properties from the style will be applied to the control. If a property is explicitly defined on the control that is also part of a referenced style, the property set explicitly will override the value in the style.<\/p>\n
 \n
\"Feb<\/a><\/p>\n
Conclusion<\/h2>\n
In this blog post, we took a look at theming applications with the Xamarin.Forms’ styles by theming our MonkeyTweet<\/em> application to have a customizable, user-defined theme. We only just scratched the surface of styling; there are lots of other cool things you can do with styling<\/a>, including style inheritance, implicit styling, platform-specific styling, and prebuilt styles. Be sure to download the MonkeyTweet<\/em> application to apply your own theme<\/a> and see just how easy it is to build beautiful, themed UIs with Xamarin.Forms!\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Beautiful user interfaces sell mobile apps, and designing a successful user experience for your app is a great first step for success.\u00a0But what about all of the little details that combine to create a fantastic design, such as colors and fonts? Even if you create\u00a0what you believe to be the perfect design, users will often […]<\/p>\n","protected":false},"author":546,"featured_media":24354,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4,16],"class_list":["post-24266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
Beautiful user interfaces sell mobile apps, and designing a successful user experience for your app is a great first step for success.\u00a0But what about all of the little details that combine to create a fantastic design, such as colors and fonts? Even if you create\u00a0what you believe to be the perfect design, users will often […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/24266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=24266"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/24266\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=24266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=24266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=24266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}