Novedades 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:
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.
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:
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:
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:
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:
Mientras que si el valor es superior a 60, es color de fondo es verde:
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:
Una vez escrita la información el botón se habilita:
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:
Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.
Más información
- Xamarin: Xamarin.Forms 1.3.0 Released
- Xamarin: Updating Existing Xamarin.Forms Apps
- NuGet: Xamarin.Forms 1.3.0.6292
- Blog Falafel: Triggers in Xamarin.Forms 1.3