CurrencyConverter UI in Xamarin.Forms
Tags: xamarinforms, xamarindevelopment, ui
Published: 2022-05-20 16:18:03

---
title: CurrencyConverter UI in Xamarin.Forms
published: true
date: 2019-08-06 16:57:51 UTC
tags: xamarinforms,xamarindevelopment,ui
canonical_url: 
---

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](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:

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

[https://gist.github.com/LucioMSP/8afa5afdeb3f5c190144e3a229ff5b72](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](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:

<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** :

[https://gist.github.com/LucioMSP/a9bbee13a1a3d2bfc0f4fdca6429d322](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](https://gist.github.com/LucioMSP/f6e312ced7d49eec7e23bfa054377ff2)

Con esto hemos terminado, guardemos, compilemos y probemos.

**Resultado**

![](https://cdn-images-1.medium.com/max/378/1*KNEIi5tf-e__zARNljhBwA.gif)

**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í](https://www.thewissen.io/introducing-xamarin-ui-july/#schedule):

![](https://cdn-images-1.medium.com/max/512/1*RLukTdWIzenePhdNzzv2rw.png)

Descarga el código completo desde mi [GitHub](https://github.com/LucioMSP/Xamarin.Forms.Examples/tree/master/CurrencyUISample).

¡Happy Coding!

* * *