Binding Value Converters en Xamarin Forms

¿Qué son los converters?

Los binding value converters, sirven para  transferir datos de una propiedad de origen a una propiedad de destino y, en algunos casos, de la propiedad de destino a la propiedad de origen. Si quereis más informacion, podeis ir al sguiente enlace:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

A continuacion, os voy a explicar como usarlo con un ejemplo.

Paso 1:

Debemos realizar es crearnos un nuevo proyecto en Visual Studio File->New->Project. debemos marcar la opción Cross-Platform y seleccionamos Mobile App.

En Location seleccionamos la ruta donde queremos guardar nuestro proyecto, se recomienda que sea una ruta corta para evitar posibles errores.

Después deberemos seleccionar un modelo, seleccionaremos Blank, marcamos las 3 plataformas(Android, iOS, Windows) y seleccionamos la opcion de .NET Standar.

Paso 2:

Una vez creado el proyecto creamos una carpeta llamada Converted y dentro de esta una clase llamada Descuento.cs.

Código clase Descuento.cs:

    public class Descuento : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                if (value.ToString() == "")
                {
                    return 0;
                }
                else
                {
                    int precio = int.Parse(value.ToString());
                    float preciodescuento = precio * 50 / 100;
                    return preciodescuento;
                }
            }
            else
            {
                return 0;
            }
        }

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

En esta clase realizaremos la funcionalidad del converter, en este caso realiza un descuento del 50% al precio original de un producto.

Lo primero que debemos hacer es el using al espacio de nombre Xamarin.Forms.

using Xamarin.Forms;

Nuestra clase Descuento, debe heredar de la interfaz IValueConverter,esta interfaz, nos obliga a definir los métodos de conversión de valores de forma bidireccional.

Sin embargo, en este ejemplo, solo utilizaremos el método Convert ya que nuestra aplicación no es bidireccional. Dentro de este método comprobamos si hay algún valor escrito y le aplicamos el descuento.

Paso 3:

Por último en nuestra pagina principal (MainPage):

<?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:local="clr-namespace:Converters"
             xmlns:converters="clr-namespace:Converters.Converted"
             x:Class="Converters.MainPage">
    <ContentPage.Resources>
        <converters:Descuento x:Key="converidordescuento"/>
    </ContentPage.Resources>
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="EJEMPLO CONVERTERS" 
           HorizontalOptions="Center" />
        <Label Text="Precio producto" HorizontalOptions="FillAndExpand"/>
        <Entry x:Name="precio"/>
        <Label Text="Descuento de un 50%:" HorizontalOptions="FillAndExpand"/>
        <Label BindingContext="{x:Reference precio}"
                   Text="{Binding Text, Converter={StaticResource converidordescuento}, StringFormat='El precio con el descuento es de {0}'}"/>
    </StackLayout>

</ContentPage>

En este código añadimos el espacio de nombre de nuestra carpeta Converted, para poder acceder a nuestra clase Descuento.cs, y le agregamos una clave con el nombre que deseemos(en mi caso converidordescuento).

Luego establecemos un name a nuestra caja de texto para poder hacer la referencia en el campo de texto. Por último en la propiedad text, cambiamos el formato para que escriba la frase personalizada mas el precio con el descuento aplicado.

Paso 4:

Ya podemos probar nuestra aplicación:

A la vez que vayamos introduciendo números el convertidor automáticamente cambiara el valor del precio con el descuento aplicado.

Autor: Marcos Molano Soriano

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2018-2019

Código: https://github.com/MarcosMolano/Converters