Triggers In Xamarin.Forms

Here, we will discuss the following three triggers used in XAML.

• Property Trigger
• Data Trigger
• Multi Trigger

Property Trigger

Property trigger is a trigger that gets fired when a property of a specific element is set to a specific value.

Let’s go through its syntax and example.

XAML

<Entry Placeholder="Enter Email">
      <Entry.Triggers>
          <Trigger TargetType="Entry" Property="IsFocused" Value="True">
              <Setter Property="BackgroundColor" Value="Black"/>
              <Setter Property="TextColor" Value="White"/>
          </Trigger>
      </Entry.Triggers>
  </Entry>

Explanation

In this example, we made a trigger which gets fired when our entry gets focused. And after the trigger fires, it sets the background color and text color of the element. This is one of the simple examples of property trigger.

Main things to remember in this trigger are,

• Target Type
  It is the control name to which we are going to use the trigger.
  
  
• Property
  This is the property of the control that is monitored.
  
  
• Value
  It is the value which fires the trigger when a monitored property is set to a specific value.
  
  
• Setter
  Collection of setters are applied to control when a specified condition is met.

Output

The output shows two images. In the first image, our entry is not focused and in the second image, the entry is focused; this activates our trigger and the conditions are applied to it.

  

Data Trigger

Data trigger is based on the binding that comes from any property of element present in this page or a ViewModel of a page. It is similar to property trigger but property trigger is only specified to a single element and does not depend upon binding values from other elements.

Let’s go through its syntax and example.

 XAML

<Entry Placeholder="Enter Email" Text="" x:Name="Email">
    <Entry.Triggers>
        <Trigger TargetType="Entry" Property="IsFocused" Value="True">
            <Setter Property="BackgroundColor" Value="Black"/>
            <Setter Property="TextColor" Value="White"/>
        </Trigger>
    </Entry.Triggers>
</Entry>

<Button Text="Submit">
    <Button.Triggers>
        <DataTrigger TargetType="Button" Binding="{Binding Source={x:Reference Email}, Path=Text.Length}" Value="0">
            <Setter Property="IsEnabled" Value="False"/>
            <Setter Property="BackgroundColor" Value="Red"/>
        </DataTrigger>
    </Button.Triggers>
</Button>

Explanation

In this example, we applied the data trigger on a button. This trigger fires when the text length of the email entry is equal to zero. And to fire this trigger at start, we set the entry text to empty. So now, when a user writes any text in the entry, the button turns back to the default values. Our trigger will activate when the text length is zero which turns the "Submit" button into disabled state.

The additional thing in the data trigger to remember is binding. This binding came from an element or ViewModel.

Output

The output shows two images. In our first image, the text length is zero and in the second image, there is some text written. The first image activates our trigger and conditions are applied on the "Submit" button.

 

 

 

Multi Trigger

Multi trigger is the same as data trigger but in this trigger, we can write multiple conditions and our trigger activates when all conditions are true. So, there is an AND condition in our Multi Trigger. 

In simple words, if (condition1 && condition2 && condition3) {// Trigger setters}

Let’s go through its syntax and example.

XAML

<Label Text="verify that you are not a robot:"/>
<Label TextColor="DarkBlue" Text="AzUf09"/>
<Entry Text="" x:Name="verficationEntry"/>

<Label Text="Not Verified" TextColor="Red">
    <Label.Triggers>
        <MultiTrigger TargetType="Label">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding Source={x:Reference verficationEntry}, Path=Text.Length}" Value="6"/>
                <BindingCondition Binding="{Binding Source={x:Reference verficationEntry}, Path=Text}" Value="AzUf09"/>
            </MultiTrigger.Conditions>
            <Setter Property="Text" Value="Verified"/>
            <Setter Property="TextColor" Value="Green"/>
        </MultiTrigger>
    </Label.Triggers>
</Label>

Explanation

Here, we made a simple and useful example of multi trigger. This example tells you that you are verified when all conditions in multi trigger are satisfied. We made a simple check through this multi trigger.

Output

The output shows two images to explain the conditions of our multi trigger.