Xamarin.Forms - Converter In MVVM Using IValueConverter

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Value Converter

Use Converter instead of Trigger. Data bindings usually transfer data from a source property to a target property, and in some cases from the target property to the source property. This transfer is straightforward when the source and target properties are of the same type, or when one type can be converted to the other type through an implicit conversion. When that is not the case, a type conversion must take place.

Prerequisites

Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.

Create a new or existing Xamarin forms(.Net standard) Project. With Android and iOS Platform.

Create IntToBoolConverer

Now, Create an IntToBoolConverer class Derived from IValueConveter

I implemented IntToBoolConverter If value !=0 I returns true or else false. Whatever logic you need you can implement it here.

IntToBoolConverter.cs

public class IntToBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (int)value != 0;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? 1 : 0;
}
}

Setting up the User Interface

Here, Use IntToBoolConverter in your XAML.

Add Namespace

xmlns:converters="clr-namespace:XamarinStudy.Common.Converters"

Add Static Resource

<ContentPage.Resources>
<ResourceDictionary>
<converters:IntToBoolConverter x:Key="IntToBoolConverter"/>
</ResourceDictionary>
</ContentPage.Resources>

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:converters="clr-namespace:XamarinStudy.Common.Converters"
x:Class="XamarinStudy.MainPage" Title="Triggers">
</ContentPage.Behaviors>
<ContentPage.Resources>
<ResourceDictionary>
<converters:IntToBoolConverter x:Key="IntToBoolConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Margin="0,30,0,0">
<Image Source="banner.png"/>
<StackLayout x:Name="PersonList" BindableLayout.ItemsSource="{Binding Persons}" HorizontalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout >
<Label Margin="20,0" Text="{Binding Name}"/>
<Label Margin="20,0" Text="{Binding Age}"/>
<Button Text="Click Me!" IsEnabled="{Binding Count, Converter={StaticResource IntToBoolConverter}}"/>
<BoxView HeightRequest="1" BackgroundColor="Black"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.SelectPersonCommand,Source={x:Reference PersonList}}" CommandParameter="{Binding PersonId}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</ContentPage>

Click the "Play" button to try it out.

ValueToColorConveter

In this converter, I used to change color by given values. If value = 0 Red color else Green color.

ValueToColorConveter.cs

public class ValueToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (int)value == 0 ? Color.Red : Color.Green;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}

Whenever you need to write conditions in XAML use Converter. My suggestion is to use converter instead of Triggers

I hope you have understood how to use Converter in MVVM using IValueConverter in Xamarin.Forms.

Thanks for reading. Please share your comments and feedback. Happy Coding :)