Another chart in WPF

August 21, 2007

A few weeks back I posted a WPF-based chart in my blog. Currently in one of my projects I need to deploy charts that support displaying multiple data series side-by-side and showing the value tick on the top similar as Google Finance charts does. So based on my previous WPF chart, I developed this “another chart” that can support multiple series. Here I also used the performance optimization with streamGeometry to enhance the chart memory consumption and response speed. I have to admit this chart is heavily inspired by the features in the Google Finance charts.

You can take a look at the final chart in action:

[Updated 8/4/2008]

The download link has been updated. CLick the following link to download the source code:

Formatted Text in WPF

August 19, 2007

WPF has very rich support for displaying and manipulating formatted text. I’ve recently came across couple articles at MSDN on this topic. You can get an overview of the rich format support from this article. And then you can read the in-depth article on drawing formatted text.

This compares very nicely with this excellent book on .Net 2.0 Windows Form GDI+ graphics and text drawing by Eric White. Overall I am very impressed with the rich format text rendering support in WPF, despite some unresolved anti-alias issues I have on Windows XP workstations.

A Data-Bound progress bar in WPF

August 15, 2007

Several weeks ago I posted a sample progress bar using rectangle overlay to achieve gradient looking and text overlay. But that control was C# code-driven to update the UI. Here I’ve improved it to utilize ValueConverters and Data Binding, so you can update its source data and the UI can automatically updates.

The XAML part of the ProgressBar control is listed as following. I am using two-column grid to simulate the progress bar container:

Then you can define your custom ValueConverter to convert percentage progress values to grid column widths. The following shows the ValueConverter for the ProgressBar Column Width property inside the parent grid:

You can create other types of ValueConverter to suit your needs.

Once you are done , then in your code you can easily adjust your progress data without manually coding against the Progress Bar UI anymore:

This has advantages in situations where you need to implement data-driven applications without in-depth knowledge of the visualization layer.

The finished UI will look like this:

[Update 8/27/2007]

After some study of the ControlTemplate in WPF, especially those special meaning PART elements in a control template, I realized this could be implemented with a ControlTemplate with all XAML approach. 

The key to the control template is to use the PART_Track and PART_Indicator element to contain the rectangle areas.

[Update: 1/16/2009]

Sample code (all XAML) posted here

TextBox and Data Binding in WPF

August 9, 2007

Have you run into situations where you need your data-bound textbox update the underlying data automatically while you are typing? So when you hit the ‘Enter’ key, your keyboard event handler can examine the entered data right away?

Here is one of the ways to do it:

<TextBox Text=“{Binding YourDataSource, UpdateSourceTrigger=PropertyChanged }”

The key is to use the “PropertyChanged” binding behavior. For a more complete review of UpdateSourceTrigger, you can take a look at its MSDN document. Now I wish the Visual Studio 2008 XAML editor can do IntelliSense of this while I am manually entering the data binding codes. It can at least save me 5 min research time 🙂

The Cider designer in Visual Studio 2008 still has a very long way to go to match what Windows Forms designer offers now in Visual Studio 2005.

A much faster sorting for ListView in WPF

July 31, 2007

In my first part of performance tuning techniques, I’ve reviewed some general approaches. Now I want to show you how to fine tune your ListView for sorting and displaying HUGE amount of rows. In this demo, I will show you that by using a custom sorter and virtualizingstackpanel, your sorting speed is about 100 times faster!


First you need to specify the above property to true in your ListView, (this is the default value for ListView in WPF).

Then next, you need to use custom sorter, instead of SortDescriptions as described in my earlier blog. The key is using the CustomSort property of ListCollectionView:
ListCollectionView view = (ListCollectionView)CollectionViewSource.GetDefaultView(myListView.ItemsSource);

Then in your ColumnHeader click event handler, you add something like the following:

view.CustomSort = sorter;

Where sorter is a custom class you implement the IComparer interface.

Here is the demo of this custom (much faster!) sort program to sort 200,000 rows in a virtualized ListView in WPF:

In the demo, you see the custom sort takes about only 1.6 – 2 seconds to sort. I tried this 200,000 rows with SortDescriptions, and it takes about 3 minutes (~ 167 – 180 seconds) to sort this many rows. This is tested on both the .Net Framework 3.0 and the just released .Net Framework 3.5 Beta 2. Now you can enjoy a much more scalable ListView in WPF. 🙂

