Rudi Grobler

Scrolling Performance in WPF

With the beta release of .NET 3.5 SP1, scrolling received some much needed performance increases! Lets review first what we used to have and how it has now changed:

The problem:

This is a example of how a ListBoxItem can now look using WPF! Looks very nice... but it is very taxing... A item like this can contain 30+ UI Element! Imagine if I now have a list of 300 items x 30 UI Elements? It quickly escalates!

The solution (Pre SP1):

So, how do we reduce the amount of UI element to be created? VirtualizingStackPanel has been available from the start... It does a excellent job of reducing the amount of UI elements created based on what is visible on the screen. It only creates UI elements actually visible on the screen (ok, and a little bit extra), but it does a excellent job at reducing the amount of UI elements created!!! The only real draw-back of this design is that it is very processor intensive creating and destroying the needed items! This is were SP1 comes to the rescue!

The solution (SP1):

From SP1, by changing the VirtualizationMode to Recycling, the VirtualizingStackPanel tries to reuse the UI elements! This dramatically reduces the amount of create/destroying that use to happen!!! By default, the ListBox doesn't use the recycling mode, to turn it on, add the following:

VirtualizingStackPanel.VirtualizationMode="Recycling"

Another scrolling performance enhancement is deferred scrolling... Until recently I haven't even noticed that this is what Outlook uses! Next time you use outlook, look at how it scrolls large collection of items (Like 100's of mail)! The screen only updates when you actually release the mouse button... this creates the illusion of very responsive scrolling!

To turn on deferred scrolling, add the following:

ScrollViewer.IsDeferredScrollingEnabled="True"

These are very small changes that can give you HUGE performance increases!!! It is very difficult to measure scrolling performance but I have made some small test to try and see what happens!

I created 3 ListBox all using the same data source (A observable collection of a 100 strings). The first list box is a standard ListBox, the second I turned on recycling and the last I also turned on deferred scrolling!

I then wrote a little function that counts each ListBox UI elements. I am also running a BackgroundWorker thread that constantly monitor the amount of UI elements and then writes it to the screen... here is my results

The ListBox with only VirtualizingStackPanel's item count on startup is 140, while scrolling it varies from 130-450. I then did the same test with the ListBox with the mode set to Recycling. Here the count varies from 130-150 and I had the same results with deferred scrolling turned on!

From this is is relatively obvious that less UI elements gets created and thus faster response with less CPU used!

Were can I read more

Recycling that Item Container by Vincent Sybal

Also read this article by Cedric Dussud

Using Binding.StringFormat

I know I am a little late on blogging about .NET 3.5 SP1, but here goes... This is a huge release... so much more than just a service pack! The feature that is getting a lot of attention on the net is the new hardware accelerated effect... thy are awesome!

What I want to explorer a little thou is the new Binding.StringFormat!

Value converters are great to shape data being binded too... but if I have to create value converter every time I need to format my text, well... Microsoft has listened too their users and added a very useful StringFormat to the Binding object.

Lets assume I have a data object I am binding too that has a price property... and I need to format the returned value a little. The new syntax makes this very easy

<TextBlock Text="{Binding Price, StringFormat='Price: R{0:000.00}'}" />

Cool!!!

The only thing to remember is that your target property must be of type string (Like the Text property of a TextBlock)!

NOTE: I first tried using the Content property of the Label... not so successful! (Thanks Corrado Cavalli)

UPDATE: n4cer pointed out the ContentStringFormat property!

If you found this useful, please

UPDATE: Corrado pointed me to this excellent article about Binding.StringFormat by Vincent Sibal

UPDATE: Lester Lebo has a good article about this

Who else blogged about .NET 3.5 SP1?

Scott Guthrie - Visual Studio 2008 and .NET Framework 3.5 Service Pack 1 Beta

Tim Sneath - Introducing the Third Major Release of Windows Presentation Foundation

Scott Hanselman - VS2008 and .Net 3.5 SP1 Beta - Should You Fear This Release

Lester Lebo - .NET 3.5 SP1 - Try it out today

Josef Goldberg - What’s New for Performance in WPF in .Net 3.5 SP1 & Performance improvements in WPF in .Net 3.5 / 3.0 SP1

PS. After I posted this, I saw that Sacha posted about it here

Geek Cribs...

I finally managed to find some time to updated my media centre setup at home... Here is what I have:

My media server is running Windows Vista Ultimate Edition (I upgraded from MCE 2005 without any major problems). All my content (videos, pictures, etc) is stored on this PC. I have a wired LAN connection (for performance reasons) to my downstairs XBOX 360 (Which I now use as a extender).

