[Xamarin.Forms] Novedades de la versión 1.3: Triggers

Xamarin LogoNovedades de Xamarin.Forms 1.3

Recientemente Xamarin lanzo la version 1.3 definitiva de Xamarin.Forms con una cantidad de novedades muy sustansiosa. Entre otras novedades contamos con:

  • Soporte para Estilos.
  • Soporte para Behaviors.
  • Soporte para Triggers (DatTriggers y MultiTriggers).
  • Nuevo miembro en las páginas, OnBackButtonPressed para gestionar la pulsación del botón físico atrás.
  • Mejoras en el DependencyService para añadir más flexibilidad a la hora de registrar dependencias.
  • Corrección de bugs.

En este artículo vamos a analizar todas las novedades relacionadas con el uso de triggers en Xamarin.Forms 1.3.

¿Te apuntas?

¿Qué son los Triggers?

En concepto de los Triggers es muy simple. Podríamos resumirlo en “cuando suceda esto lanza esta acción”. Nos permite realizar acciones bajo ciertas condiciones.

Con la llegada de Xamarin.Forms 1.3 nos llegan los Triggers con las siguientes posibilidades:

  • Property Triggers: Cuando una propiedad recibe un valor concreto, lanza la acción.
  • Event Triggers: Cuando se dispara cierto evento, se lanza la acción.
  • Data Triggers: Cuandio una expresión Binding recibe un valor concreto, lanza la acción.

Todo elemento VisualElement contiene una propiedad Triggers de tipo IList<TriggerBase>.

Para analizar todas las novedades en Triggers incluidas en Xamarin.Forms 1.3 vamos a crear un nuevo proyecto desde cero:

Nuevo proyecto Xamarin Forms

Nuevo proyecto Xamarin Forms

Tras crear el proyecto procedemos a actualizar a Xamarin.Forms 1.3. Para ello, vamos a gestionar los paquetes NuGet a nivel de solución.

NuGet Xamarin.Forms 1.3

NuGet Xamarin.Forms 1.3

NOTA: Si tenéis problemas al instalar Xamarin. 1.3 aseguráos de contar con la última versión de NuGet. Versiones antiguas de NuGet pueden ocasionar problemas en la instalación. Para asegurar tener la última versión debemos dirigirnos a Herramientas > Extensiones y Actualizaciones -> Instalados. Aqui podremos seleccionar NuGet e instalar la última versión.

Property Triggers o Triggers

Comenzaremos tratando los Property Triggers o sencillamente Triggers. Cuando una propiedad específica obtiene un valor (Value) en concreto, se aplican un conjunto de propiedades definidadas en la colección de  Setters.

Vamos a definir un simple botón:

<Button Text="Property Triggers" />

La apariencia visual del mismo:

Nuestro botón

Nuestro botón

Podemos definir en los recursos de la página un estilo para el botón:

<Style
     x:Key="PropertyTriggerStyle"
     TargetType="Button">
     <Style.Triggers>
       <Trigger
           Property="Button.IsFocused"
           Value="True"
           TargetType="Button">
         <Setter
             Property="Button.TextColor"
             Value="Red" />
       </Trigger>
     </Style.Triggers>
</Style>

En el estilo del botón hemos definido un Property Trigger que desencadenará el cambio del color de texto a rojo cuando la propiedad IsFocused sea verdadera, es decir, cuando el botón obtenga el foco.

La definición del botón quedaría:

<Button Style="{StaticResource PropertyTriggerStyle}" Text="Property Triggers" />

De modo que cuando hacemos clic sobre el botón y el mismo obtiene el foco, el color de texto pasa a rojo:

Nuestro botón con el texto en rojo al tener el foco

Nuestro botón con el texto en rojo al tener el foco

NOTA: En la propiedad Triggers podemos definir una colección de Triggers. Cada Trigger vendra definido por la propiedad y valor que desencadena la acción.

Event Triggers