[Update 8/1/2007]

I’ve uploaded the project source code to demonstrate this sorting technique. You can get it here. You’ll need Visual Studio 2008 Beta 2 to open the solution file (or project file).

[Update 8/3/2007]

A modified version of the sample to support sorting multiple columns is posted here.  You’ll need Visual Studio 2008 Beta 2 to open the solution file (or project file).

[Updated: 1/16/2009]

The new source code link is updated at:

new source code link

Visual Studio Orcas Beta2 and .Net 3.5 Beta2 available!

July 27, 2007

Almost missed this important milestone release info while busy working too many stuff at work.

Just noticed that VS 2008 (‘Orcas’) and .Net 3.5 beta 2 are released. For a list of updates in WPF, check here. You can download the beta here from MSDN.

In summary,

  • Application Model

o WPF builds on the new add-in model in .NET Framework 3.5 Beta 2 to allow developers to create visual add-ins, where add-ins provide UIs that are displayed by the host application. You’ll find the add-in types in the System.AddIn namespace in System.AddIn.dll, System.AddIn.Contract.dll, and System.Windows.Presentation.dll.

o XBAPs can now run in FireFox.

o Cookies can be shared between XBAPs and Web applications from the same site of origin.

o Improved XAML intellisense experience for higher productivity.

o Data binding and journaling by URI work together.

  • Data Binding


A new debugging mechanism makes it easier to debug data bindings. (new attached property: System.Diagnostics.PresentationTraceSources.TraceLevel)

o The data validation model now supports the IDataErrorInfo interface. (new class: System.Windows.Controls.DataErrorValidationRule)

o Improvements have been made to BindingListCollectionView to provide better support for binding to a collection that is of type BindingList and for LINQ.

o The behavior of data bindings with a CollectionView over an IEnumerable has been improved to provide better performance and better support for binding to results that are produced by LINQ.

  • 3D
    • UIElement concepts such as input, focus, and eventing have been brought to 3D. (new classes: System.Windows.UIElement3D which is abstract, and ContainerUIElement3D and ModelUIElement3D in the System.Windows.Media.Media3D namespace)
    • Developers can now place interactive 2D content onto a 3D object. (new class: System.Windows.Media.Media3D.Viewport2DVisual3D)
  • Documents/Annotations
    • The annotations framework now exposes the capabilities for matching annotations with the corresponding annotated objects. (new interface IAnchorInfo and new class TextAnchor in the System.Windows.Annotations namespace)
  • Better IME support, RichTextBox extensibility (new property IsDocumentEnabled), performance improvements, and more!

I will be playing with the new Beta 2 soon! No more frustration over the half-supported XAML IntelliSense in VS 2005 (with Cider). Oh, by the way, this beta 2 has a Go Live! license. Perfect! 🙂

More WPF Anti-alias blues

July 20, 2007

I am hitting more issues with anti-alias in WPF. While it is frustrated to see there is no anti-alias support for 3D in WPF on Windows XP, it is even stranger to see that the text rendering in WPF has always-on anti-alias without giving developer the option to turn it off! Take a quick look at this thread on MSDN Forum, you will surprisingly find out how many people are frustrated with the same issue — poor design or poor implementation of WPF.

In a short word, WPF should give developers the option to turn on/off anti-alias feature in text rendering, and in 3D. Without such options, WPF suffers a major design flaw and poor quality comparing to Adobe Flash/Flex platform. I don’t see any blurry text out of Flash, while I see plenty of such on WPF. Why this “superior” and “future of UI development” technology from Microsoft renders text so poorly? Come on, we are in 2007 already and our computers are far more capable than just rendering clear text. My Windows Forms 2.0 text rendering is much clearer than WPF! The following illustrated the subtle differences between these three text rendering results:

XAML-based Text Rendering:

Adobe Flex2-based Text Rendering:

Windows Forms 2.0-based Text Rendering:

You can see both Windows Forms and Flex render textual information in a much readable way. And there is no way in WPF to turn this strange “anti-alias” off in text rendering. If you happen to know the tricks to make the look of small fonts in WPF looks better, I’d highly appreciate!

[Update 8/18/2007]

See this blog post on Text Anti-alias rendering in WPF. I found it useful when you want to fine tune your text appearing in XAML apps.