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

Read the previous parts of the series here,

• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part One
• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part Two
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Label and Button - Part Three
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Device class - Part Four
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Device Class (cont.) - Part Five
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Entry Control - Part Six
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: StackLayout and Layout Options - Part Seven
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: DisplayAlert and DisplayActionSheet - Part Eight
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Date Picker, Time Picker and Activity Indicator - Part Nine
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: XAML And Resource Dictionary - Part Ten

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

<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, 

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.

<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.