Silverlight 4: StringFormat for DateTime Conversion

"In this article, we will see how to use StringFormat property to format the DateTime while binding it to a UI element like Text Box or other similar elements.



In earlier versions of Silverlight, we were using the ‘IValueConverter’ interface to format the string as per our business requirements. For example consider the class shown below which implements the ‘IValueConverter’ interface –







When you implement an interface ‘IValueConverter’,
it gives you two methods –



1) Convert – modifies the source data before passing it to the target for display.

2) ConvertBack – modifies the target data before passing it to the source. It is used only in ‘TwoWay’ binding.



Now in Silverlight 4.0, we have a property called ‘StringFormat’ which can be used for string formatting. For example, if we want to format DateTime, we can set the Text property of TextBlock control as shown below –



Text='{Binding JoinDate,StringFormat=\{0:d\}}'



Let’s see a few samples of formatting date and time using different patterns as shown below . Create a Silverlight 4.0 application and paste the below contents in the <Grid> section of your ‘UserControl’ as shown below –

<Grid x:Name='LayoutRoot' Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<TextBlock Foreground='Blue' FontSize='14'
Text='Short Date - {Binding JoinDate,StringFormat=\{0:d\}}'
Height='30' Grid.Column='0' Grid.Row="0"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:d\}}'
Grid.Column='1' Grid.Row='0' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Long Date - {Binding JoinDate,StringFormat=\{0:D\}}'
Height='30' Grid.Column='0' Grid.Row="1"/>      
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:D\}}'
Grid.Column='1' Grid.Row='1' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Long Date Short Time - {Binding JoinDate,StringFormat=\{0:f\}}'
Height='30' Grid.Column='0' Grid.Row="2"/>      
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:f\}}'
Grid.Column='1' Grid.Row='2' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Long Date Long Time - {Binding JoinDate,StringFormat=\{0:F\}}'
Height='30' Grid.Column='0' Grid.Row="3"/>      
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:F\}}'
Grid.Column='1' Grid.Row='3' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Short Date Short Time - {Binding JoinDate,StringFormat=\{0:g\}}'
Height='30' Grid.Column='0' Grid.Row="4"/>      
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:g\}}'
Grid.Column='1' Grid.Row='4' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Short Date Long Time - {Binding JoinDate,StringFormat=\{0:G\}}'
Height='30' Grid.Column='0' Grid.Row="5"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:G\}}'
Grid.Column='1' Grid.Row='5' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Month Day (m,M) - {Binding JoinDate,StringFormat=\{0:m\}}'
Height='30' Grid.Column='0' Grid.Row="6"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:m\}}'
Grid.Column='1' Grid.Row='6' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Round Trip DateTime (o,O) - {Binding JoinDate,StringFormat=\{0:O\}}'
Height='30' Grid.Column='0' Grid.Row="7"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:O\}}'
Grid.Column='1' Grid.Row='7' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='RFC1123 (r,R) - {Binding JoinDate,StringFormat=\{0:r\}}'
Height='30' Grid.Column='0' Grid.Row="8"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:r\}}'
Grid.Column='1' Grid.Row='8' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='SortableDateTime - {Binding JoinDate,StringFormat=\{0:s\}}'
Height='30' Grid.Column='0' Grid.Row="9"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:s\}}'
Grid.Column='1' Grid.Row='9' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Short Time - {Binding JoinDate,StringFormat=\{0:t\}}'
Height='30' Grid.Column='0' Grid.Row="10"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:t\}}'
Grid.Column='1' Grid.Row='10' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Long Time - {Binding JoinDate,StringFormat=\{0:T\}}'
Height='30' Grid.Column='0' Grid.Row="11"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:T\}}'
Grid.Column='1' Grid.Row='11' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Universal Date Time - {Binding JoinDate,StringFormat=\{0:u\}}'
Height='30' Grid.Column='0' Grid.Row="12"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:u\}}'
Grid.Column='1' Grid.Row='12' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Universal Date Time Long - {Binding JoinDate,StringFormat=\{0:U\}}'
Height='30' Grid.Column='0' Grid.Row="13"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:U\}}'
Grid.Column='1' Grid.Row='13' Margin="65,0,0,0"/>

<TextBlock Foreground='Blue' FontSize='14'
Text='Year Month (y,Y) - {Binding JoinDate,StringFormat=\{0:Y\}}'
Height='30' Grid.Column='0' Grid.Row="14"/>
<TextBlock Foreground='Red' FontSize='20'
Text='{Binding JoinDate,StringFormat=\{0:Y\}}'
Grid.Column='1' Grid.Row='14' Margin="65,0,0,0"/>

</Grid>

For this demonstration, I have created a class called Customers with two properties as shown below –







After that, in the constructor of the MainPage, write the following code after the ‘InitializeComponent();’ method as shown below –







Now run your sample and you should see the output as shown below –

"