Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using Converters with Binding to Change Foreground Brush to Accent Brush

DZone's Guide to

Using Converters with Binding to Change Foreground Brush to Accent Brush

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}