Windows 8 & Data Binding. Part 4–Data Conversion

In Part 3 of this little mini-series on data binding in Windows 8 we looked at Element Binding. Today, we’ll take a look at Data Conversion. iStock_connectTwoWiresXSmall

At times the data in your business object (the source for your binding) and the target UIElement may not have an exact type match. For example, if your Employee class wants to keep track of the start date for each Employee, a sensible way to do so is with a DateTime object. However, when we display that data we’ll want to use a Text object, and we may not want the entire default conversion of a DateTime to a string. To rectify this problem, we can create a class that performs a conversion from one type to another (in this case, from DateTime to string). This class will implement IValueConverter and will have two methods: Convert, and ConvertBack.

Here’s our modified Employee class,

private DateTime _startDate;
public DateTime StartDate
{
    get { return _startDate; }
    set { _startDate = value; RaisePropertyChanged(); }
}

We now need a new class that implements the IValueConverter interface,

public class DateConverter : IValueConverter
 {
     public object Convert( 
         object value, Type targetType, 
         object parameter, string language )
     {
         DateTime date = (DateTime)value;
         return date.ToString("d");
     }

     public object ConvertBack( 
          object value, Type targetType, 
          object parameter, string language )
     {
         string strValue = value as string;
         DateTime resultDateTime;
         if ( DateTime.TryParse( strValue, out resultDateTime ) )
         {
             return resultDateTime;
         }
         throw new Exception( 
               "Unable to convert string to date time" );
     }
 }

Notice the new use of formatting in date.ToString. See this MSDN article.

We can now create a resource for this converter class in the XAML,

<Page.Resources>
    <local:DateConverter
        x:Key="DateToStringConverter" />
</Page.Resources>

This allows us to use that resource when we bind to StartDate,

<StackPanel
    Orientation="Horizontal"
    Margin="0,5,0,0">
    <TextBlock
        Text="Start Date" />
    <TextBlock
        Margin="5,0,0,0"
        Height="50"
        Width="200"
        Text="{Binding StartDate, 
          Converter={StaticResource DateToStringConverter } }" />
</StackPanel>

As a result, the StartDate property is a DateTime object in the Employee object, but it is represented as a short string in the UI.

Remember to update the Employee constructor to take three arguments,

public Employee( string name, string title, DateTime startDate )
{
    Name = name;
    Title = title;
    StartDate = startDate;
}

and initialize the new Employee object in the code behind,

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    emp = new Employee( “Joe”, “QA”, new DateTime(2012,7,10) );
    xDisplay.DataContext = emp;
}

The result, in this case, is just to display the start date for this employee, formatted as we wanted.

DataConverter

Here’s the source code

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in Data, Essentials, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.