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>