[Xamarin.Forms] Creando StateTriggers personalizados

StateTriggers

Recientemente hablábamos en el blog acerca de los StateTriggers añadidos en Xamarin.Forms. Los StateTriggers representan un conjunto de reglas que aplican VisualStates basados ciertas condiciones. Ahora, cada VisualState cuenta con una colección de StateTriggerBase que indican cuando el VisualState se debe aplicar. Si alguno de los triggers esta activo, el VisualState será aplicado.

Xamarin.Forms facilita ciertos StateTriggers para cubrir casos habituales como la orientación del dispositivos, cambios dinámicos en el tamaño de la ventana de la App, etc. Sin embargo, ¿no sería genial poder extender las posibilidades y crear StateTriggers personalizados?.

Creando StateTriggers personalizados

Podemos crear nuestros propios StateTriggers!. A continuación, vamos a aprender como crearlos. Para entender el concepto bien vamos a crear un trigger que nos permite actualizar la UI basándose en el estado de la conexión a internet.

Lo primero es comenzar creando una clase que here de StateTriggerBase:

public class NetworkConnectionStateTrigger : StateTriggerBase
{

}

Para aplicar un VisualState necesitamos establecer la propiedad IsActive a True. Podemos usar el método SetActive disponible en StateTriggerBase para ello. Necesitamos “algo” para poder gestionar que estados aplicar cuando hay conexión y cuando no, para ellos vamos a crear una BindableProperty:

public bool IsConnected
{
     get => (bool)GetValue(IsConnectedProperty);
     set => SetValue(IsConnectedProperty, value);
}

public static readonly BindableProperty IsConnectedProperty =
     BindableProperty.Create(nameof(IsConnected), typeof(bool), typeof(NetworkConnectionStateTrigger), false,
          propertyChanged: OnIsConnectedChanged);

Al cambiar la propiedad vamos a actualizar el valor de IsActive.

void UpdateState()
{
    var current = Connectivity.NetworkAccess;

    if (IsConnected)
         SetActive(current == NetworkAccess.Internet);
    else 
         SetActive(current != NetworkAccess.Internet);
}

Utilizamos las APIs disponibles para conocer el estado de la red disponibles en Xamarin.Essentials. Hasta este punto, tenemos el trigger casi completo (sencillo, ¿verdad?) pero, nos falta un detalle. Estará genial actualizar el valor de IsActive de forma automática al cambiar el estado de la red. Para ello, vamos a utilizar el evento ConnectivityChanged:

Connectivity.ConnectivityChanged += OnConnectivityChanged;

Todo preparado, vamos a ver como utilizar el StateTrigger creado.

Usar el StateTrigger creado

Lo primero que debemos hacer es declarar el namespace en XAML donde hemos creado el StateTrigger:

xmlns:statetriggers="clr-namespace:XamarinFormsStateTriggers"

Para usarlo:

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState 
                    x:Name="NoConnected">
                    <VisualState.StateTriggers> 
                        <statetriggers:NetworkConnectionStateTrigger IsConnected="False" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                         <Setter TargetName="InfoLabel" Property="Label.Text" 
                              Value="No Internet connection available" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState
                    x:Name="Connected">
                    <VisualState.StateTriggers>
                         <statetriggers:NetworkConnectionStateTrigger IsConnected="True" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Green" />
                    </VisualState.Setters>
               </VisualState>
          </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Label
          x:Name="InfoLabel"
          Text="Connected"
          HorizontalOptions="Center"
          VerticalOptions="Center" />
</Grid>

Hemos creado dos VisualState, uno que aplicaremos cuando hay conexión, y otro cuando no. Usamos NetworkConnectionStateTrigger con la propiedad creada, IsConnected para automáticamente aplicar VisualStates en base a la conexión.

El resultado:

NetworkConnectionStateTrigger

Puedes encontrar el código en GitHub:

Ver GitHub

Personalmente, pienso que la posibilidad de crear StateTriggers personalizados cubre un hueco interesante facilitando en gran medida opciones anteriormente posibles. Además, una vez creado el StateTrigger es reutilizable!. Y a ti, ¿qué te parecen?. Recuerda, puedes dejar cualquier feedback en los comentarios de la entrada.

Más información

Un pensamiento en “[Xamarin.Forms] Creando StateTriggers personalizados

  1. Muy buena explicacion, tengo poco dentro del mundo Xamarin y me ha encantado, no se si pudieras en algun momento, dar una explicacion del uso de Profiler en xamarin. Y de antemano, gracias por todo los aportes. Saludos

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 )

Google photo

Estás comentando usando tu cuenta de Google. 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 )

Conectando a %s