Currency UI in Xamarin.Forms


Normalmente cuando estamos trabajando con nuestro diseñador visualizando o apoyándolo con el flujo de la aplicación u algunos elementos que se requieren desarrollar de manera inmediata, a veces no pensamos en los componentes que tendremos que hacer para que realice lo que requiere el cliente en la interfaz de usuario, y es que si prestamos atención, existen diversos aspectos que podemos hacer para mejorar la experiencia del usuario al personalizar o mejorar controles, los cuales pueden estar en algún formulario y que sean relevantes ante su interacción con nuestra aplicación.

Siguiendo con el patrón de las publicaciones anteriores de mis compañeros con referencias hacia aplicaciones Bancarias, en este artículo veremos cómo generar un control que nos permita convertir el valor numérico de un Entry a un valor monetario.

Comencemos

1- Una vez creado nuestra solución, generemos las carpetas Classes, Converters y ViewModels en nuestro proyecto Portable, en donde agregaremos las clases relacionadas a las necesidades que soportara la aplicación.

2- Partamos por la carpeta Classes, en donde agregaremos una clase denominada: ObservableObject, la cual será la que detecte los cambios de propiedad en nuestro Entry, el código es:

3- En la carpeta de Converters generaremos la clase que tendrá toda la lógica para hacer la conversión, llamémosle: CurrencyConverter.

CurrencyConverter

Tomemos en cuenta que en lugar de extender nuestros modelos con más y más valores, los Converters nos permiten transformar unos valores a otros directamente desde XAML, ejemplo:

<Label Text=”{Binding Date}” />

4- Continuemos en el sendero de crear clases en las carpetas, en la última (ViewModels), deberemos de crear el ViewModel de la vista MainPage, entonces asignémosle el nombre de: MainPageVM y añadamos lo siguiente:

5- Agreguemos el Converter en la vista MainPage.xaml.

El Converter es una clase que hereda de la interfaz IValueConverter, se implementa el método Convert y ConvertBack. Para utilizar el converter se debe definir primero como recurso:

<ContentPage.Resources>

<ResourceDictionary>

<util:CurrencyConverter x:Key=”currencyConverter” />

</ResourceDictionary>

</ContentPage.Resources>

Y posteriormente, utilizar la palabra reservada Converter para acceder al mismo:

<Entry x:Name=”NumbertoMoney” Keyboard=”Numeric” Text=”{Binding NumbertoMoney, Converter={StaticResource currencyConverter}}”/>

NOTA: Se suelen utilizar los Converters para transformaciones más complejas.

XAML Completo:

6- Por último, en nuestro MainPage.xaml.cs invoquemos al ViewModel antes creado:

Con esto hemos terminado, guardemos, compilemos y probemos.

Resultado

CurrenyUI

Acerca de este articulo

Este es el artículo número 22 de #XamarinUIJuly, que es básicamente una serie de publicaciones de blog donde cada día de Julio un miembro de la comunidad de Xamarin publica un blog sobre Xamarin y las interfaces de usuario. Puedes ver más información aquí:XamarinUIJuly

Descarga el código completo desde mi GitHub.

¡Happy Coding!

 

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

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

WordPress.com.

Subir ↑

A %d blogueros les gusta esto: