Converting data for display

On many occasions, we need to convert the data coming from the source into a form that is suitable for users to read. For example, we want to format a date as short date. In this recipe, let's add a date field to our CLR object and use the binding converter to display short date instead of long date.

Getting ready

For this recipe, let's copy the preceding project and name the new project as Recipe5. You can also do this by exporting the preceding project as a template and then creating the new project from this saved template.

How to do it...

1. Open the DataClass.cs file from the solution window. Add a new property DateCreated:

   public class DataClass
   {
     public string Name { get; set; }
     public string Notes { get; set; }
     public int Priority { get; set; }
     public DateTime DateCreated { get; set; }
   }

2. Add another class; as we are formatting the Date value, let's name it DateFormatter. In order for this class to inherit IValueConverter, you should use the System.Windows.Data namespace. Now add two functions Convert and ConvertBack:

   public class DateFormatter : IValueConverter
   {
     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
       string formatString = parameter as string;
       if (!string.IsNullOrEmpty(formatString))
       {
         return string. Format(culture, formatString, value);
       }
       return value.ToString();
     }
     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
       throw new NotImplementedException();
     }
   }

3. Open the MainPage.xaml and let's add the namespace at the top first as PhoneApplicationPage attribute.

   xmlns:local="clr-namespace:Recipe5">

4. Now Add the Resource markup as shown in the following code snippet:

       <phone:PhoneApplicationPage.Resources>
           <local:DateFormatter x:Key ="FormatConverter" />
       </phone:PhoneApplicationPage.Resources>

5. Now, add two TextBlock controls for DateCreated column inside the ListBox control as shown in the following code snippet. Notice how the Converter property is set to a static resource with a converter parameter.

   <TextBlock x:Name ="tbDateCreated" Text ="DateCreated:" Grid.Row="5" Grid.Column ="0" />
   <TextBlock x:Name="tbDateCreatedContent" Grid.Row="5" Grid.Column ="1" Text="{Binding DateCreated,Converter={StaticResource FormatConverter}, ConverterParameter=\{0:d\}}" /> 

6. Add initialization data for the DateCreated field in the code behind the XAML file:

   myData.DateCreated = DateTime.Now;

7. Press F5 to run the code and you should see the following results:

   

How it works...

You can see that the DateCreated field is shorter than before. Converters are used for displaying the correct format of the data for users. In this recipe, DateFormatter uses string format to convert the date format. Similarly, various other conversions such as currency and percentage can be performed.

There's more...

You can learn deeper concepts related to data binding using this online resource:

http://msdn.microsoft.com/en-us/library/ms752039.aspx

See also

Check the recipes titled DataContext and How DataMode is used in this chapter.