Styles and Triggers in Xamarin Forms UWP

This article describes about the styles and triggers in Xamarin forms. As like WPF and windows apps, styles can be defined in ResourceDictionary with set of triggers.

1) Global Styles

Open app.xaml file, define the resource dictionary as below.

<Application.Resources>
    <ResourceDictionary>
      
    </ResourceDictionary>
  </Application.Resources>

The following code example shows a Style declared at the application level.

       <Style x:Key="buttonStyle" TargetType="Button">
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
        <Setter Property="BorderColor" Value="Lime" />
        <Setter Property="BorderRadius" Value="5" />
        <Setter Property="BorderWidth" Value="5" />
        <Setter Property="WidthRequest" Value="200" />
        <Setter Property="TextColor" Value="Teal" />
      </Style>

Add the style to button control as StaticResource below
<Button Text="Hello Xamarin!!!" Style="{StaticResource buttonStyle}"></Button>

Since each platform has a unique fontfamily, for example Segoe for Windows Phone and UWP, and the same font family is not available in Xamarin forms, hence this platform specific font family should be rendered as a custom font as below.
Download the Segoe font files (.ttf) and add them to UWP project as below.



Now, add these font’s as platform type arguments in app.xaml file of PCL project and apply for a Label

<OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP.ttf#Segoe WP"  x:Key="PageTitleRegularFont"/>
      <OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP-Semibold.ttf#Segoe WP"  x:Key="PageTitleSemiBoldFont"/>
      <OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP-Bold.ttf#Segoe WP"  x:Key="PageTitleBoldFont"/>
      <OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP-Semilight.ttf#Segoe WP"  x:Key="PageTitleSemiLightFont"/>
<Style x:Key="labelStyle" TargetType="Label" >
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="FontFamily" Value="{StaticResource PageTitleBoldFont}"></Setter>
      </Style>

Style can be inherited by setting BasedOn property to an existing style

<Style x:Key="labelBasedOnStyle" TargetType="Label" BasedOn="{StaticResource labelStyle}" >
        <Setter Property="TextColor" Value="Teal" />
      </Style>

In Xamarin Forms, we have 6 dynamic styles known as device styles.

• BodyStyle
• CaptionStyle
• ListItemDetailTextStyle
• ListItemTextStyle
• SubtitleStyle
• TitleStyle

We can directly apply these styles to a Label as below.

               <Label Text="Title style"
               
Style="{DynamicResource TitleStyle}" />
            <Label Text="Subtitle text style"
               
Style="{DynamicResource SubtitleTextStyle}" />
            <Label Text="Body style"
               
Style="{DynamicResource BodyStyle}" />
            <Label Text="Caption style"
               
Style="{DynamicResource CaptionStyle}" />
            <Label Text="List item detail text style"
               
Style="{DynamicResource ListItemDetailTextStyle}" />
            <Label Text="List item text style"
               
Style="{DynamicResource ListItemTextStyle}" />

2) Triggers
Xamarin Forms support 4 types of triggers and these triggers were introduced in Xamarin.Forms 1.3 version. Ensure to update your Xamarin forms package to a latest version.

• Property Trigger – executed when a property on a control is set to a particular value.

For example, if you want to set the BackgroundColor property when the property IsFocused is True

  <Entry Placeholder="enter name">
    <Entry.Triggers>
       <Trigger TargetType="Entry"
          
Property="IsFocused" Value="True">
        <Setter
            
Property="BackgroundColor"
             
Value="Yellow" />
      </Trigger>
    </Entry.Triggers>
  </Entry>

• Data Trigger – same as the property trigger but uses data binding.

For example, if you want disable the button when the entry’s Length property is 0.

<Entry x:Name="emailAddress" Text="" Placeholder="email address"/>
      <Button Text="Send">
        <Button.Triggers>
          <DataTrigger TargetType="Button"
              
Binding="{Binding Source={x:Reference emailAddress},
                                           Path=Text.Length}"
              
Value="0">
            <Setter Property="IsEnabled" Value="False" />
          </DataTrigger>
        </Button.Triggers>
      </Button>

• Event Trigger – occurs when an event occurs on the control.

In the above Property Trigger example, we saw how to change the background color of an Entry element based on the IsFocused property entirely in XAML. Alternatively, we can use an Event Trigger to execute an action written in C# based on the TextChanged event of an entry to perform some basic validation.

Every action that we define has to inherit from TriggerAction<T> where T is the element to which a trigger is attached. When a trigger is fired, the Invoke method will be called.

public
class NumericValidationTriggerAction : TriggerAction<Entry>
     {
        protected override void Invoke(Entry entry)
        {
            double result;
            bool isValid = Double.TryParse(entry.Text, out result);
            entry.BackgroundColor =
                  isValid ? Color.Default : Color.Red;
        }
     }

<Entry>
      <Entry.Triggers>
         <EventTrigger Event="TextChanged">
          <local:NumericValidationTriggerAction></local:NumericValidationTriggerAction>
        </EventTrigger>
      </Entry.Triggers>
     </Entry>

• Multi Trigger – allows multiple trigger conditions to be set before an action occurs.

A MultiTrigger looks like a Trigger or DataTrigger except there can be more than one condition. All the conditions must be true before the Setters are triggered.

<Button Text="Multi Trigger">
      <Button.Triggers>
         <MultiTrigger TargetType="Button">
          <MultiTrigger.Conditions>
            <BindingCondition
            
Binding="{Binding Source={x:Reference emailAddress},
                              Path=Text.Length}"
            
Value="0" />
            <BindingCondition
                 
Binding="{Binding Source={x:Reference phone},
                              Path=Text.Length}"
                 
Value="0" />
          </MultiTrigger.Conditions>
          <Setter Property="IsEnabled" Value="False" />
        </MultiTrigger>
      </Button.Triggers>
     </Button>

Result of UI with styles and trigeers as below

Download the working sample      
      

By Siva Jagan Dhulipalla   Popularity  (1008 Views)