Value Converter - Part II : Silverlight

Share |

This post is the Part II of Value Converter. The Part I can found here

http://www.silverdigita.com/2011/03/value-converter-part-i-silverlight.html

In part I, we saw about the interface IValueConverter and the members of the interface i.e. Convert and ConvertBack. Now let’s see an example. In this example, we will see how to format the decimal value. First of all, let’s create a class that implements IValueConverter interface (let’s call this class Formatter).

public class Formatter : IValueConverter
    {
        #region IValueConverter Members
        // Called when the value propagates from the binding source to the binding target (control)
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string format = (parameter == null) ? "#.##" : parameter.ToString();
            if (value == null)
                return string.Empty;
            else
                return decimal.Parse(value.ToString()).ToString(format);            

        }
        // Called when the value propagates from the binding target to the binding source (object)
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                if (value != null && value.ToString() != String.Empty)
                {
                    return decimal.Parse(value.ToString());
                }
            }
            catch { }
            return null;
        }
        #endregion
    }

In the Convert method, we first check if the parameter is passed or not and assign the value to the format object of type string and return the formatted value if value is not null else we return empty string.

In the ConvertBack method, we convert the value (if it is not null and not empty string) in the decimal format and return the converted value.

Now that our converter is ready, we need to add it as a resource in our XAML file. In the following example, converter maps to the namespace in which Formatter is defined.

<converter:Formatter x:Name="DecimalFormatter"/>

 

Finally, we can use the converter in our binding using the following syntax. In the following example, the text content of the TextBox is bound to Value, which is a property of an data source.

<TextBox x:Name="txtDecimal" Text="{Binding Value, Mode=TwoWay, Converter={StaticResource DecimalFormatter}}"
         FontFamily="Arial" 
         Width="200" 
         Height="20" 
         Margin="5"  />

The complete XAML code is as follows,

<UserControl x:Class="ValueConverterExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:converter="clr-namespace:ValueConverterExample"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <converter:Formatter x:Name="DecimalFormatter"/>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot">
        <TextBox x:Name="txtDecimal" Text="{Binding Value, Mode=TwoWay, Converter={StaticResource DecimalFormatter}}"
         FontFamily="Arial" 
         Width="200" 
         Height="20" 
         Margin="5"  />
    </Grid>
</UserControl>

I am using the below data to bind to the control,

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            MyData data = new MyData();
            data.Name = "Sample Data";
            data.Value = 10.123456;
            txtDecimal.DataContext = data;
        }
    }

    public class MyData
    {
        public string Name { get; set; }
        public double Value { get; set; }
    }

The output is shown below

Hope this helps. Happy Coding !!!