Since 4/12/2007 (2.0.6683), XBOX 360 supports playing DivX and Xvid videos... This is the main reason I decided to update my home setup...

Currently my XBOX 360 is not always connected on the internet... this caused some issues...

To get the latest "firmware", you have to connect to XBOX live... after downloading the latest system software (2.0.6690), I inserted a DVD containing some DivX content, only to receive the 51-C00D236 error... This requires you to connect to XBOX Live (Which is not available in SA without a small hack) while trying to play the content. This will prompt another download... After downloading the second update, my XBOX played the DivX content!

Next on my list was to setup my extender... I updated my network settings and started my XBOX media centre extender

I tried playing some DivX content... this did not work! After searching the net, I found that the XBOX does not support playing DivX via the extender (Hopefully to be solved soon)!

I enabled media sharing on my Vista PC and tested playing back DivX content via the dashboard!

This worked great!

More info

Xbox 360 DivX/Xvid playback tested

Also check out the "Official" Geek Developer Cribs episode (Scott Hanselman)

PS. I also get the annoying 53-C00D238 error sometimes! This is due to Vista changing my network from private to public? Media sharing is disabled if network is public!

The coolest silverlight demo yet!

The guys from Microsoft UK & NHS has created IMHO the coolest demo in Silverlight yet! Have a look at their Patient Journey Demonstrator

The Microsoft Health Common User Interface (MSCUI) Patient Journey Demonstrator is a vehicle for Microsoft thought leadership in state-of-the-art User Experience for Healthcare applications. It provides exemplar implementations of Microsoft Common User Interface guidance on a Microsoft platform.

Microsoft on the "Big Screen"

What is Photosynth?

Photosynth takes a large collection of photos of a place or an object, analyzes them for similarities, and displays them in a reconstructed three-dimensional space.

Photosynth also incorporates Seadragon's amazingly smooth digital rendering and zoom capabilities (DeepZoom).

Photosynth + CSI:NY = ?

Photosynth made the jump from the lab to the small screen as detectives on the CBS crime drama CSI:NY called upon Microsoft Live Labs™ Photosynth™ to help solve a grisly murder at a high school dance. The TV detectives needed to reconstruct events from hundreds of images taken by student cameras and mobile phones. They turned to Photosynth to help them build and explore the scene which ultimately led police to their suspect.

Producers from CSI were introduced to Photosynth during a visit to Microsoft last summer and were so impressed they asked to use the technology in the show. Members of the Live Labs team were on the set and worked with the show’s crew to fully leverage the technology’s abilities. Producers were so happy with the experience that they decided to allow Photosynth to “do its own stunts” for this episode and have the actors interact with it live, as cameras rolled.

CSI creator Anthony E. Zuiker first saw Photosynth, which is due later this year, in July during a tour of Microsoft’s research labs in Redmond, Wash.

Zuiker makes regular visits to Redmond as part of an ongoing creative relationship between CSI and Microsoft.

“The partnership for us is very important,” Zuiker says. “For us to be able to launch things that haven’t quite been in the marketplace or are new, in terms of visual story-telling with technology — to our fans, those bells and whistle are priceless.”

Here is a short clip of Photosynth used by CSI

Read more here:

• 'CSI' sleuths out Microsoft's latest technology
• Photosynth
• HD View
• DeepZoom
• Seadragon

"It's a Microsoft world. I'm just living in it."

WPF + ADO?

If you have a WinForms background, you are sure to have used ADO.NET! One of the question I get asked is how do I bind to ADO.NET, LINQ, etc... Here is a very basic example of how to bind to ADO.NET objects.

Note: I am using the standard AdventureWorks database available from CodePlex.

My Window XAML only has a ListBox

<ListView x:Name="listBox" />

Here is my connection string and my SQL query

const string connectionString = @"Data Source=rudi-lt\sqlexpress;Initial Catalog=AdventureWorks;Integrated Security=True";
const string sqlQuery = "SELECT * FROM Person.Contact";

Next, lets retrieve the DataTable

SqlConnection connection = new SqlConnection(connectionString);
SqlCommand command = new SqlCommand(sqlQuery,connection);
command.CommandType = CommandType.Text;
SqlDataAdapter adapter = new SqlDataAdapter(command);
DataSet dataSet = new DataSet();
adapter.Fill(dataSet, "Person.Contact");

listBox.ItemsSource = dataSet.Tables[0].DefaultView;

The only important thing to note here is that you can't bind directly to the DataTable! Instead, you have to use the DataView. Every DataTable has a ready-made DataView object available through the DataTable.DefaultView property.

And that is it!

Note: The DataView class implements the IBindingList interface, which implements change notification. This is similar to INotifyCollectionChanged!