Converter for showing/hiding Silverlight/WP7 GUI elements with boolean model values

Typically, when you are writing Silverlight or Windows Phone 7 applications using the MVVM pattern, your viewmodels expose boolean values indicating something is going on – for instance, your background thread is loading data and thus you want to display a progress bar. For some reason the designers of XAML choose the Visibility property of a GUI element to be of type “Visibility”, an enum with values “Visible” and “Collapsed”.

Anyway, you could of course make your viewmodel expose properties of type Visibility but as an architect I would call that “bad form”. It’s so much easier to create a simple converter for this:

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace LocalJoost.Converters
{
  public class VisibilityConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, 
                   CultureInfo culture)
    {
      if (value != null && value is bool && parameter != null)
      {
        var bValue = (bool) value;
        var visibility = (Visibility)Enum.Parse(
             typeof (Visibility), parameter.ToString(),true);
        if (bValue) return visibility;
        return visibility == 
           Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
      }
      
      return null;
    }

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

This convertor assumes a boolean input value and a parameter of type Visibility. If the input value is true, it returns the value in the parameter, if it is false, it returns the opposite. So it’s basically a converter that converts one type of boolean in another, with the possibility to specify what is true and what is false ;-)

Typical usage snippet:

Visibility="{Binding IsDownloading, Converter={StaticResource VisibilityConverter}, ConverterParameter=Visible}"

which says that if the “IsDownloading” property of the model is true, the GUI object in case must be visible. Since I actually used this snippet on a Windows Phone 7 ProgressBar, this makes perfect sense.