Articles → Silverlight → Ivalueconverter In Silverlight

Ivalueconverter In Silverlight






Software Requirement




  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




  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





Ivalueconverter Interface





Convert Method






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











Convertback Method






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











Convertparameters Attribute





Creation Of Date Convertor






  1. Create a class that implements IValueConvertor interface.
  2. Add methods Convert() and ConvertBack().
  3. Add logic for date conversion in both the methods.


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




<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>




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



Viewmodel Creation




  1. DateFormatProp – Gets and sets the current system date
  2. ClickMeButtonCommand – Invokes click event of 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


Picture showing the output of the IValueConverter in Silverlight
Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Friday, April 5, 2013

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250