Learn About Converters In WPF

What are Converters?

Converters are basically a medium to convert values in one form to another form.

Converters usually implement IValueConverter interface, which contain two methods, Convert() and ConvertBack().

Let’s dive into a real life example.

The requirement

We have a window with a checkbox and a button. We want the button to be disabled and the visibility collapsed once the checkbox is clicked.

So, how do we achieve this?

1. Create a BoolToVisibilityConverter that converts the bool value into a type of Visibility enum.
2. Create a InvertBoolConverter so that IsEnabled property of the button is inverse of that of the IsChecked property of the checkbox.
   
   
   
   
   

Sounding complex? Let’s have a look at the code. It is easy, trust me.

Create the BoolToVisibilityConverter class

using System;
usingGlobalization;
usingWindows;
usingWindows.Data;
namespace CSharpCorner {
    public class BoolToVisibilityConverter: IValueConverter {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
            return value != null && (bool) value ? Visibility.Collapsed : Visibility.Visible;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
            throw new NotImplementedException();
        }
    }
}

Why the above code? 

The above code converts ‘true’ value to Visibility Collapsed and ‘false’ value to Visibility Visible.

Create the InvertBoolConverter class

using System;
usingGlobalization;
usingWindows.Data;
namespace CSharpCorner {
    public class InvertBoolConverter: IValueConverter {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
            return value == null || !(bool) value;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
            throw new NotImplementedException();
        }
    }
}

Why the above code? 

The above code converts ‘true’ value to ‘false’ and a ‘false’ value to ‘true’.

This is done to align the IsChecked Property of the checkbox to the IsEnabled property of the button. Both are inversely proportional to one another. (If checkbox is checked, the button is disabled and vice versa).

Create the MainWindowViewModel:

usingComponentModel;
usingRuntime.CompilerServices;
namespace CSharpCorner {
    public class MainWindowViewModel: ViewModelBase {
        private bool isChecked;
        public MainWindowViewModel() {
            this.IsEnabled = true;
        }
        public bool IsChecked {
            get => isChecked;
            set {
                this.isChecked = value;
                this.OnPropertyChanged();
            }
        }
        public bool IsEnabled {
            get;
        }
    }
    public class ViewModelBase: INotifyPropertyChanged {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
            PropertyChanged ? .Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Create the XAML View

<Window x:Class="CSharpCorner.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:CSharpCorner" mc:Ignorable="d" Title="Using Converters" Height="450" Width="800">
    <!--Set the data context to the MainWindowViewModel-->
    <Window.DataContext>
        <local:MainWindowViewModel /> </Window.DataContext>
    <!--Define the converters in the resources-->
    <Window.Resources>
        <local:BoolToVisibilityConverter x:Key="BoolConverter" />
        <local:InvertBoolConverter x:Key="InvertBoolConverter" /> </Window.Resources>
    <Grid>
        <Grid.Resources>
            <!--Define the style and trigger conditions as to when you want them fired. -->
            <Style x:Key="ButtonStyle" TargetType="Button">
                <Style.Triggers><Trigger Property="IsEnabled" Value="False"><Setter Property="Visibility" Value="Collapsed"/></Trigger></Style.Triggers>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition /> </Grid.RowDefinitions>
        <Border Grid.Row="0" BorderBrush="Black" BorderThickness="1" Visibility="{Binding Path=IsChecked, Converter={StaticResource BoolConverter}}" />
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="500" />
                <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Back" IsEnabled="{Binding IsChecked, Converter={StaticResource InvertBoolConverter}}" Style="{StaticResource ButtonStyle}"></Button> </Grid>
        <CheckBox x:Name="checkBox" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Content="Disable Buttons" IsChecked="{Binding IsChecked, Mode=TwoWay}" /> </Grid>
</Window>

So, we managed to hide the button and the border when the button was in disabled state using Converters. Not that difficult, was it?