Xamarin.Forms: Our (my) first very simple IValueConverter implementation

Wednesday, May 17, 2017



In this tutorial I will make very simple implementation of IValueConverter in Xamarin.Forms. Till this day I was avoiding the IValueConverter for no reason but I hope after this blog post you will also use it more frequently. The title for this blog post can be also: Very simple usage of IValueConverter in Xamarin.Forms.

Quick note: I am sure that there is a lot of great resources on the web about Xamarin.Forms and IValueConverter but my mission is to make this blog post with very simple use case in order to understand it.

In this tutorial I will make simple app that will have two labels, four buttons and user will chose between four season to answer question: "I was born in the:" and when user clicks on one of the buttons background color will be changed.

That is not something special but BackgroundColor property of StackLayout will be binding to the property that is not type of Color but instead it will be a String in our ViewModel and this is possible by using IValueConverter.

So let't get started.

Create new Xamarin.Forms app and follow these steps:

Create new folder called ViewModels and inside of ViewModel called MainPageViewModel add these properties:

As you can see we have one string property called Season and four ICommand properties which our buttons will be binding for click event. Also we have four methods which will be called when some of the buttons are clicked.

When one of the button is clicked for example Winter button the property "Season" will be set to the value of Winter.

And the UI XAML code for this view will be this:
As you can see very simple UI with bindings to the ViewModel, and of course in constructor of our code behind we need to set binding context to the ViewModel:
Now if we run this app we will get this this result: You will click one some of the buttons and the value of second label will be changed, because after you click Command at ViewModel is triggered and the value of Season property is changed and label from MainPage.xaml is binding to it.

If you are no familiar with MVVM and binding in Xamarin.Forms please take a look at some of my previous blog posts:

Now when we have our mvvm binding working properly now we need to make background color to change depending on what you are selected as a season.

For this kind of functionality we need IValueConverter, to set background color of stack layout by binding to the Season property. As you know we can not bind BackgroundColor to the String type, that does not make sense. So we can implement some logic inside of IValueConverter to get Color type based on the Season property.

Using IValueConverter we don't need to make another one property for background in ViewModel and that is great. using existing property and with some logic around it we can achieve some kind of conversion.

Create new folder called Converters, you don't need to make it but it is a good practice to keep your code and classes/files in project organized, and add new class called ColorConverter and make it to inherit from IValueConverter, after Visual Studio offer you help add namespace and  implement that interface and you will get two methods.

  • Convert .. and 
  • ConvertBack
For this tutorial we will use Convert methods and the MSDN documentation for this method is:

  • value - The value produced by the binding source.
  • targetType - The type of the binding target property.
  • parameter - The converter parameter to use.
  • culture - The culture to use in the converter.
... and our ColorConverter will look like this:


As you can see we are using the Convert method and value that we are binding to, in this case property Season in our ViewModel we are taking and casting as string, and using if statement we are checking what is user choice.

Depending on what season user is selected, convert method will return the type of Color with some Hex value.

Our IValueConverter is ready, only thing that we need to do is to use it in the XAML.

First step is to set namespace in the ContentPage definition:
After that we need declare our ColorConverter in ContentPage resource part like this:

Using IValueConverter like this property that we are binding to will be "value" parameter inside our Convert method in ColorConverter.

Now we can use our IValueConverter at StackLayout property for BackgroundColor like this:
As you can see for BackgroundColor of StackLayout we are binding to the Season property in ViewModel which is a type of string, but with using IValueConverter that value is "converted" with our custom logic inside of Convert method and we are returning the Color type which is a valid type for BackgroundColor... using same approach we can use this for many other scenarios when you want to convert some type of input or data to another one and use it in the XAML.

This is how our MainPage.xaml looks now:
... and if we run our app we will get this kind of result:

.

Full project and source code is available on the my GitHub page at this URL: https://github.com/almirvuk/IValueConverter_Xamarin.Forms

I hope this tutorial/blog post was helpful for you, and that you understand the basic and simple usage of IValueConverter, and in the future I am sure that I will use it more often because it simplifies some things.

Share it if you like it.

Best regards! Almir Vuk | https://almirvuk.blogspot.com

Tags: , ,

You Might Also Like

0 comments