Implement value converters in WPF

May include but is not limited to: implementing custom value converters, implementing multivalue converters

Once I wrote a WPF blog management tool, and as all of us know, blog posts tend to have tags. These tags can tremendously facilitate navigation by letting you find related contents in a matter of seconds. But how would you work with them from a management point of view.

I bound my form to a Post object, which had a collection of TagPost objects (IEnumerable<TagPost>) a TagPost is just a switchtable between Posts and Tags with a unique ID. I decided to visualize tags as a comma-delimited list, like this:

WPF, 70-511, Exam

But I had a collection of TagPost, which didn’t look like this. How could I do this without messing my data binding code (which happened to be one statement)? The answer was using value converters.

A value converter is a class that implements the IValueConverter interface. It has two methods returning Object, Convert and ConvertBack, which take the following parameters (both of them):

  • Object value:  the value you’d like to convert or convert back.
  • Type targetType: the Type you’d like to convert to.
  • Object parameter: a parameter object for additional info on the conversion.
  • CultureInfo culture: the culture you’re working with; comes very handy in culture-related conversions.

In my case, I had a collection and I wanted a comma-delimited list. I wrote my IValueConverter class (to be honest, I didn’t write the ConvertBack method, because the updating of post was handled in a separate form), and added it as a static resource to the window. Then in the Binding section, I used the formatter. The code was roughly:

Content=”{Binding Path=TagPost”, Converter={StaticResource TagConverter}}”

And this did the job. As I said I didn’t implement the ConvertBack method, but if I would, it’d write back changes to the bound object as a charm.

We aren’t limited to bind to only one property (or value). There are multivalue converters as well. To do so, you’d need to use MultiBinding instead of Binding. MultiBinding can handle a collection of Bindings. The second thing to use is the IMultiValueConverter interface. It both has the Convert and ConvertBack methods, it even has the same set of parameters – the only difference is that it returns an array of objects, and it accepts an array of objects too as values (instead of a single object). That is the only difference – you can use the array with an index, like:

int currentValue = (int) values[0];

And the index number represents the position of the binding item in the MultiBinding. To stick with the previous example:

<…>
  <MultiBinding Converter=”MultiConverter”>
    <Binding Path=”Index” />
    <Binding Path=”Price”/>
  </MultiBinding>
</…>

So that’s all in this objective – just two interfaces with two methods each. Who couldn’t remember that?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s