Quick Start Tutorial: Creating Universal Apps Via Xamarin: Style in XAML - Part 11

Read the previous parts of the series here,

Style

In the resource dictionary, we can assign one property into one key; style is one key with a one-or-more properties relationship.

Style is a collection of the property values assigned to one or more elements and it must be declared into the ResourceDictionary tag. Style collection defines setter property, and setter contains the property and value.

Type of styles,

  1. Explicit style
  2. Implicit style

Explicit style

Explicit style is declared as the Key and Target type relationship.

Syntax of style

<Style x: Key="KeyName" TargetType="Control Type">
   <Setter Property="PropertyName" Value="PropertyValue"/>
</Style>

Example

  1. <Stylex:Key="StyleLabel"TargetType="Label">  
  2.    <SetterProperty="FontSize"Value="34"/>  
  3.    <SetterProperty="TextColor"Value="Red"/>  
  4. </Style>  
The code shown above changes the two properties of the Label control; i.e, FontSize and TextColor. (One Key changes into one or more property values).

Assign the style into the controls and use Style Property.
  1. <LabelText="Hey Style"Style="{StaticResource StyleLabel}"/>  
Example

run

Implicit style

Implicit style is declared as only the target type (key is not required), default is applicable to all the target types. 

Syntax of style

<Style TargetType="Control Type">
   <Setter Property="PropertyName" Value="PropertyValue"/>
</Style>


Example
  1. <Style TargetType="Label">  
  2.     <SetterProperty="FontSize" Value="34" />   
  3.     <SetterProperty="TextColor" Value="Green" />  
  4. </Style>  
Sample code
  1. <ContentPage.Resources>  
  2.     <ResourceDictionary>  
  3.         <Stylex:Key="StyleLabel" TargetType="Label">  
  4.             <SetterProperty="FontSize" Value="34" />  
  5.             <SetterProperty="TextColor" Value="Red" />  
  6.             </Style>  
  7.             <StyleTargetType="Label">  
  8.                 <SetterProperty="FontSize" Value="34" />  
  9.                 <SetterProperty="TextColor" Value="Green" />  
  10.                 </Style>  
  11.     </ResourceDictionary>  
  12. </ContentPage.Resources>  
  13. <StackLayout>  
  14.     <LabelText="Explicit Style" Style="{StaticResource StyleLabel}" />  
  15.     <LabelText="Implicit Style" />  
  16. </StackLayout>  
Explicit style

If both Explicit and Implicit style specifies the same target type, the priority is always high for the Explicit-assigned style.

Setter

Setter class assignment of a property to a value contains the two members -- Property and Value. 

Property is represented to the Control attributes like “TextColor” or “Font.” Value is represented to the control attributes and value is like “Red” or “12.”

Example,
  1. <SetterProperty="FontSize"Value="34"/>  
  2. <SetterProperty="TextColor"Value="Red"/>  
Style can be defined in three different ways, 
  1. Page level
  2. Control level
  3. Global level

Page level

Each XAML page style is declared inside in the Page.Resources tag and it is local within the page but can not be accessed outside.

  1. <ContentPage.Resources>  
  2.     <ResourceDictionary>  
  3.         <Stylex:Key="StyleLabel" TargetType="Label">  
  4.             <SetterProperty="FontSize" Value="34" />  
  5.             </Style>  
  6.     </ResourceDictionary>  
  7. </ContentPage.Resources>  
  8.   
  9. <LabelText="Style Example" Style="{StaticResource StyleLabel}" />  
Control level

Control level styles are declared inside the control resources dictionary. It can’t be accessed outside of the control. The key is available in the same page.
  1. <StackLayout>   <StackLayout.Resources>  
  2.         <ResourceDictionary>  
  3.             <Stylex:Key="ControlLevel" TargetType="Label">  
  4.                 <SetterProperty="TextColor" Value="Red" />  
  5.                 </Style>  
  6.         </ResourceDictionary>  
  7.     </StackLayout.Resources>  
  8.   
  9.     <LabelText="Control Level" Style="{StaticResource ControlLevel}" />  
  10. </StackLayout>  
Control level

Global level

Global level helps to access anywhere in the application. Style must be declared inside the Application Xaml file.
  1. <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Sample1.App">  
  2.     <Application.Resources>  
  3.         <ResourceDictionary>  
  4.             <Stylex:Key="GlobalLevel" TargetType="Label">  
  5.                 <SetterProperty="TextColor" Value="Red" />  
  6.                 </Style>  
  7.         </ResourceDictionary>  
  8.     </Application.Resources>  
  9. </Application>  
Note

Default Xamarin app.xaml file is not created. Add a new XAML page (remove all the template created tags) and add the code shown above into the newly created file and change the x: class name, if the class name is different. Add partial key in the app class.

Style


Similar Articles