.NET 4.0+

WPF Data Binding - String Formatting

by Richard Carr, published at http://www.blackwasp.co.uk/WPFStringFormat.aspx

The ninety-sixth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of data binding. This article looks at the ways in which values can be formatted when displayed as strings.

Data Binding

In recent articles in the WPF tutorial we've concentrated on data binding, which allows the properties of controls to be linked to other controls or data objects of almost any type. When the information passed through a binding has not been string data, we've used the default conversions. For example, when binding floating-point data to a text box or text block, we've not specified the number of decimal places to show, added any currency symbols or includes prefixes or suffixes.

In this article we'll see how to format values that are being converted to strings using standard formats, custom formats and culture-specific information. We'll use numeric data for the data bindings. You can use the same techniques to format other data types, such as date and time information.

To demonstrate, create a new WPF application project in Visual Studio. Name the project, "StringFormatDemo". Once loaded, replace the XAML in the main window with the code below:

<Window x:Class="StringFormatDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="String Format Demo"
        Height="210"
        Width="270"
        Background="Linen">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Slider Grid.ColumnSpan="2" Name="MyValue" Minimum="0" Maximum="10" Margin="10" />

        <TextBlock Grid.Row="1">No Formatting</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1"
                   Text="{Binding ElementName=MyValue,Path=Value}"/>

    </Grid>
</Window>

The XAML above creates a window containing a Grid, a Slider and some TextBlocks. The final TextBlock is bound to the slider in the same manner that we have used in previous articles. This means that it includes no formatting, so shows the double-precision floating-point value from the slider as if converted to a string using the ToString method.

If you run the program and move the slider you will see that the text block updates to show the new value. Depending upon the position of the slider, the number of decimal places in the text version will vary.

Applying a Standard Format Specifier

You can add a standard format string to a data binding using the StringFormat value within the XAML for the binding. The standard format strings are the same as those used when converting a value to a string using C# or other .NET languages, so they aren't repeated here.

Let's add a new data bound text block within the Grid tag and apply a standard formatting string. The following XAML uses the currency format:

<TextBlock Grid.Row="2">Currency</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1"
           Text="{Binding ElementName=MyValue,Path=Value,StringFormat='C'}"/>

Run the program again to see the results. The new grid row will show a currency symbol and a fixed number of decimal places.