Silverlight - making use of Converters

Having trouble figuring out how to bind the Visibility property of a UIElement to a boolean datasource? This is an example of when a Converter will come in handy.

Converters are there to reduce the logic written in the UI itself and to provide a mechanism to reuse logic. 

All converter classes need to implement the IValueConverter interface. This interface will enforce you to implement two methods: Convert and ConvertBack. 

Step 1: Create a converter class:

The converter class below will take in a boolean value and convert it into Visibility. Visible if the parameter is "true" and Visibility.Collapsed if false. One can specify an optional parameter, specifying whether to perform a negative boolean result (i.e., if the value is false, return visible) which is often a requirement:

 public class VisibilityConverter : IValueConverter

    {

        #region IValueConverter Members

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

        {

            bool mustReverse = false;

            if (parameter != null)

            {

                mustReverse = System.Convert.ToBoolean(parameter);

            }

            bool visibility = !mustReverse ? (bool)value : !(bool)value;

            return visibility ? Visibility.Visible : Visibility.Collapsed;

        }

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

        {

            Visibility visibility = (Visibility)value;

            bool mustReverse = false;

            if (parameter != null)

            {

                mustReverse = System.Convert.ToBoolean(parameter);

            }

            return (mustReverse ? visibility == Visibility.Visible : visibility == Visibility.Collapsed);

        }

        #endregion

    }

Step 2: Add the converter to your application resources

Once you have compiled your solution with the new converter class, you need to add your converter class to your application resource dictionary, usually located in the App.Xaml class. You will need to add the following:

  <Application.Resources>
        <ResourceDictionary>
            <DataStore1:DataStore x:Key="DataStore" d:IsDataSource="True" />
            <!--Global View Model Locator-->
            <vm:GlobalViewModelLocator x:Key="Locator" d:IsDataSource="True" />
            <namespace:VisibilityConverter x:Key="VisibilityConverter" />
        </ResourceDictionary>
    </Application.Resources>

Step 3: Make use of your converter!


Your converter is now ready to be used. You can use the converter in the following way:

<TextBlock x:Name="Video_Title" TextWrapping="NoWrap" Text="Video Title:" Visibility="{Binding MustShowTitle, Converter={StaticResource VisibilityConverter}, ConverterParameter=false}" FontFamily="Arial" Foreground="White" FontSize="14.667" Height="17" d:LayoutOverrides="Width" />