Triggers en Estilos

Resumen

Los Triggers o disparadores son acciones que indican la ejecución de un código como respuesta a algún cambio en la aplicación. Expresan acciones que modifican la apariencia de los controles según alguna lógica establecida. Pueden ser implementados en la colección Triggers del elemento Style para definir estilos dependiendo de un evento que sucede al control.

Los tipos soportados:

Trigger (o Property Triggers): se ejecuta cuando el valor de una propiedad es modificado.
Data Trigger: se ejecuta cuando el valor de propiedad enlazado desde el ViewModel cambia.
Event Trigger: se ejecuta cuando sucede algún evento en particular.
MultiTrigger: se ejecuta como respuesta a multiples eventos que pueden suceder en simultáneo.

El siguiente es un ejemplo de Trigger en un Style:

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

Este trigger dispararía la asignación de estilo de color de fondo en amarillo cuando el componente entry tenga el focus.

Julio J Yépez

student•

El uso de Triggers en la definición de los Stlyes me parece muy conveniente para acompañar la validación de campos en un formulario, y con ello liberar a la lógica del negocio de tener que resolver estos cambios de apariencia además de todo lo relativo al valor de los datos.

Carlos Orjuela

student•

Un ejemplo de “Event Trigger”: . .

Este disparados, cambia la propiedad texcolor de un Entry, siempre y cuando se cumplan las siguientes condiciones:

El texto sea igual a "Hola mundo"
El control Switch este habilitado (sea igual a true)

Juan Fernando Ramirez Pereyra

student•

QUE BIEN !!

Albert Jiménez

student•

Es genial!!!, muy enfocado al frontend de la aplicación. 😃

Giovanny Farto

student•

¿Qué es más recomendable, en cuanto a mantenimiento de la aplicación y legibilidad de código, definir estos trigger a nivel de XAML o crear eventos a nivel de C#?

Rubén Esparza

student•

En mi opinión, tiene más ventajas mantener los triggers a nivel de XAML debido a que son muy propios de la UI, creando así un desacoplamiento del code-behind, aparte, me parece más sencillo hacerlo en el XAML.

Esto hará mas sencillo el manejo de los Unit Tests, por ejemplo.

Santiago vasquez gomez

student•

Donde puedo encontrar la lista de triggers, para cada uno de los controles en xamarin?

Jose Garmendia

student•

Hola Santi, no hay una lista de triggers, los triggers se aplican a objetos. Acá te dejo un link de la documentación de Xamarin.Forms.

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

Abrazo.

Paul Alarcon

student•

si tengo un dBinding en el text del Entry como podría hacer la relación de que el campo no sea nulo y bloquee el botón ?

Rubén Esparza

student•

Podrías hacerlo con un DataTrigger apoyándote en la extensión de marcado {Binding} muy parecido a la forma en que lo realizó el profesor en esta lección. Otra forma sería con Comandos, en el método CanExecute podrás evaluar el o los campos de tu interés para cumplir con la validación necesaria.

Carlos Orjuela

student•

Un ejemplo de "Event Trigger":

code behind

   using Xamarin.Forms;

    public class ColorTriggerActionKeyListener : TriggerAction<Entry>
    {
        /// <summary>
        /// Accion del evento "ColorTriggerActionKeyListener": Cambia el color del texto digitado segun la 
        /// longitud del texto.
        /// </summary>
        /// <param name="sender">Referencia al control / objeto que generó el evento</param>
        protected override void Invoke(Entry sender)
        {
            Color[] color ={ Color.Red,
                       Color.Orange,
                       Color.Yellow,
                       Color.Green,
                       Color.Blue,
                       Color.Indigo,
                       Color.Violet };

            sender.TextColor = color[sender.Text.Length % color.Length];
        }
    }

Xaml

      xmlns:local="clr-namespace:AppTest.Vistas.EventosPersonalizados"


      <StackLayout VerticalOptions="Center">
                <Label Text="Do you see colors?"
                       VerticalOptions="Center"
                       HorizontalOptions="Center" />
                
                <Entry Placeholder="Type stuff here."
                       VerticalOptions="Center"
                       HorizontalOptions="Center"
                       BackgroundColor="Brown">
                    <!--Este disparador actúa cuando se invoca el evento “TextChanged”.  Una vez llamado el 
                        evento “TextChanged”, 
                        invoca el evento personalizado “ColorTriggerActionKeyListener”. -->
                    <Entry.Triggers>
                        <EventTrigger Event="TextChanged" >
                            <local:ColorTriggerActionKeyListener />
                        </EventTrigger>
                    </Entry.Triggers>
                </Entry>
            </StackLayout>