65.9K
CodeProject is changing. Read more.
Home

Using an IValueConverter in a WPF MVVM application to select a UserControl/View

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.57/5 (7 votes)

Sep 5, 2012

CPOL

1 min read

viewsIcon

30635

downloadIcon

471

The IValueConverter can be used to select a View.

I answered a question a week or so ago, and was unable to point to an example of using an IValueConverter to select a View. I said I would publish something, so here it is.

One of the things a value converter can be used for is set the View. A good choice for the property to bind to is the ViewModel. The value converter can then set the View depending on the type of the ViewModel:

class ViewModelViewValueConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, 
    System.Globalization.CultureInfo culture)
  {
    if (value is UserControlViewModel1)
      return new View1();
    else if (value is UserControlViewModel2)
      return new View2();
    return null;
  }

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

The application I have created to show this concept is really basic. Many of the class are empty, including the UserControl ViewModel classes, and the each of the UserControls only contain some text and no extra code behind. The ViewModel for the main form contains only two DelegateCommand properties to change the ViewModel in the ViewModel property to one of the two classes. If you are familiar with binding in WPF, you will see that the MainViewModel inherits from INotifyPropertyChanged since I need to be able to inform the View when the ViewModel property is changed. The only other significant part of the solution is the binding. I used a ContentControl in the ViewModel and bind to its Content property:

<ContentControl Content="{Binding ViewModel, 
                   Converter={StaticResource ValueConverter}}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch" />