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:
https://gist.github.com/LucioMSP/188a756f6944efdb1ef80db3953b9b39
3- En la carpeta de Converters generaremos la clase que tendrá toda la lógica para hacer la conversión, llamémosle: 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:
https://gist.github.com/LucioMSP/8afa5afdeb3f5c190144e3a229ff5b72
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:
https://gist.github.com/LucioMSP/d2b56163a3975a6f71c3b9bc41da2f4e
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:
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 :
https://gist.github.com/LucioMSP/a9bbee13a1a3d2bfc0f4fdca6429d322
6- Por último, en nuestro MainPage.xaml.cs invoquemos al ViewModel antes creado:
https://gist.github.com/LucioMSP/f6e312ced7d49eec7e23bfa054377ff2
Con esto hemos terminado, guardemos, compilemos y probemos.
Resultado
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í:
Descarga el código completo desde mi GitHub.
¡Happy Coding!
Top comments (0)