Articles → Silverlight → IValueConverter in Silverlight

IValueConverter in Silverlight

In this tutorial I will explain about IValueConverter interface. This topic contains following sections

   1. Software requirement.

   2. Prerequisite knowledge

   3. Binding source Vs binding target.

   4. IValueConverter interface.

   5. Convert method.

   6. ConvertBack method.

   7. ConvertParameters attribute.

   8. Creation of date convertor

   9. View creation.

   10. Viewmodel creation.

   11. Output.

Software requirement

Before you start reading this tutorial you should make sure that

   1. Visual studio 2008(or higher version) is installed on your machine

   2. Silverlight (4 or 5) runtime is installed on your machine

   3. Silverlight plug-in is installed on your machine

Prerequisite knowledge

Before you go ahead, it is required that you should know

   1. How to create a Silverlight application?

   2. What is MVVM pattern?

   3. What is a XAML file?

   4. How to bind data in XAML file?

   5. What is the difference between one way and two way binding?

Binding source Vs binding target

Binding source refers to an object from where you get data, it can be an xml object, an ado.net object etc. Binding target refers to an object which is bound to data. For example if data grid is bound to data table, then data table is a binding source and data grid is the binding target.

IValueConverter interface

IValueConverter interface is for implementing value converter for Silverlight applications. This interface can only be used if the application is using MVVM design pattern.

Convert method

This method modifies the source data before passing it to the target object.

Syntax

public object Convert(object value, Type targetType, object parameter,System.Globalization.CultureInfo culture)

value - source data that is passed to the target.

targetType - data type expected by the target

parameter – optional parameter used in converter logic

culture – language of conversion.

ConvertBack method

This method modifies the target data before passing it to the source object.

Syntax

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

value - target data that is passed to the source.

targetType - data type expected by the source

parameter – optional parameter used in converter logic

culture – language of conversion.

ConvertParameters attribute

The purpose of this attribute is to pass parameter in Convert() and ConvertBack() method.

Creation of date convertor

Let us work on an example. Consider a scenario in which we have to convert the date into ddd, MMM d, yyyy format.

For implementing that we will follow following steps

   1. Create a class that implements IValueConvertor interface.

   2. Add methods Convert() and ConvertBack().

   3. Add logic for date conversion in both the methods.

See the code section below

public class DateConvertor: IValueConverter {
  public object Convert(object value, Type targetType, object parameter,
    System.Globalization.CultureInfo culture) {
    object returnValue = new object();
    if (value != null) {
      returnValue = String.Format("{0:ddd, MMM d, yyyy}", value);
    } else {
      returnValue = String.Format("{0:ddd, MMM d, yyyy}", DateTime.Now);
    }
    return returnValue;
  }

  public object ConvertBack(object value, Type targetType,
    object parameter, System.Globalization.CultureInfo culture) {
    object returnValue = new object();
    if (value != null) {
      DateTime dt = DateTime.MinValue;
      if (DateTime.TryParse(value.ToString(), out dt)) {
        returnValue = String.Format("{0:ddd, MMM d, yyyy}", value);
      } else {
        returnValue = String.Format("{0:ddd, MMM d, yyyy}", DateTime.Now);
      }
    } else {
      returnValue = String.Format("{0:ddd, MMM d, yyyy}", DateTime.Now);
    }

    return returnValue;
  }
}

View creation

Once the converter is created we will use it in a view. So first of all create a view. See the code section below.

<UserControl x:Class="ConverterSample"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="clr-namespace:MyConvertorClass">
	<UserControl.Resources>
		<local:ConverterSampleViewModel x:Key="viewmodel"></local:ConverterSampleViewModel>
		<local:DateConvertor x:Key="MyConvertor"></local:DateConvertor>
	</UserControl.Resources>
	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource viewmodel}}">
		<Grid.RowDefinitions>
			<RowDefinition></RowDefinition>
			<RowDefinition></RowDefinition>
		</Grid.RowDefinitions>
		<Button Content="Click Me" Grid.Row="1"  Command="{Binding ClickMeButtonCommand}" Height="50" Width="100"/>
		<TextBox Width="200" Height="50"
                 Text="{Binding DateFormatProp,Converter={StaticResource MyConvertor},Mode=TwoWay}"/>
	</Grid>
</UserControl>

In this section we have 2 controls a button and a textbox. Here we are using convertor in the textbox. See the code section

Text="{Binding DateFormatProp,Converter={StaticResource MyConvertor}

Viewmodel creation

ViewModel is class which communicates and updates UI elements in view. In this viewmodel we have defined 2 properties

1. DateFormatProp – Gets and sets the current system date

2. ClickMeButtonCommand – Invokes click event of the button

In the constructor we are initializing the ClickMeButtonCommand property (i.e. registering click event for the button)

Public class ConverterSampleViewModel: ViewModelBase {
  private DateTime _DateFormatProp;
  private readonly ICommand _clickMeButtonCommand;

  public ConverterSampleViewModel() {
    this._clickMeButtonCommand = new DelegateCommand(this.ClickMeButtonClickEvent);

  }

  public void ClickMeButtonClickEvent() {
    //  Add a time
    DateFormatProp = DateTime.Now;
  }

  public DateTime DateFormatProp {
    get {
      return _DateFormatProp;
    }
    set {
      _DateFormatProp = value;
      OnPropertyChanged("DateFormatProp");
    }
  }

  public ICommand ClickMeButtonCommand {
    get {
      return this._clickMeButtonCommand;
    }
  }
}

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, April 5, 2013

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250