Chapter 8 Advanced UI Concepts

Triggers

.NET MAUI provides a concept called triggers. They enable you to further enhance how your views react to changes in the view model. You are given the ability to define actions that can modify the appearance of the UI based on event or data changes. Triggers provide us with another way of changing the visibility of our border overlay for adding a new widget. The initial work will appear more verbose in the short term but do bear with me - it will result in a much better outcome!

There are a number of different types of triggers that can be attached to a control, each with a varying level of functionality. You will take a brief look at them and then dig into the one that you need for your scenario.

•\ Trigger: A Trigger represents a trigger that applies property values, or performs actions, when the specified property meets a specified condition.

•\ DataTrigger: A DataTrigger represents a trigger that applies property values, or performs actions, when the bound data meets a specified condition. The Binding markup extension is used to monitor for the specified condition.

•\ EventTrigger: An EventTrigger represents a trigger that applies a set of actions in response to an event. Unlike Trigger, EventTrigger has no concept

of termination of state, so the actions will not be undone once the condition that raised the event is no longer true.

•\ MultiTrigger: A MultiTrigger represents a trigger that applies property values, or performs actions, when a set of conditions are satisfied. All the conditions must be true before the Setter objects are applied.

237

Chapter 8 Advanced UI Concepts

Creating aDataTrigger

In this chapter, you have added your overlay Border control and are currently changing its visibility through a binding direct to the IsVisible property. You can write this differently with a DataTrigger. Let’s open the FixedBoardPage.xaml file and modify the Border control to the following:

<Border

IsVisible="False"

HorizontalOptions="Center"

VerticalOptions="Center"

Padding="10"

Style="{StaticResource OverlayBorderStyle}"> <Border.Triggers>

<DataTrigger

TargetType="Border" Binding="{Binding IsAddingWidget}" Value="True">

<Setter

Property="IsVisible" Value="True" />

</DataTrigger>

</Border.Triggers>

Notice that the syntax for a Trigger is very similar to a Style. You will also notice that it looks a lot more verbose than your original simple

binding approach. If you simply want to control the IsVisible property of a control, a trigger is overkill, in my opinion. You will not be ending here, though, so bear with me. First, let’s break down what you have added and then look to how you can enhance it.

238

Chapter 8 Advanced UI Concepts

First, you modify the IsVisible property binding to false. This is the initial state of the visibility of your view.

IsVisible="False"

Next, you add the DataTrigger to the Border.Triggers property.

<DataTrigger

TargetType="Border" Binding="{Binding IsAddingWidget}" Value="True">

Much like with styles, you define the type of control the DataTrigger applies to. You also set the Binding property to bind to the IsAddingWidget property on your view model. Finally, you set the Value property of true. This all means that when the IsAddingWidget property value is set to true, the contents of the DataTrigger will be applied.

This leads you onto the final change, which is the setter.

<Setter

Property="IsVisible" Value="True" />

To repeat myself, all of this is rather verbose up until you consider that you can define actions that can be performed when your state is entered/exited.

EnterActions andExitActions

As an alternative to simply defining values for properties to be set when the IsAddingWidget property value becomes true, like in your previous example, you can define actions that will be performed when the value enters or exits a specific state. What exactly does this mean? Let’s take a look at an example. You can rewrite the trigger usage from the previous example as

239

Chapter 8 Advanced UI Concepts

<DataTrigger

TargetType="Border" Binding="{Binding IsAddingWidget}" Value="True">

<DataTrigger.EnterActions> <!—-action to perform-->

</DataTrigger.EnterActions>

<DataTrigger.ExitActions> <!—-action to perform-->

</DataTrigger.ExitActions>

</DataTrigger>

Given the above, you can state the following:

When the property (IsAddingWidget) in the Binding enters the state defined in Value (True), the EnterActions will be performed.

When the property (IsAddingWidget) in the Binding exits the state defined in Value (False), the ExitActions will be performed.

You need to define an action to be performed for these scenarios now.

Creating aTriggerAction

.NET MAUI provides the TriggerAction<T> base class that allows you to define an action that will be performed in the enter or exit scenario. This enables you to build a more complex behavior that can be performed when a value changes. When creating a trigger action, you can use the base class TriggerAction<T> provided by .NET MAUI and then you need to override the Invoke method. It is this method that defines what action will be performed when the value changes. Let’s create your own action that you can use.

240