Formatting made easy - Silverlight 4
- by PeterTweed
One of the simplest tasks in business apps is displaying different types of data to be read in the format that the user expects them. In Silverlight versions until Silverlight 4 this has meant using a Converter to format data during binding. This involves writing code for the formatting of the data to bind, instead of simply defining the formatting to use for the data in question where you bind the data to the control.
In Silverlight 4 we find the addition of the StringFormat markup extension that allows us to do exactly this. Of course the nice thing is the ability to use the common formatting conventions available in C# through the String.Format function.
This post will show you how to use three of the common formatting conventions - currency, a defined number of decimal places for a number and a date format.
Steps:
1. Create a new Silverlight 4 application
2. In the body of the MainPage.xaml.cs file replace the MainPage class with the following code:
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
info i = new info() { PriceValue = new Decimal(9.2567), DoubleValue = 1.2345678, DateValue = DateTime.Now };
this.DataContext = i;
}
}
public class info
{
public decimal PriceValue { get; set; }
public double DoubleValue { get; set; }
public DateTime DateValue { get; set; }
}
This code defines a class called info with different data types for the three properties. A new instance of the class is created and bound to the DataContext of the page.
3. In the MainPage.xaml file copy the following XAML into the LayoutRoot grid:
<Grid.RowDefinitions>
<RowDefinition Height="60*" />
<RowDefinition Height="28*" />
<RowDefinition Height="28*" />
<RowDefinition Height="30*" />
<RowDefinition Height="154*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86*" />
<ColumnDefinition Width="314*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock1" Text="Price Value:" VerticalAlignment="Top" />
<TextBlock Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock2" Text="Decimal Value:" VerticalAlignment="Top" />
<TextBlock Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock3" Text="Date Value:" VerticalAlignment="Top" />
<TextBlock Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Name="textBlock4" Text="{Binding PriceValue, StringFormat='C'}" VerticalAlignment="Top" Margin="6,0,0,0" />
<TextBlock Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="6,0,0,0" Name="textBlock5" Text="{Binding DoubleValue, StringFormat='N3'}" VerticalAlignment="Top" />
<TextBlock Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="6,0,0,0" Name="textBlock6" Text="{Binding DateValue, StringFormat='yyyy MMM dd'}" VerticalAlignment="Top" />
This XAML defines three textblocks that use the StringFormat markup extension. The three examples use the C for currency, N3 for a number with 3 decimal places and yyy MM dd for a date that displays year 3 letter month and 2 number date.
4. Run the application and see the data displayed with the correct formatting.
It's that easy!