Un Event Trigger se desencadena cuando un evento en concreto se dispara. Una vez desencadenado se ejecuta una clase que deriva de TriggerAction<T>.

Definimos un Slider muy sencillo, con valor 50 y un rango entre 0 y 100:

<Slider
     x:Name="SliderTriggers"
     Minimum="0"
     Maximum="100"
     Value="50">
</Slider>

El aspecto del mismo sería el siguiente:

Slider por defecto

Slider por defecto

Independientemente del valor, no tenemos color de fondo definido por lo que el aspecto sera el mismo. Podemos otorgar al usuario mayor feedback mostrando distintos colores segun el valor.

Creamos una clase que derive que TriggerAction<Slider>:

public class SliderColorTrigger : TriggerAction<Slider>
{
     protected override void Invoke(Slider sender)
     {
         var value = sender.Value;

         if (value < 40)
             sender.BackgroundColor = Color.Red;
         else if (value > 60)
             sender.BackgroundColor = Color.Green;
         else
             sender.BackgroundColor = Color.Black;
     }
}

En la clase sobreescribimos el método Invoke. Este método tenemos acceso al control por lo que podemos con suma facilidad verificar el valor del Slider y modificar su color de fondo e consecuencia.

Ahora llega el momento de usar el Event Trigger. Para ello, en XAML debemos añadir el namespace donde definimos el Event Trigger:

xmlns:triggers="clr-namespace:Xamarin_Triggers.Triggers;assembly=Xamarin_Triggers"

Añadimos nuestro SliderColorTrigger en la colección de Triggers del Slider:

<Slider
     x:Name="SliderTriggers"
     Minimum="0"
     Maximum="100"
     Value="50">
     <Slider.Triggers>
       <EventTrigger
           Event="ValueChanged">
         <triggers:SliderColorTrigger />
       </EventTrigger>
     </Slider.Triggers>
</Slider>

Si el valor es inferior a 40 el color de fondo pasa a ser rojo:

Por debajo de la mitad, fondo rojo

Por debajo de la mitad, fondo rojo

Mientras que si el valor es superior a 60, es color de fondo es verde:

Fondo verde para valores superiores

Fondo verde para valores superiores

Data Triggers

Muy similar a los Property Triggers pero en lugar de verificar que una propiedad en concreto tiene un valor o estado, la verificación es con Bindings. De esta forma, cuando un valor bindeado recibe algun valor en concreto, se desencadena una acción.

Veamos un sencillo ejemplo. Vamos a simular el clásico formulario básico de recuperación de contraseña en la que se le pide el nombre de usuario o coreo electrónico al usuario.

Definimos el control Entry que recibirá la información:

<Entry x:Name="EmailEntry"            
     Placeholder="Enter Email" />

Continuamos definiendo el botón que enviaría la información:

<Button      
     x:Name="ValidationButton" Text="Send"       
     FontSize="Large"            
     HorizontalOptions="Center">  
     <Button.Triggers>      
         <DataTrigger               
              TargetType="Button"            
              Binding="{Binding Source={x:Reference EmailEntry},
              Path=Text.Length}" Value="0">             
               <Setter Property="IsEnabled" Value="False" />  
          </DataTrigger>          
     </Button.Triggers>
</Button>

Analicemos el trozo de XAML anterior. Hemos definido un DataTrigger en el botón de modo que se analiza el valor la longitud del texto de la caja definida anteriormente. Si el valor es cero, se deshabilita el botón.

Sin tener contenido en la caja de texto, el estado del botón es deshabilitado:

Botón deshabilitado al no tener texto

Botón deshabilitado al no tener texto

Una vez escrita la información el botón se habilita:

Con texto, botón habilitado

Con texto, botón habilitado

NOTA: También tenemos disponibles MultiTriggers que nos permiten definir múltiples condiciones que se deben de dar para poder realizar los cambios definidos en el conjunto de Setters.

Podéis descargar el ejemplo realizado a continuación:

También podéis acceder al código fuente directamente en GitHub:

Ver GitHub

Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s