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 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 .

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 :







0 Comments

Featured Post

How to learn Azure without paid subscription

Microsoft Azure is a cloud service that is constantly expanding to help your organization meet business challenges. You can build, manage d...

Subscribe to the FREE Weekly Newsletter to receive all the latest Microsoft Azure, AI, Xamarin

Popular Posts