Custom Value Converters in XAML

This one is about custom value converters for XAML in Window Phone, Windows Store apps or anywhere XAML is used. So now you might ask, Dude why the hell we need value converters since XAML has many and got our backs? Well answer to that is. Even though XAML provides us with many converters by default we might need to create our own. :D For an example, if you create a custom user control that display an image in a cool way (let’s say in a different shape coz normally an image is displayed as a square) you have to provide the path to the image in XAML and you have no way of providing it as a URI in XAML. So must be a string right? Well then you can have a custom converter that takes that string and convert it to a URI… Cool right. Yada yada yada, let’s get to already. :D

I’ve created a sample project, in that I have a simple user interface consist of a Slider control and a TextBlock to display the value inside a Stackpanel. The StackPanel is inside the ContentPanel grid.

<StackPanel>
  <Slider Name="slider" Maximum="100" Minimum="0" />
  <TextBlock Text="" 
      FontSize="{StaticResource PhoneFontSizeMedium}"
      HorizontalAlignment="Center" />
</StackPanel>

What I wanna do is to display the value of the Slider in the TextBlock with a % mark append to it as a presentage. So you will see when the slider moves the value changes appropriately. Next we will create the class that holds the converter.

Add a class to the project by right clicking on the solution and then Add > Class. Name the class as u wish. I’ll name it as DoubleToStringConverter. Next you have to implement an Interface called IValueConverter for our converter to work. So the class definition should like this.

public class DoubleToStringConverter : IValueConverter { }

Then we need to implement the 2 methods in the IValueConverter interface. You must implement these 2 methods or else it won’t compile.  But you already knew that right.

The methods we need to implement is Convert and ConvertBack. So after I implemented the methods it should look like this,

public class DoubleToStringConverter : IValueConverter 
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
  { 
    return Math.Round((double)value).ToString() + "%"; 
  }

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

You see In the ConvertBack method I chose not to implement it. So I made it to throw a NotImplementedException if its called. So don’t trip.. We are done.. Not quite yet :D But we are just about there. Next we need to add a XML namespace in to the XAML to recognize the class we just created. So in your XAML view. In the top of the page you see some xml namespace declarations and bellow add the following line. (Remember is your project name is different you should add your project name.)

xmlns:convert="clr-namespace:CustomValueConverters"

Then you need to define your converter as a StaticResource so you can use it with the binding. To do that add the following XAML code below the opening tag of phone:PhoneApplicationPage.

<phone:PhoneApplicationPage.Resources> 
  <convert:DoubleToStringConverter x:Key="DoubleConvert" /> 
</phone:PhoneApplicationPage.Resources>

The X:Key DoubleConvert is the name that identifies the converter inside XAML. We are almost there :D one modification and we are done. We need to modify the TextBlock element to reflect the value change when the slider moves and this is where the binding statement comes. Add the following binding statement to the Text property.

{Binding Value, ElementName=slider, Converter={StaticResource DoubleConvert}}

Binding statement is simple, Right after keyword Binding I set Value as it’s the property of the slider I need the textbox to be bound to. Then as the ElementName I set slider (the name of the slider.. Obviously :D ) and then as the Converter I set the converter we created as a StaticResource. We are DONE. :D

So the entire UI code should look like this.

<StackPanel> 
  <Slider Name="slider" Maximum="100" Minimum="0" /> 
  <TextBlock 
        Text="{Binding Value, ElementName=slider, Converter={StaticResource DoubleConvert}}" 
        FontSize="{StaticResource PhoneFontSizeMedium}" 
        HorizontalAlignment="Center" /> 
</StackPanel>

Soooo. Run the app in your Device/Emulator and move the slider. And whola, you have the value as a percentage and the decimal points stripped out. We are done.

Guys, if you want the code for this. Grab the project from the following link (Source Code) and take a look. That’s it. See you guys soon with another post.