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,
- Explicit style
- 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
- <Stylex:Key="StyleLabel"TargetType="Label">
- <SetterProperty="FontSize"Value="34"/>
- <SetterProperty="TextColor"Value="Red"/>
- </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.
- <LabelText="Hey Style"Style="{StaticResource StyleLabel}"/>
Example
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
- <Style TargetType="Label">
- <SetterProperty="FontSize" Value="34" />
- <SetterProperty="TextColor" Value="Green" />
- </Style>
Sample code
- <ContentPage.Resources>
- <ResourceDictionary>
- <Stylex:Key="StyleLabel" TargetType="Label">
- <SetterProperty="FontSize" Value="34" />
- <SetterProperty="TextColor" Value="Red" />
- </Style>
- <StyleTargetType="Label">
- <SetterProperty="FontSize" Value="34" />
- <SetterProperty="TextColor" Value="Green" />
- </Style>
- </ResourceDictionary>
- </ContentPage.Resources>
- <StackLayout>
- <LabelText="Explicit Style" Style="{StaticResource StyleLabel}" />
- <LabelText="Implicit Style" />
- </StackLayout>
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,
- <SetterProperty="FontSize"Value="34"/>
- <SetterProperty="TextColor"Value="Red"/>
Style can be defined in three different ways,
- Page level
- Control level
- 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.
- <ContentPage.Resources>
- <ResourceDictionary>
- <Stylex:Key="StyleLabel" TargetType="Label">
- <SetterProperty="FontSize" Value="34" />
- </Style>
- </ResourceDictionary>
- </ContentPage.Resources>
-
- <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.
- <StackLayout> <StackLayout.Resources>
- <ResourceDictionary>
- <Stylex:Key="ControlLevel" TargetType="Label">
- <SetterProperty="TextColor" Value="Red" />
- </Style>
- </ResourceDictionary>
- </StackLayout.Resources>
-
- <LabelText="Control Level" Style="{StaticResource ControlLevel}" />
- </StackLayout>
Global level
Global level helps to access anywhere in the application. Style must be declared inside the Application Xaml file.
- <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Sample1.App">
- <Application.Resources>
- <ResourceDictionary>
- <Stylex:Key="GlobalLevel" TargetType="Label">
- <SetterProperty="TextColor" Value="Red" />
- </Style>
- </ResourceDictionary>
- </Application.Resources>
- </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.