Usando Value Converters en Xamarin Forms

*Introducción

Cuando estamos trabajando con llamada de servicios web en nuestra aplicación y devuelve un valor de estado que necesita ser visualizado de manera significativa para el usuario. Por ejemplo, se puede mostrar un "Activo" en lugar de "1" y "Inactivo" en lugar de "0". Del mismo modo podemos visualizar el texto en un color "rojo o verde", dependiendo de la indicación de estado. Estas son algunas de las situaciones que se consideren el uso de convertidores de valores "Value Converters". Los convertidores de valores pueden escribirse una vez y volver a utilizar durante todo el proyecto -por lo que su beneficio es la reutilización de código.

Implementar una clase "Value Converter", necesitamos implementar la interfaz "IValueConverter" que hace conversión bidireccional entre el valor de los tipos.

Esta interfaz tiene 2 métodos:

  1. Convert: para convertir el valor del enlace de origen al valor del enlace destino ( "1" a "Activo" o "0" a "Inactivo").
  2. ConvertBack: para convertir el valor del enlace destino al valor del enlace de origen ("Activo" a "1" o "Inactivo" a "0")

Ambos métodos devuelven un objeto que da convertidores de valores la capacidad de cambiar el tipo de datos. La mayoría de las veces, sólo se necesitará implementar método "Convert" solamente.

Para este post, voy a caminar a través de un convertidor de valores que convertirá "sí" y "no" a "verdadero" y "falso", respectivamente. Esto es lo que se verá así:

imageimage

*Creando el Proyecto.

image

  1. Seleccionar "Cross-Platform"
  2. Selección de una plantilla a utilizar "Blank App (Xamarin.Forms.Portable"
  3. Nombre de la aplicación en este caso se llamara "AppConvertersXF"
  4. Presionar el botón de "Aceptar" para crear el proyecto

*Creando el código

Creamos una carpeta en el proyecto portable con el nombre de "ValueConverters" dentro de esa carpeta crearemos una clase llamada "TextToBoolConverter" y enseguida agregamos el siguiente código:

using System;
using System.Globalization;
using Xamarin.Forms;

namespace AppConvertersXF.ValueConverters
{
    class TextToBoolConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool result = false;
            if (value != null)
            {
                switch (value.ToString().ToLower())
                {
                    case "activo":
                        result = true;
                        break;
                    case "inactivo":
                        result = false;
                        break;
                }
            }

            return result;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string result = "";
            if (value is bool)
            {
                if ((bool) value == true)
                {
                    result = "activo";
                }
                else
                {
                    result = "inactivo";
                }
            }
            return result;
        }
    }
}

*Creando pagina para probar el código generado.

Agregaremos una pagina de contenido para esto Clic derecho en el proyecto portable > AGREGAR > NUEVO ELEMENTO

image

  1. Seleccionar "Cross-Platform"
  2. Selección de una plantilla a utilizar "Forms Xaml Page"
  3. Nombre de la plantilla en este caso se llamara "HomePage"
  4. Presionar el botón de "Aceptar" para crear la pagina que contendrá XAML

El valor en el cuadro de texto afectará al "toggle switch" y el "toggle switch" afectará el valor en el cuadro de texto. Cuando escribimos "activo" o "inactivo" en el cuadro de texto, utilizará IValueConverter.Convert para convertir el valor del cuadro de texto a verdadero o falso que se encienda o apague el "toggle switch". Del mismo modo, cuando nos volvemos o desactivar el "toggle switch", que utilizará para convertir la propiedad IValueConverter.ConvertBack la propiedad IsToggled del "toggle switch" en "activo" o "inactivo", que va a cambiar el texto en el cuadro de texto.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Conv="clr-namespace:AppConvertersXF.ValueConverters;assembly=AppConvertersXF"
             x:Class="AppConvertersXF.HomePage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Conv:TextToBoolConverter x:Key="TextBoolConverter"/>
    </ResourceDictionary>
  </ContentPage.Resources>

  <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Center" Spacing="20">

    <Label Text=" Interfaz IValueConverter.Convert (Texto a Bool) Interface" FontSize="Small" TextColor="Fuchsia"></Label>
    <Entry x:Name="EntStatus" WidthRequest="100"  TextColor="Yellow" />
    
    <Label Text="Interfaz IValueConverter.ConvertBack (Bool a texto)" FontSize="Small" TextColor="Fuchsia"></Label>
    <Switch BindingContext="{x:Reference Name=EntStatus}" IsToggled="{Binding Text, Converter={StaticResource TextBoolConverter}}" />

  </StackLayout>
</ContentPage>

*Otro ejemplo

Cuando se escriba el nombre de un color en un campo de texto "Entry" cambie de color de fondo de un "Label"

en la carpeta ya creada en el proyecto portable "ValueConverters" dentro de esa carpeta crearemos una clase llamada "TextToColorConverter" y enseguida agregamos el siguiente código:

using System;
using System.Globalization;
using Xamarin.Forms;

namespace AppConvertersXF.ValueConverters
{
    class TextToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Color clr = Color.Teal;

            if (value != null)
            {
                switch (value.ToString().ToLower())
                {
                    case "rojo":
                        clr = Color.Red;
                        break;
                    case "azul":
                        clr = Color.Blue;
                        break;
                    case "verde":
                        clr = Color.Green;
                        break;
                }
            }

            return clr;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Agregaremos <Conv:TextToColorConverter x:Key="TextClrConverter"/> en nuestro "ResourceDiccionary" de nuestra pagina, así como un "Label" y un "Entry", ahora nuestra pagina "HomePage" tendrá el siguiente código XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Conv="clr-namespace:AppConvertersXF.ValueConverters;assembly=AppConvertersXF"
             x:Class="AppConvertersXF.HomePage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Conv:TextToBoolConverter x:Key="TextBoolConverter"/>
      <Conv:TextToColorConverter x:Key="TextClrConverter" />
    </ResourceDictionary>
  </ContentPage.Resources>

  <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Center" Spacing="20">

    <Label Text=" Interfaz IValueConverter.Convert (Texto a Bool)" FontSize="Small" TextColor="Fuchsia"></Label>
    <Entry x:Name="EntStatus" WidthRequest="100"  TextColor="Yellow" />
    
    <Label Text="Interfaz IValueConverter.ConvertBack (Bool a texto)" FontSize="Small" TextColor="Fuchsia"></Label>
    <Switch BindingContext="{x:Reference Name=EntStatus}" IsToggled="{Binding Text, Converter={StaticResource TextBoolConverter}}" />

    <Label Text="Nombre de Color" BindingContext="{x:Reference Name=entColor}" BackgroundColor="{Binding Text, Converter={StaticResource TextClrConverter}}" FontSize="Small"></Label>
    <Entry x:Name="entColor"  WidthRequest="100" />
  </StackLayout>
</ContentPage>

El resultado será el siguiente:

imageimageimage

One thought on “Usando Value Converters en Xamarin Forms

Deja un comentario