Value Converter in Xamarin.Forms

Databind two control properties or view model property that have incompatible types / Validation, you need a piece of code in between, that converts the value from source to target type and back. This piece of code is called ValueConverter. A value converter is a class, that implements the interface IValueConverter with the two methods object Convert(object value) and object ConvertBack(object value).

In the following sample, I am getting value from Editor control and checking text length ,if text length less than 100 words means label color changed green or Red color .

Inherit IvalueConverter interface and add xamarin.Forms name space .

using System;
using System.Globalization;
using Xamarin.Forms;

namespace MVVMXamarin
{
class MaxLengthColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value != null)
{
int count = value.ToString().Length;
if (count > 100)
{
return Color.Red;
}
}
return Color.Green;
}

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

Implement Value Convert in Xaml:

In the following xaml page, added converter class within Resource Dictionary and added convert class key from control

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MVVMXamarin.ConvertDemo"
xmlns:local="clr-namespace:MVVMXamarin;assembly=MVVMXamarin">
<ContentPage.Resources>
<ResourceDictionary>
<local:MaxLengthColorConverter x:Key="cnmaxlength"></local:MaxLengthColorConverter>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Label Text="About You"></Label>
<Editor x:Name ="txtname"></Editor>
<Label BindingContext="{x:Reference Name=txtname}" Text="Please Say about you within 100 words" BackgroundColor="{Binding Path=Text,Converter={StaticResource cnmaxlength}}"
VerticalOptions="Center" HorizontalOptions="Center" />

</StackLayout>
</ContentPage>

Implement value Converter in C#:

In the following sample code shown, how add converter class into c# binding control .You can add your converter class into Setbinding method.

StackLayout layout = new StackLayout();
Label lbltitle = new Label();
lbltitle.Text = "About Me";
layout.Children.Add(lbltitle);
var editor = new Editor();
layout.Children.Add(editor);
var label = new Label();
label.Text = "Please Say about you within 100 words";
label.SetBinding(Label.BackgroundColorProperty, new Binding("BackgroundColor",mode:BindingMode.Default, source: editor,converter: new MaxLengthColorConverter(),stringFormat:null));
layout.Children.Add(label);
this.Content = layout;



I believe this article will help you for how to use IValueConverter

Download Source code :