Tirggers en Xamarin Forms

El uso de triggers en Xamarin Forms permite expresar, en XAML, acciones que cambian la apariencia de controles en función de eventos o cambios en propiedades.

A continuación, se detallan los tipos de triggers que se pueden encontrar/utilizar en Xamarin.

 

Trigger de propiedades

Se produce cuando, en un control, se da un valor determinado a una propiedad.

Por ejemplo, si queremos que un entry tenga un background rojo si no se ha especificado ningún valor. Muy útil cuando se desea mostrar que un entry debe ser informado de manera obligatoria.

<Entry Placeholder="write your name" Text="{Binding Name}">
        <Entry.Triggers>
            <Trigger TargetType="Entry" Property="Text" Value="">
                <Setter Property="BackgroundColor" Value="Red" />
                <Setter Property="PlaceholderColor" Value="White" />
            </Trigger>
        </Entry.Triggers>
</Entry>

En el ejemplo anterior, tenemos un entry con fondo rojo cuando su valor es una cadena vacía, y blanco cuando tiene otro valor.

 

Trigger de datos

Usa enlaces de datos para desencadenar basándose en los propiedades de otro control. Es similar al anterior, pero especificando un binding para el Property del trigger, lo que nos permite relacionar la propiedad del trigger con una propiedad de ViewModel.

Por ejemplo, queremos que un entry esté habilitado solo si ya se ha especificado algún valor en otro entry.

<Entry Placeholder="write your surname" Text="">
        <Entry.Triggers>
            <DataTrigger TargetType="Entry" Binding="{Binding Name}" Value="">
                <Setter Property="IsEnabled" Value="False" />
            </DataTrigger>
        </Entry.Triggers>
</Entry>

En este caso, el Surname estará habilitado solo cuando el Name tenga un valor distinto de vacío.

 

Trigger de eventos

Se produce cuando tiene lugar un evento en el control.

Por ejemplo, cuando se pulse un botón, queremos que se reproduzca una animación que escale el botón y lo devuelva a su tamaño original.

Para ello, es necesario crear un TriggerAction sobrescribiendo el método Invoke, en el que se implementa la animación, tal y como se muestra a continuación.

public class ExpandButtonTriggerAction : TriggerAction<Button>
{
    protected async override void Invoke(Button button)
    {
        await button.ScaleTo(0.95, 50, Easing.CubicOut);
        await button.ScaleTo(1, 50, Easing.CubicIn);
    }
}

Una vez creado el TriggerAction, ya se puede utilizar en el XAML de la siguiente manera

<Button Text="Save" BackgroundColor="DarkCyan" TextColor="White">
    <Button.Triggers>
            <EventTrigger Event="Clicked">
            <local:ExpandButtonTriggerAction />
        </EventTrigger>
    </Button.Triggers>
</Button>

 

Multi triggers

Permite establecer varias condiciones de triggers antes de que se produzca una acción.

Por ejemplo, habilitar un botón cuando varios entries tengan un valor determinado.

En el caso anterior, el botón Save se activa solamente cuando las propiedades name y surname tengan los valores ‘Name’ y ‘Surname’, respectivamente.

<Label Text="Property trigger" />
<Entry Placeholder="write your name" Text="{Binding Name}">
    <Entry.Triggers>
        <Trigger TargetType="Entry" Property="Text" Value="">
            <Setter Property="BackgroundColor" Value="Red" />
            <Setter Property="PlaceholderColor" Value="White" />
        </Trigger>
    </Entry.Triggers>
</Entry>

<Label Text="Data trigger" Margin="0,10,0,0" />
<Entry Placeholder="write your surname" Text="{Binding Surname}">
    <Entry.Triggers>
        <DataTrigger TargetType="Entry" Binding="{Binding Name}" Value="">
            <Setter Property="IsEnabled" Value="False" />
        </DataTrigger>
    </Entry.Triggers>
</Entry>

<!--Multiple Trigger-->
<Label Text="Multiple trigger" Margin="0,20,0,0" />
<Button Text="Save" BackgroundColor="LightSeaGreen" TextColor="White" IsEnabled="false">
    <Button.Triggers>
    <MultiTrigger TargetType="Button">
        <MultiTrigger.Conditions>
            <BindingCondition Binding="{Binding Name}" Value="Name" />
            <BindingCondition Binding="{Binding Surname}" Value="Surname" />
        </MultiTrigger.Conditions>
        <Setter Property="IsEnabled" Value="true" />
    </MultiTrigger>
    </Button.Triggers>
</Button>

 

 

Como es habitual, he creado un proyecto en GitHub para ofrecer más detalles de la implementación que he realizado. Espero que os sea de ayuda https://github.com/jorgediegocrespo/XamarinTriggers

 

Bibliografía

https://docs.microsoft.com/es-es/xamarin/xamarin-forms/app-fundamentals/triggers

https://xamgirl.com/understanding-triggers-in-xamarin-forms/