A BooleanToVisibilityConverter for WinRT

15 November 2011 Diederik-Krols Metro, WinRT

This article describes a reversible boolean-to-visibility valueconverter for WinRT and Metro.

Silverlight and WPF share lots of common ground, but Silverlight is restricted by the (lack of) complexity in its host, and certainly by the size of its footprint. As a result, Silverlight is missing some essential functionality: there's quite a lot of classes that we need to manually add to each and every project. WinRT and its Metro GUI are hardly restricted by footprint size, but they're still a lot closer to Silverlight than to the -ok, somewhat bloated- WPF.

As a result, WinRT is also missing some of that essential functionality. One example is the lack of a BooleanToVisibilityConverter. Any application that applies the MVVM pattern definitely has some places where boolean properties of a viewmodel determine whether or not parts of the GUI will be displayed. This is typically done through a valueconverter that translates boolean values into a Visibility. WPF has such a converter, but these ten lines of code seem to be too heavy for Silverlight and WinRT Undecided.

Anyway, here's my version of a reversible converter for WinRT and Metro. It's based on Kent Boogaart's mother of all BooleanToVisibility converters:

namespace Mvvm
{
    using System;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Data;

    /// <summary>
    /// Converts a Boolean into a Visibility.
    /// </summary>
    public class BooleanToVisibilityConverter : IValueConverter
    {
        /// <summary>
        /// If set to True, conversion is reversed: True will become Collapsed.
        /// </summary>
        public bool IsReversed { get; set; }

        public object Convert(object value, string typeName, object parameter, string language)
        {
            var val = System.Convert.ToBoolean(value);
            if (this.IsReversed) 
            {
                val = !val;
            }

            if (val) 
            {
                return Visibility.Visible; 
            }

            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, string typeName, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

You probably need one of each (True-to-Visible and False-to-Visible), and use these converters in a lot of different places. So it'a good idea to define the following application level resources, in App.xaml:

<Application xmlns="..."
             xmlns:x="..."
             xmlns:mvvm="using:Mvvm"
             x:Class="...">
    <Application.Resources>
        <mvvm:BooleanToVisibilityConverter x:Key="TrueToVisibleConverter" />
        <mvvm:BooleanToVisibilityConverter x:Key="FalseToVisibleConverter" IsReversed="True" />
    </Application.Resources>
</Application>

 Your viewmodels just need to define a boolean property, and notify its changes (see my previous article for the change notification methods):

public bool IsDay
{
    get { return isDay; }
    set
    {
        isDay = value;
        this.PropertyChanged.Raise(this, o => o.IsDay);
    }
}

Now the views can easily bind to the property and let the converters do their stuff:

<Image Source="/Images/Day.jpg"
        Visibility="{Binding IsDay, Converter={StaticResource TrueToVisibleConverter}}" />

<Image Source="/Images/Night.jpg"
        Visibility="{Binding IsDay, Converter={StaticResource FalseToVisibleConverter}}" />

Here are some screenshots from the attached sample project:

 

And here's the whole code: U2UConsult.WinRT.Boolean2Visibility.zip (311.89 kb)

Enjoy!

Tags :