Quick Start Tutorial: Creating Universal Apps Via Xamarin: IValueConverter In Xaml - Part 14

Read the previous parts of the series here,

• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part One
• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part Two
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Label and Button - Part Three
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Device class - Part Four
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Device Class (cont.) - Part Five
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Entry Control - Part Six
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: StackLayout and Layout Options - Part Seven
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: DisplayAlert and DisplayActionSheet - Part Eight
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Date Picker, Time Picker and Activity Indicator - Part Nine
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: XAML And Resource Dictionary - Part Ten
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Style in XAML - Part Eleven
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Style in XAML (Cont.) - Part Twelve
  
• Quick Start tutorial: Creating Universal Apps via Xamarin: Binding in Xaml-Part Thirteen

This article explains about the IValueConverter concept in XAML.

IValueConverter

In the binding, sometimes the source object can’t directly assign to the target object. The source object is different in the target object. In the code behind the page, we can easily implement the conversion method. What about XAML? It is an IValueConverter interface.

IValueConverter Interface

The main purpose of this interface is to convert the source object to the target object (Oneway Binding) and the target to the source object (sometimes, we need target to have a source object in Twoway or OneWayToSource binding).

Flow of the IValueConverter

The target object does not directly bind the object. It goes to the convert function to do the conversion, based on the source type and assigns to the source object. The source object is also the same, but it calls the convertBack method.

Example: Xamarin button control

In the button, IsVisible is a Boolean property, which when set to be true is visible to GUI and false is hidden to make this more readable in the code behind the page like Visible or Hidden instead of true or false. In the background of Xaml, it needs to be only true or false.

Let us see how to implement this concept. 

1. Define the enum in the code behind the page,
   

   public enum Visibility
   {
      Hidden = 0,
      Visible = 1
   }

2. Create a variable for the visibility of enum.
   

   private Visibility _btnVisibility;
           public Visibility BtnVisibility
           {
               get { return _btnVisibility; }
               set
               {
                   _btnVisibility = value;
                   OnPropertyChanged();
               }
           }

3. Implement in the IValueConverter and Convert enum to convert the function (object direction target to the source object),
   

   class VisibilityBool : IValueConverter
       {
           public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
           {
               //Convert enum to bool
               var  visible = (Visibility) value;
               return visible != Visibility.Hidden;
           }
   
           public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
           {
               return null;
           }
       }

4. In the Xaml, define this VisibilityBool class
   
   xmlns:local="clr-namespace:PickerDemo;assembly=PickerDemo"
   
   
5. Add this class into the ResourceDictionary
   

   <ContentPage.Resources>
      <ResourceDictionary>
        <local:VisibilityBool x:Key="VisibleBool"/>
      </ResourceDictionary>
    </ContentPage.Resources>

6. Implement this binding with the converter function and define with the key (conversation class, which is defined in the resource dictionary) into the IsVisible property.
   

   <StackLayout>
       <Button x:Name="BtnValueConverter"
               Text="ValueConverter"
               IsVisible="{Binding BtnVisibility,Converter={StaticResource VisibleBool}}"
               VerticalOptions="Center"
               HorizontalOptions="Center">
       </Button>
     </StackLayout>

7. Code behind the page assigns the Visible or Hidden 
8. BtnVisibility = Visibility.Hidden; // Button control is Hidden.

That’s it, in all the code files we can use the enum visibility instead of true or false, and assigning to Xaml, internally it calls the convert function which changes as true or false based on enum and updates to Button IsVisible property.

Note: Don’t forget to assign the BindingContext property

Tip

To declare the IValueConverter class in Xaml into the resource dictionary, instead of directly assigning the class in the button IsVisible, make use of the property itself.

<Button x:Name="BtnValueConverter" Text="ValueConverter"
      <Button.IsVisible>
        <Binding Path="BtnVisibility">
          <Binding.Converter>
            <local:VisibilityBool /> <!--assign IValueConverter class here-->
          </Binding.Converter>
        </Binding>
      </Button.IsVisible>
 </Button>

Binding: ConverterParameter

This is a parameter used to pass the arguments of the convert and ConvertBack parameters

Example IValueConverter