WPF Sample Series – Formatting Data Binding Dates and Numbers

This will be the first in a series of WPF Sample Applications I’ll be posting over the next year or so.

The purpose of the Sample Series is to provide concise code solutions for specific programming tasks.  This sample provides a brief description of the problem, the solution and full source code that includes a working program with many examples of actually using the sample code. 

Let’s hit the ground running with a very common WPF programming task, formatting data binding expressions.

One of the most powerful features in the WPF platform is it’s rich data binding.  WPF makes it very easy to perform declarative data binding in the XAML mark-up along with data binding in code.   When we hear or read, “data binding” we normally associate this with data binding to a database, web service or business layer than exposes the database.  In WPF, data binding goes much further.  For example a developer can data bind a property in an object to another dependency property in the same object or to a dependency property in another object.  WPF data binding allows the developer to determine when in the application life cycle the value will be updated and the direction of the binding operation.

That being said, this short sample covers a small but important piece of the data binding feature that allows for the formatting of data by using a converter.  WPF data binding coverters allow developers to do exactly that.  Take a value from a source and convert it to something else during the data binding process so that the target receives the converted value.

In this sample, we will take advantage of the data binding converter plumbing to format numeric and date data.  Our converter uses the standard .NET Framework numeric and date formatting expressions that all .NET developers are familar with and converts the numeric and date data from the source to a formatted string value that gets displayed in the TextBlocks in the application.

Converters give the developer full control on how data is displayed to the user.  In the sample program below, you’ll see many examples of displaying three properties, a date, a double and an integer.

Sample Program 

Formatting Sample

Description:  From the above image, it is easy to see where this sample is taking us.  The column on the left identifies the property and the formatting string used to display the value in the right colomn.  I don’t know about you, but for me, a picture is worth a thousand words.

The data source is a single instance of the SampleDataClass that has four properties, Name, Birthday, Salary and Age.  These values are set in the constructor of the Window.  The data class has been assigned as the DataContext for the Grid that contains the child TextBlock controls.  The alternating grid row background color was implemented by placing a Rectangle in every other row with the Fill set to AntiqueWhite.

The various properties are bound to the TextBlock Text property using binding expressions that include a converter.  The converter handles the formatting duties. 

Here are three sample binding expressions from the program:

Text=”{Binding Path=BirthDay, Converter={StaticResource FormattingConverter},
  ConverterParameter=\{0:M\}, Mode=Default}”
Text=”{Binding Path=BirthDay, Converter={StaticResource FormattingConverter},
  ConverterParameter=\{0:R\}, Mode=Default}”
Text=”{Binding Path=BirthDay, Converter={StaticResource FormattingConverter},
  ConverterParameter='{}{0:ddd, d MMM yyyy} is my day!’, Mode=Default}”

Notice that in the first two examples the ConverterParameter has been escaped \{ and \}. 

The third example uses an alternate syntax that does not require escaping.  By proceeding the parameter with {}, escaping is not required.  Also note, the third example demonstrates how to include a string along with the binding expression, “is my day!” has been added to my birthday.

The comments have been removed from the below code example but are in the source code download.   (I’m also trying out using an image for the displayed code.)

New Sample Code
This converter provides the ability to convert back by using a type specific TypeConverter. 

Resources:  I used the MSDN documentation and several examples from the Internet along with code I use in my production applications to make this sample.

Source Code: After downloading the source code you MUST change the file extension from .zip.DOC to .zip.  This is a requirment of WordPress.com

Source Code 57KB

Hope you can learn just a little bit more about WPF from the Sample Series.

Just a grain of sand on the worlds beaches.

Comments are closed.


Get every new post delivered to your Inbox.

Join 255 other followers