Using Converters with Binding to Change Foreground Brush to Accent Brush

Windows Phone has a concept of accent brush – a special color that can be changed in system settings which applications can use to single-out items of interest.

It is easy to apply accent brush to those controls for which we know in advance they will need to be singled-out, but things get tricky with dynamic data. For example, if only some items in a list need to be accented, like favorites, you need to change foreground just for those items. If you are using MVVM, you will probably have some bindable property named IsFavorite or IsImportant.

But how do you get a brush from some boolean property? Using converters. The converter will take the bool value and decide which brush to return depending on the value. Since you want to apply accent color only to those items that satisfy some condition, if the input value is true, you will get accent brush. Otherwise, you will get the default foreground brush.

Here is the complete code for the converter:

public class FavoriteToAccentConverter
    : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Application.Current.Resources[(bool)value ? "PhoneAccentBrush" : "PhoneForegroundBrush"] as Brush;
    }

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

The usage is quite simple, here is an example:

<TextBlock Text="{Binding Title}"
		   TextWrapping="Wrap"
		   Style="{StaticResource PhoneTextNormalStyle}"
		   Foreground="{Binding IsFavorite,
		                Converter={StaticResource FavoriteToAccentConverter}}"/>

We can extract both the accent and default brush from system resources. But what if you want to specify different default brush? You can converter’s parameter for that. Slightly modify the converter code to this:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
	if ((bool)value)
		return Application.Current.Resources["PhoneAccentBrush"] as Brush;
	else if (parameter is Brush)
		return parameter as Brush;
	else
		return Application.Current.Resources["PhoneForegroundBrush"] as Brush;
}

You can define your brush as a resource and simply use it as a static resource:

<TextBlock Text="{Binding Title}"
		   TextWrapping="Wrap"
		   Style="{StaticResource PhoneTextNormalStyle}"
		   Foreground="{Binding IsFavorite,
		                Converter={StaticResource FavoriteToAccentConverter},
						ConverterParameter={StaticResource DefaultBrush}}" />

This version is useful when you use custom theme or you want to alternate between two colors that depend on the binding.