What is the style in Xamarin Form and how to use it?
What is Style in Xamarin Form?
- class Style (Xamarin.Forms.Style)
- Group common UI elements for quick reuse & change such as button types, h1, h2 text types …
- Style to use: XAML Style or Cascading Style Sheets (CSS)
Using Style with XAML Style:
- Explicit Styles : apply for a specific object1234567891011121314151617<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Styles.ExplicitStylesPage <span class="token punctuation">"</span></span> <span class="token attr-name">Title</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Explicit <span class="token punctuation">"</span></span> <span class="token attr-name">IconImageSource</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> xaml.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout</span> <span class="token attr-name">Padding</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0,20,0,0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> labelRedStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Label <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> These labels <span class="token punctuation">"</span></span> <span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource labelRedStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span>
- Implicit Styles : Used to apply general to 1 TargetType eg Button / Label …1234567891011121314151617181920212223<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> local</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> clr-namespace:Styles;assembly=Styles <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Styles.ImplicitStylesPage <span class="token punctuation">"</span></span> <span class="token attr-name">Title</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Implicit <span class="token punctuation">"</span></span> <span class="token attr-name">IconImageSource</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> xaml.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Entry <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> HorizontalOptions <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Fill <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> VerticalOptions <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> CenterAndExpand <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BackgroundColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Yellow <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> FontAttributes <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Italic <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TextColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Blue <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout</span> <span class="token attr-name">Padding</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0,20,0,0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Entry</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> These entries <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Entry</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> are demonstrating <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Entry</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> implicit styles, <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Entry</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> and an implicit style override <span class="token punctuation">"</span></span> <span class="token attr-name">BackgroundColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Lime <span class="token punctuation">"</span></span> <span class="token attr-name">TextColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Red <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> <span class="token namespace">local:</span> CustomEntry</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Subclassed Entry is not receiving the style <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span>
- Global Styles : For general use for the entire page (ResourceDictionary at App.xaml), avoid repeating styling between pages, possibly override styles at resource page / resource of each element.
- Style Inheritance : To inherit from another style, reuse purpose & not duplicate. Use BaseOn:1234567891011121314151617181920212223242526272829303132<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Styles.StyleInheritancePage <span class="token punctuation">"</span></span> <span class="token attr-name">Title</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Inheritance <span class="token punctuation">"</span></span> <span class="token attr-name">IconImageSource</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> xaml.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> baseStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> View <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> HorizontalOptions <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Center <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> VerticalOptions <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> CenterAndExpand <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> labelStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Label <span class="token punctuation">"</span></span><span class="token attr-name">BasedOn</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource baseStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TextColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Teal <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> buttonStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Button <span class="token punctuation">"</span></span><span class="token attr-name">BasedOn</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource baseStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BorderColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Lime <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout</span> <span class="token attr-name">Padding</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0,20,0,0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> These labels <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource labelStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Button</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> So is the button <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource buttonStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span>
- Dynamic Styles : Style will not change after assign. Use DynamicResource to solve this. DynamicResource and StaticResource markup extension are the same, only StaticResource is: single dictionary lookup, and DynamicResource has a link to Dictionary key -> when the dictionary entry linked to dictionary key is changed, it will change according to -> UI will be updated. Proceed through 2 steps:
- Declare dynamic style XAML file:123456789101112131415161718192021222324252627<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Styles.DynamicStylesPage <span class="token punctuation">"</span></span> <span class="token attr-name">Title</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Dynamic <span class="token punctuation">"</span></span> <span class="token attr-name">IconImageSource</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> xaml.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> baseStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> View <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> blueSearchBarStyle <span class="token punctuation">"</span></span><span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SearchBar <span class="token punctuation">"</span></span><span class="token attr-name">BasedOn</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource baseStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> greenSearchBarStyle <span class="token punctuation">"</span></span><span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SearchBar <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout</span> <span class="token attr-name">Padding</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0,20,0,0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> SearchBar</span> <span class="token attr-name">Placeholder</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> These SearchBar controls <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource searchBarStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span>
- Processed at code-behind:12345678910111213141516171819202122<span class="token keyword">public</span> <span class="token keyword">partial</span> <span class="token keyword">class</span> <span class="token class-name">DynamicStylesPage</span> <span class="token punctuation">:</span> <span class="token type-list"><span class="token class-name">ContentPage</span></span><span class="token punctuation">{</span><span class="token class-name"><span class="token keyword">bool</span></span> originalStyle <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span><span class="token keyword">public</span> DynamicStylesPage <span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>InitializeComponent <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>Resources <span class="token punctuation">[</span> <span class="token string">"searchBarStyle"</span> <span class="token punctuation">]</span> <span class="token operator">=</span> Resources <span class="token punctuation">[</span> <span class="token string">"blueSearchBarStyle"</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token return-type class-name"><span class="token keyword">void</span></span> OnButtonClicked <span class="token punctuation">(</span> <span class="token class-name"><span class="token keyword">object</span></span> sender <span class="token punctuation">,</span> <span class="token class-name">EventArgs</span> e <span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> originalStyle <span class="token punctuation">)</span> <span class="token punctuation">{</span>Resources <span class="token punctuation">[</span> <span class="token string">"searchBarStyle"</span> <span class="token punctuation">]</span> <span class="token operator">=</span> Resources <span class="token punctuation">[</span> <span class="token string">"greenSearchBarStyle"</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>originalStyle <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>Resources <span class="token punctuation">[</span> <span class="token string">"searchBarStyle"</span> <span class="token punctuation">]</span> <span class="token operator">=</span> Resources <span class="token punctuation">[</span> <span class="token string">"blueSearchBarStyle"</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>originalStyle <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
- Declare dynamic style XAML file:
- Device Styles : XF contains 6 types to display for the Label section:
- BodyStyle
- CaptionStyle
- ListItemDetailTextStyle
- ListItemTextStyle
- SubtitleStyle
- TitleStyle
123456789101112131415161718192021222324252627282930<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Styles.DeviceStylesPage <span class="token punctuation">"</span></span> <span class="token attr-name">Title</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Device <span class="token punctuation">"</span></span> <span class="token attr-name">IconImageSource</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> xaml.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> myBodyStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Label <span class="token punctuation">"</span></span><span class="token attr-name">BaseResourceKey</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BodyStyle <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TextColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Accent <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout</span> <span class="token attr-name">Padding</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0,20,0,0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Title style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource TitleStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Subtitle text style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource SubtitleStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Body style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource BodyStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Caption style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource CaptionStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> List item detail text style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource ListItemDetailTextStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> List item text style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource ListItemTextStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> No style <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> My body style <span class="token punctuation">"</span></span><span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource myBodyStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Content</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span> - Style Classes : to use multiple styles for 1 TargetType: eg BoxView has many Styles:12345678910111213141516171819202122232425262728293031323334353637383940414243<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">...</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BoxView <span class="token punctuation">"</span></span><span class="token attr-name">Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Separator <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BackgroundColor <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #CCCCCC <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> HeightRequest <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 1 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BoxView <span class="token punctuation">"</span></span><span class="token attr-name">Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Rounded <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BackgroundColor <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #1FAECE <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> HorizontalOptions <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Start <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> CornerRadius <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 10 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BoxView <span class="token punctuation">"</span></span><span class="token attr-name">Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Circle <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> BackgroundColor <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #1FAECE <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> WidthRequest <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 100 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> HeightRequest <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 100 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> HorizontalOptions <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Start <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> CornerRadius <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 50 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> VisualElement <span class="token punctuation">"</span></span><span class="token attr-name">Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Rotated <span class="token punctuation">"</span></span><span class="token attr-name">ApplyToDerivedTypes</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> true <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Rotation <span class="token punctuation">"</span></span><span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 45 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage.Resources</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span>
Using Style with CSS:
- There is currently no full support for CSS.
- See more
Theming and usage:
Use to change the entire visual UI of an app, like dark / light theme.
Use DynamicResource to change the theme:
Doing:
- Define each theme type in ResourceDictionary
- Use themes in apps using DynamicResource
- Set default theme in App.xaml file.
- Add code to change themes at runtime.
1. Define Theme:
** Dark Theme **
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ThemingDemo.LightTheme <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> PageBackgroundColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> White <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> NavigationBarColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> WhiteSmoke <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> PrimaryColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> WhiteSmoke <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SecondaryColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Black <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> PrimaryTextColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Black <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SecondaryTextColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> White <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TertiaryTextColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Gray <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TransparentColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Transparent <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span> |
Theme Light
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ThemingDemo.DarkTheme <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> PageBackgroundColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Black <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> NavigationBarColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Teal <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> PrimaryColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Teal <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SecondaryColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> White <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> PrimaryTextColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> White <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SecondaryTextColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> White <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TertiaryTextColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> WhiteSmoke <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Color</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TransparentColor <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Transparent <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Color</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ResourceDictionary</span> <span class="token punctuation">></span></span> |
2. Use DynamicResource for the styles:
Use in App.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Application</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ThemingDemo.App <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Application.Resources</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> LargeLabelStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Label <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TextColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource SecondaryTextColor} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> FontSize <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 30 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> MediumLabelStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Label <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TextColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource PrimaryTextColor} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> FontSize <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 25 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Style</span> <span class="token attr-name"><span class="token namespace">x:</span> Key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> SmallLabelStyle <span class="token punctuation">"</span></span> <span class="token attr-name">TargetType</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Label <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> TextColor <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource TertiaryTextColor} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Setter</span> <span class="token attr-name">Property</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> FontSize <span class="token punctuation">"</span></span> <span class="token attr-name">Value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 15 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Style</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Application.Resources</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Application</span> <span class="token punctuation">></span></span> |
Use in Content Page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ContentPage</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> local</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> clr-namespace:ThemingDemo <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ThemingDemo.UserSummaryPage <span class="token punctuation">"</span></span> <span class="token attr-name">Title</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> User Summary <span class="token punctuation">"</span></span> <span class="token attr-name">BackgroundColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource PageBackgroundColor} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ScrollView</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Grid</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Grid.RowDefinitions</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> RowDefinition</span> <span class="token attr-name">Height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 200 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> RowDefinition</span> <span class="token attr-name">Height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 120 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> RowDefinition</span> <span class="token attr-name">Height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 70 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Grid.RowDefinitions</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Grid</span> <span class="token attr-name">BackgroundColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {DynamicResource PrimaryColor} <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Face-Palm Monkey <span class="token punctuation">"</span></span> <span class="token attr-name">VerticalOptions</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Center <span class="token punctuation">"</span></span> <span class="token attr-name">Margin</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 15 <span class="token punctuation">"</span></span> <span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource MediumLabelStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Grid</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> StackLayout</span> <span class="token attr-name">Grid.Row</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 1 <span class="token punctuation">"</span></span> <span class="token attr-name">Margin</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 10 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> This monkey reacts appropriately to ridiculous assertions and actions. <span class="token punctuation">"</span></span> <span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource SmallLabelStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> <span class="token entity" title="•">•</span> Cynical but not unfriendly. <span class="token punctuation">"</span></span> <span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource SmallLabelStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> <span class="token entity" title="•">•</span> Seven varieties of grimaces. <span class="token punctuation">"</span></span> <span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource SmallLabelStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Label</span> <span class="token attr-name">Text</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> <span class="token entity" title="•">•</span> Doesn't laugh at your jokes. <span class="token punctuation">"</span></span> <span class="token attr-name">Style</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {StaticResource SmallLabelStyle} <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> StackLayout</span> <span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Grid</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ScrollView</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ContentPage</span> <span class="token punctuation">></span></span> |
3. Set default theme: App.xml
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Application</span> <span class="token attr-name">xmlns</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://xamarin.com/schemas/2014/forms <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span> x</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.microsoft.com/winfx/2009/xaml <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">x:</span> Class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ThemingDemo.App <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Application.Resources</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ResourceDictionary</span> <span class="token attr-name">Source</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Themes/LightTheme.xaml <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Application.Resources</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Application</span> <span class="token punctuation">></span></span> |
4. Load the runtime theme:
- Remove current theme (clear mergedictionary)
- Load the selected theme and add: MergedDictionaries
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | void OnPickerSelectionChanged(object sender, EventArgs e) { Picker picker = sender as Picker; Theme theme = (Theme)picker.SelectedItem; ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries; if (mergedDictionaries != null) { mergedDictionaries.Clear(); switch (theme) { case Theme.Dark: mergedDictionaries.Add(new DarkTheme()); break; case Theme.Light: default: mergedDictionaries.Add(new LightTheme()); break; } } } |
See also: https://blog.quilv.com/blog/