Value Converter in Xamarin.Forms

Introduction:

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 this article, I will share about IValueConverter in xamarin.forms application

Create New Xamarin Forms Application:

Let's start with creating a new Xamarin Forms Project in Visual Studio.

Open Run - Type Devenev.Exe and enter - New Project (Ctrl+Shift+N) - select Blank Xaml App (Xamarin.Forms Portable) template.

You can refer my previous article for create new xamarin forms application from here - http://www.c-sharpcorner.com/article/how-to-create-first-xamarin-form-application/

Create New Value Convert Class:

You can create new Value Converter class now, Right Click Project > Add New Item > Add Class File, Name as “ MaxLengthConverter” .

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 .

1. using System;
2. using System.Globalization;
3. using Xamarin.Forms;
5. namespace MVVMXamarin
6. {
7.    class MaxLengthColorConverter : IValueConverter
8.    {
9.        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
10.        {
11.            if (value != null)
12.            {
13.                int count = value.ToString().Length;
14.                if (count > 100)
15.                {
16.                    return Color.Red;
18.                }
19.            }
20.            return Color.Green;
21.        }
23.        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
24.        {
25.            throw new NotImplementedException();
26.        }
27.    }
28. }

Implement Value Convert in Xaml:

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

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

1. StackLayout layout = new StackLayout();
2. Label lbltitle = new Label();
3. lbltitle.Text = "About Me";
4. layout.Children.Add(lbltitle);
5. var editor = new Editor();
6. layout.Children.Add(editor);
7. var label = new Label();
8. label.Text = "Please Say about you within 100 words";
9. label.SetBinding(Label.BackgroundColorProperty, new Binding("BackgroundColor",mode:BindingMode.Default, source: editor,converter: new MaxLengthColorConverter(),stringFormat:null));
10. layout.Children.Add(label);
11. this.Content = layout;

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

Download Source code :