ValueConverter in WPF

If you want to bind two properties of different types together, you need to use a ValueConverter. A ValueConverter converts the value from a source type to a target type and back. For this we will need to inherit IValueConverter and implement 2 methods Convert and ConvertBack.
An example is to bind a boolean member to the Visibility property. Since the visibility is an enum value that can be Visible, Collapsed or Hidden, you need a value converter. Following is a code sample for the same.

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;

namespace ValueConverterExample
{
    class ValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
        {
            if (value is Boolean)
            {
                if ((bool)value)
                {
                    return Visibility.Visible.ToString();
                }
                else
                {
                    return Visibility.Hidden.ToString();
                }
            }

            return value;
        }

        enum Visibility
        {
            Visible ,
            Collapsed ,
            Hidden 
        }

        public object ConvertBack(object value, Type targetType, object parameter,
                              CultureInfo culture)
        {
            throw new NotImplementedException();
        }

    }
}

Further to this we will create a checkbox and stackpanel. On checking the checkbox we will enable a stackpanel and viceversa when checkbox is unchecked the stackpanel is disabled as shown below.

<Window x:Class="ObjectDataProvider.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:ObjectDataProvider"
        xmlns:convert="clr-namespace:ValueConverterExample"
        Title="ObjectDataProviderDemo" Height="350" Width="525">
    <Window.Resources>
        <ObjectDataProvider x:Key="obj"
                             ObjectType="{x:Type data:DataAccess}"
                             MethodName="GetEmp">
            <!--Here you can write your parameters for your Method-->
            <ObjectDataProvider.MethodParameters>
                <!--<system:Double>0</system:Double>
                <local:TempType>Celsius</local:TempType>
                <x:Type TypeName="VerticalAlignment" />-->
            </ObjectDataProvider.MethodParameters>

        </ObjectDataProvider>
        <DataTemplate x:Key="EmpDataTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" ></TextBlock>   
                <TextBlock Text=" "/>
                <TextBox Text="{Binding Age}" />
            </StackPanel>
        </DataTemplate>

    </Window.Resources>

    <Grid DataContext="{Binding Source={StaticResource obj}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="300"/>
        </Grid.RowDefinitions>
        <ComboBox Grid.Row="0"  ItemsSource="{Binding}" FontSize="30" ItemTemplate="{StaticResource EmpDataTemplate}"/>
        <!--<TextBox Grid.Row="1" Height="60" Text="{Binding Age}" FontSize="30"/>-->
        <TextBox Grid.Row="1" Height="60" Text="{Binding gender}" FontSize="30"/>

        <StackPanel Grid.Row="2">
            <StackPanel.Resources>
                <convert:ValueConverter x:Key="boolToVis" />
            </StackPanel.Resources>

            <CheckBox x:Name="chkShowDetails" Content="Show Details" />
            <StackPanel x:Name="detailsPanel" Background="RoyalBlue" 
                Visibility="{Binding IsChecked, ElementName=chkShowDetails, Converter={StaticResource boolToVis}}" Height="100" Width="100">
            </StackPanel>
        </StackPanel>

    </Grid>
</Window>

Hope you have enjoyed this..

Leave a comment