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!

VirtualizingStackPanel.IsVirtualizing=”True”

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;
myListView.Items.Refresh();

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

Advertisements

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

o

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! 🙂


Customizing ListView in WPF (Part I)

July 27, 2007

It is fun experience trying to customize the look and behavior of the standard listview included in WPF.

Here is a list of interesting things I’ve found out regarding customizing the ListView in WPF:

  • Sorting: Since there is no build-in sorting support in ListView in WPF, you have to use some kind of attached property approach detailed here. This took an hour or so for me to figure out how to integrate it nicely with any listview column headers and any ObservableCollections data source. The header style for ascending and descending sort is based on this post by Avalon ATC team.
  • Column Header styling: Since in one of my applications, I need to style the column header with multi-line text support. This isn’t difficult since you can specify ColumnHeaderStyle easily.
  • Alternating background color for each row: This is easy, here details some approaches by the Avalon ATC team.
  • Mouse over highlighting effect. You can accomplish this through ItemContainerStyle by setting the triggers for ListViewItem. The final implementation is based on this post by Juan Pablo G.C. from Code Project.
  • Embed icons into cells. This is not hard since you are easily use the CellTemplate in your GridColumn definition to achieve this.
  • Embed HyperLink into cells. This can also be achieved through CellTemplate.

The most difficult part is figuring out the vertical grid lines in the ListView. This is achieved through the CellTemplate of each GridColumn and the ItemContainerStyle. First, you need to use the following ItemContainerStyle to make your listviewitem stretch in all directions:

Then in your CellTemplate, you need to define borders like:

The negative border margin is needed to make it align with the divider on the ColumnHeader.

Let me know what you think of this customization. I will post more regarding this topic later when I learn more about the power and flexibility of WPF.

You can view the grid in action here:


Performance tuning of WPF Applications (Part I)

July 24, 2007

These days as I am digging more into WPF and XAML into more complex applications, I’ve got hit more and more by performance and scalability issues. So I did some research over the past few days and came up with the following list of links that I hope you can find them helpful in your own XAML/WPF applications.

  • Optimizing Performance w/ StreamGeometry. If you are doing a lot of creating/destroying geometric shapes, such as 2D charts, data clouds in your application, then this article may worth a reading.
  • Here is a more complete overview and a set of guidelines for optimizing your WPF application. Of this article, I find the following sections particular useful in enterprise-oriented WPF applications: software rendering pipeline considerations, freezable elements, different layout panel container considerations when building very complex UI.
  • Consider XamlReader and XamlWriter for faster duplication of many identical UI across different domains or windows.

I will write more about my thoughts on performance tuning in later parts of this series.

In the meantime, I highly recommend you try the Performance Profiler for WPF to profile your complex WPF application and see where your performance bottleneck is.


Top 10 reasons why WPF is superior to Winform

July 23, 2007

For those come from the .Net 1.1/2.0 Windows Forms UI world, if you are still researching about the capabilities of WPF vs. Windows Forms technology, MSDN has an excellent article on this topic: Top Ten UI Development Breakthroughs In Windows Presentation Foundation. In summary, the top 10 reasons are:

10. Advanced Graphics
9. Drawing Object Model
8. Rich Application Text
7. Adaptable UI Layout
6. Flexible Content Model
5. Lookless Controls
4. Data-Driven UI
3. Consistent Styles
2. Triggers
1. Declarative Programming

If you are new to WPF, this article is highly recommended as it gives you a brief and concise overview of major features and new concepts in WPF.

Despite of some glitches and frustrations over anti-alias implementation in WPF/XAML, I still believe WPF is far more flexible and capable than Windows Forms.


Another progress bar in WPF

July 22, 2007

WPF and XAML is very easy and flexible to manipulate and customize geometric shapes. It also has extensive and rich support for many types of brushes. Here I present you a very simple progress bar similar to those that you are now seeing more and more in many “modern-looking” applications. You can try the following XAML:


<Grid>

<!– The progress bar background –>

<Rectangle Stroke=#FF000000 RenderTransformOrigin=0.5,0.5 x:Name=ProgressBarBackground>

<Rectangle.Fill>

<LinearGradientBrush EndPoint=0.5,1StartPoint=0.5,0>

<GradientStop Color=WhiteOffset=0 />

<GradientStop Color=Gray Offset=1/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<!–The progress bar foreground –>

<Rectangle Stroke=#FF000000 RenderTransformOrigin=0.5,0.5

x:Name=ProgressBarForeground HorizontalAlignment=Left>

<Rectangle.Fill>

<LinearGradientBrush EndPoint=0.5,1StartPoint=0.5,0>

<GradientStop Color=#FF023501Offset=1.0/>

<GradientStop Color=#FFB6F9B4Offset=0/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Viewbox>

<!– The progress bar text display –>

<TextBlock TextAlignment=CenterBackground=TransparentFontFamily=Times

Foreground=Black x:Name=ProgressTextMargin=2,2,2,2> 0%

</TextBlock>

</Viewbox>

</Grid>


This will give you something like the following:


You can customize the color tone by changing the color stops. I like green so I painted the progress bar in a greenish fashion. Feel free to change it. To update the progress status, you can add property triggers (You need to create DependentProperty for this control first!) or event triggers to update the progress bar through XAML or you can add some (little) C# code-behind to update this progress bar or re-use it in your XAML-based applications. Sometimes I find that C# code can comes in handy in these situations. Let me know what you think about this little progress bar.


Btw, if you happen to know how to easily embed syntax-highlighted C# code and XAML code in WordPress.com, I’d appreciate if you can share it with me 🙂 It appears that copy-and-paste the source code from Visual Studio 2005 to WordPress Blog Writer doesn’t work 😦


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.