Date formatting using bindings in Silverlight DataForm

Apr 13 2010 2:52 PM

I had fun today trying to work out why I could not get the date column of a data form grid to be formatted correctly. Listed below is some xaml markup of the dataform..

<df:DataForm x:Name="Form1" ItemsSource="{Binding Mode=OneWay}" AutoGenerateFields="True"
                AutoEdit="True" AutoCommit="False"
                CommitButtonContent="Save"
                CancelButtonContent="Cancel"               
                CommandButtonsVisibility="Commit"
                LabelPosition="Top" ScrollViewer.VerticalScrollBarVisibility="Disabled"
                EditEnded="NoteForm_EditEnded"> 
        <df:DataForm.EditTemplate>
            <DataTemplate>                    
                <StackPanel>
                    <df:DataField>
                        <TextBox Text="{Binding Title, Mode=TwoWay}"/>
                    </df:DataField>
  
                    <df:DataField>
                        <TextBox Text="{Binding Description, Mode=TwoWay}" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto"
                                 VerticalScrollBarVisibility="Auto" Height="" TextWrapping="Wrap" SizeChanged="TextBox_SizeChanged"/>                        
                    </df:DataField>
  
                    <df:DataField>
                        <TextBlock Text="{Binding Username}"/>
                    </df:DataField>
  
                    <df:DataField>
                        <TextBlock Text="{Binding DateCreated}"/>
                    </df:DataField>
                </StackPanel>
            </DataTemplate>
        </df:DataForm.EditTemplate>
    </df:DataForm>

The problem with this is no matter what format parameter I put on the annotation

/// <summary>
/// Gets or sets the date created of the noteannotation
/// </summary>
[Display(Name="Date Created")]
[Editable(false)]
[DisplayFormat(DataFormatString = "{0:u}", ApplyFormatInEditMode = true)]
public DateTime DateCreated { get; set; }

it was being displayed as 4/6/2010 10:02:15 AM

This is the default binding format on the dataform. To solve this a convertor needed to be added to the datafield in question.

<df:DataField>
    <TextBlock Text="{Binding DateCreated, Converter={StaticResource DateConverter}}"/>
</df:DataField>

The DateConverter is just a class than implements the IValueConverter interface. Example below shows the date time format I needed..

/// <summary>
/// Date time formatter - for short dates for data bound items
/// </summary>
public class DateConverter : IValueConverter
{
    #region Public Methods
  
    #region IValueConvertor Members
  
    /// <summary>
    /// Convert data item to a short date
    /// </summary>
    /// <param name="value">Value</param>
    /// <param name="targetType">Target type</param>
    /// <param name="parameter">Paramter</param>
    /// <param name="culture">Culture</param>
    /// <returns>Converted object</returns>
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var date = (DateTime)value;
        return (date.ToString("dd/MM/yyyy HH:mm:ss"));
    }
  
    /// <summary>
    /// Convert back data item to a short date
    /// </summary>
    /// <param name="value">Value</param>
    /// <param name="targetType">Target type</param>
    /// <param name="parameter">Paramter</param>
    /// <param name="culture">Culture</param>
    /// <returns>Converted object</returns>
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var s = (string)value;
        return (DateTime.Parse(s));
    }
  
    #endregion IValueConvertor Members
  
    #endregion Public Methods
}

This works like a treat - could be improved with some null checking! :)