wolfgang ziegler

„make stuff and blog about it“

BooleanToBrushConverter

July 28, 2012
.NET C# Windows Phone Windows Phone 7 WP7 Silverlight WPF MVVM

A common use case in Windows Phone (or generally Silverlight / WPF) development is having to change a UI element’s color (background and/or foreground) depending on a Boolean state in your ViewModel. The most common case for that is possibly an active / inactive state of a ViewModel which should reflect in the user interface.

In fact, I encountered this use case that often, that I decided to cover it in a custom converter class called BooleanToBrushConverter, which implements this functionality. This converter class is intended to be used whenever a Boolean property is data bound to some UI element’s brush. BooleanToBrushConverter exposes two dependency properties TrueBrush and FalseBrush and by providing values for these properties, the Boolean values true and false are mapped to Brush objects in the user interface accordingly. Everything fully declarative in my XAML file without a single line of C# code.

The first code block show the implementation of the converter class.

The Converter Class
public class BooleanToBrushConverter : DependencyObject, IValueConverter {   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)   {     if (value is bool && (bool)value)     {       return TrueBrush;     }     return FalseBrush;   }   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)   {     throw new NotImplementedException();   }   public Brush FalseBrush   {     get { return (Brush)GetValue(FalseBrushProperty); }     set { SetValue(FalseBrushProperty, value); }   }   public static readonly DependencyProperty FalseBrushProperty =     DependencyProperty.Register("FalseBrush", typeof(Brush), typeof(BooleanToBrushConverter), new PropertyMetadata(null));   public Brush TrueBrush   {     get { return (Brush)GetValue(TrueBrushProperty); }     set { SetValue(TrueBrushProperty, value); }   }   public static readonly DependencyProperty TrueBrushProperty =     DependencyProperty.Register("TrueBrush", typeof(Brush), typeof(BooleanToBrushConverter), new PropertyMetadata(null)); }

The next code snippet shows how an instance of this BooleanToBrushConverter is declared in the Resources section of a user interface element. This snippet uses an existing resource for the TrueBrush (i.e. the brush that is mapped to the Boolean true value) and declares a new gray SolidColorBrush for the FalseBrush (i.e. the brush that is mapped to the Boolean false value) to demonstrate both concepts.

Declaring the Converter
<phone:PhoneApplicationPage.Resources>   <u:BooleanToBrushConverter x:Key="booleanToBrushConverter"                              TrueBrush="{StaticResource PhoneAccentBrush}">     <u:BooleanToBrushConverter.FalseBrush>       <SolidColorBrush Color="Gray" />     </u:BooleanToBrushConverter.FalseBrush>   </u:BooleanToBrushConverter> </phone:PhoneApplicationPage.Resources>

The last code snippet shows how to apply this converter class in a Binding for a Border element which will get different background colors depending on the IsAvailable property in its bound ViewModel.

Using the converter
<Border Width="96"         Height="96"         Margin="5"         Background="{Binding Path=IsAvailable,                              Converter={StaticResource booleanToBrushConverter}}"/>