XTab's Blog

Introduction
In the first part, I outlined the sample application and said that it:

• will create a collection of Person objects and databind them to a ListBox.
• will use very simple DataTemplates to format two properties of the Person class - FullName and Status.
• will use a GroupStyle HeaderTemplate to display a third property of the Person class - Category.
• groups the Person objects by their Category property.
• sorts the Categories and displays them in alphabetical order.
• sorts the Persons by name inside the Category groups and displays them in alphabetical order.  

The first five tasks are all covered in that previous part. You can download the project up to this point from here.

Sorting the Categories
In the same way that I used a Group Description to group items together, WPF offers the SortDescription to allow data inside the CollectionView to be sorted. The following code in the Window Loaded event is all that's needed:

The SortDescription takes two parameters. The first is the name of the property that you want to sort on. The second is one of two choices for the sort direction.

For completeness, this is the full code so far in the Window Loaded event (which creates the DataContext, the View, the GroupDescription and the SortDescription):

The sorted Categories will look like this:

Sorting the ListItems
As you can see, the Categories are now in alphabetical order. The names of the Person objects however are still shown in the relative order in which they were created. To create this secondary sort, the same kind of code is used:

The resulting display is:

The clearest example is where you can see the three items in the 'Work Colleagues' Category. They are now sorted alphabetically.

Note that the order that you list the sorting tasks is important. If you were to reverse the order:

You would effectively lose the Category sort.

It is possible to create and apply the grouping and sorting in XAML, but I always try as far as possible to handle these kind of tasks in code-behind. Equally, I try and use XAML for the actual graphical display. There isn't a clear line between the two sometimes, of course, and you have to allow for individual preferences, but I try and keep to this approach as a general rule.

Introduction
I was going to title this blog "What's in a name?" because William Shakespeare's famous question smacked me on the head recently after what seemed like several hours of frustration. The answer in this particular case is "Quite a lot!". As you'll see when I cover the syntax used to group items, you can very easily fall into a trap when it comes to names.

But first, I'll need to set the scene. This small application:

• will create a collection of Person objects and databind them to a ListBox.
• will use very simple DataTemplates to format two properties of the Person class - FullName and Status.
• will use a GroupStyle HeaderTemplate to display a third property of the Person class - Category.
• groups the Person objects by their Category property.
• sorts the Categories and displays them in alphabetical order.
• sorts the Persons by name inside the Category groups and displays them in alphabetical order.

 The Person Class
First, the Person Class - which I have chosen to implement INotifyPropertyChanged, although I don't actually take advantage of the change notification in this simple example:

Essentially, all you need to note for the purpose of this article is that the GetPersons function creates a List (of Person) and each Person instance has values assigned to all three of the properties of the class - FullName, Status, and Category.

The WPF Window
The WPF Application contains just one Window. A List of Persons is created by using the GetPersons function and this List is used as the DataContext for the Window. This will allow the ListBox to access that List. The initial code-behind is as follows:

The ListBox
In the XAML for Window1, there is a ListBox. To begin with, this ListBox simply shows the Person's FullName, followed by their Status. There is a minimal amount of formatting in the two TextBlocks that are used for this.

The result so far is this:

Obviously, there is no sorting or grouping going on there yet.

CollectionView
When you set up the Binding between the data source (the List of Persons) and the target control (the ListBox), a CollectionView is created automatically. This is a wrapper for the binding and allows you to sort, filter, group or navigate through the collection without affecting the underlying collection itself. Think of it as an editable snapshot of the data and you won't be far off the mark

You can access the current view by using the GetDefaultView method and passing in the name of the data source - in this case, the Contacts List created in the code-behind of Window1. In our example, we will access the CollectionView and then group and sort the items as they are displayed in the ListBox. To try and keep things as straightforward as possible I'll tackle each of these one at a time.

Creation of an instance of the view by means of the GetDefaultView method is simple.  

Note the inclusion of the Imports statement for System.ComponentModel, the class which houses ICollectionView.   

It's the final two lines of the Window_Loaded event that create the View:

Grouping

The following line of code, placed in the Window_Loaded event, will group the individual items based on the Category property:

The result is shown below:

So I don't have to be much of a mind reader to know that you're not too impressed at this point. In fact, you probably don't even believe that the items are now grouped. And even if they are, it's not very obvious to the user.

Let's start with the question of whether they are really grouped.   If you look carefully at the order of the names you will see that they have changed from the way they were originally listed - as seen in the earlier screenshot. And if you take a peek at the code which created the Person instances you will be able to see the value of the Category property for each instance.

Now, you can see that the first Category is "My Friends" and Neil Birch is the sole member of that Category. More usefully, the next three instances - Joe Brown, Elaine Javan and Zoe Flint all have "Work Colleagues" as their Category. They are now all listed consecutively - and both Elaine Javan and Zoe Flint have been moved from their original positions.

The next two names - Larry Blake and Matt Higginbotham are both in the "VB City" Category. Fran Mead is the sole member of the "Family" Category.

So, the grouping has actually taken place. The order of the Categories is based on the order in which they first appear in the GetPersons function.

Clearly, we need something to make the grouping of Categories more obvious. And that 'something' is a GroupStyle. GroupStyle has a HeaderTemplate property which can be used to format the text and/or graphics that are displayed at the start of each group - in this case at the start of each Category.

The XAML is a little bit verbose, but - apart from one potential Gotcha - is straightforward.

The GroupStyle has a HeaderTemplate. The HeaderTemplate contains a DataTemplate. In this case I have chosen to include only a basic TextBlock in the DataTemplate. The Text property of the TextBlock needs to show the Category name.

This is where I managed to get myself quite confused.

I initially had a property in the Person class called Name. (I've since changed it to FullName for clarity.) I couldn't understand why the Path of a TextBlock that showed the Category value would be pointing to the Name property of Person class. And of course it doesn't. But, while I was getting to grips with this I set the path to what I thought was the most logical item - the Category property. In other words, I had it like this:

Now, WPF is so forgiving when it comes to this kind of data binding that it doesn't throw an exception (quite rightly, because it is a valid path to an existing field). Sadly it doesn't show the Categories either. The result at this point is:

You can see that they are grouped, but there's no header.   The key lesson to take away from this is that the Path in that particular binding points to the name that is assigned to the PropertyGroupDescription in the code-behind:

Confused yet? Put simply, you always use the syntax of:

regardless of what the actual name of the grouping property is. You're probably thinking that we're well into the "Too much information" stage now, but - apart from wanting to share my pain - I really think that this is Gotcha that is just waiting to bite the unwary and so it was worth spending a couple of extra minutes looking at it.

OK, so getting back on track, the correct version of the GroupStyle markup will bring you the result you want. I have included all the ListBox XAML so you can see the finished product:

Here it is:

The grouping is clear, has a useful header and - more to the point - is accurate. The Categories are not yet in alphabetical order. The individual Person instances are also not sorted within their Categories, as you can see from the order in the Work Colleagues group.

As this blog has become a bit longer than I expected, I will continue with a Part 2, which will cover the Sorting methods.

I have posted a copy of this project which you can download from here.

In the previous blogs on ValueConverters - here and here - the conversion was from Integer type to Brush. In this blog I will cover the situation where you want to include a small image or icon in the ListView.

There are various alternatives here. You could hard code the image path into the collection, but the problem may be that you don't know the exact image paths at the time the collection is created. The approach I want to use is where you parse the data as it feeds through the binding and you select a stored image from the hard drive, the selection being based on the value of a specific field. This decouples the details of the image from the collection itself, which may be useful in many situations.

The DrinkProduct class looks like this: 

The Enumeration named 'MaterialType' identifies whether the product is powder, liquid, granule, etc and this is what I will use as the key for selecting the appropriate image.

The ValueConverter class is similar to those used in the previous blogs - IValueConverter requires the two methods named Convert and ConvertBack. ConvertBack serves no purpose is this scenario, so only throws a not implemented exception. 

As before, the parameter named 'value' is an Object type which is the key element in the conversion process. It contains the value that is to be converted. The conversion is simple in this case because all we need is to find the string value of the enumeration that is being passed in. So the basic ToString method will work fine.

Once we have a String value, this is compared against the various possibilities. A string which represents the file path to an appropriate image is returned by the converter. I've chosen to include the image files in the project, but of course they could be stored externally and still be accessed in the same way.

The next steps are the same as for the previous examples in the earlier blogs. First, map the current assembly to an XML namespace in Application.xaml:  

Then create an instance of the converter class in Application.xaml and give it a key: 

Next, create a DataTemplate for the new column of the ListView:  

In the above markup, the Binding Path is the Material field, the converter is the MaterialToImagePathConverter instance created above.

Finally, the ListView in the Window needs to have a new column added in which the images can be displayed: 

And now you are all set. The finished Window displays as shown below:

For completeness, the full markup for the Window which contains the ListView is shown here: 

Of course you are not forced to use the ValueConverter approach for this task. You could rewrite the class and give it an ImagePath property. Then in the code-behind run a function with a similar Select Case block to the one used above, passing back the appropriate path to the ImagePath property. The collection would be amended on the fly to include this data and finally the amended collection would be used as the DataContext. The Binding Path for the Image Source property would be that field. Personally, I think the ValueConverter is neater. And if the data comes from an external source, perhaps in the form of an XML file, then using the ValueConverter is almost certainly a better way.

If you have read any of my previous ListView blogs, you will know that formatting the ListView is mostly a matter of creating templates and styles for the various sub-elements. The same applies if you want to do something to differentiate one row from another. For instance, you might to have horizontal divider lines between each row.

This is the look we are going for in this blog:

The column headers were described in this blog, so I won't repeat the markup for those here.

In my last ListView blog, the ItemContainerStyle was used and we looked at the HorizontalContentAlignment property of the ListViewItem. By setting it to Stretch, the width of the items in each column was stretched so that their start and finish points all lined up vertically.

Here is the markup: 

And the result was this:

The problem with this obviously is those little gaps between the columns. The ListView inserts a margin of 6 units to the left and right of each column by default. So that is the cause of the gaps you can see there.

Each cell used a DataTemplate. Here is the DataTemplate for the cells in the first column shown above: 

What we need to do is to continue to make use the Border element in the DataTemplate for the cell, but remove the Light Green Background color. Then we can set a BorderBrush of Black and give it a Thickness of 1 unit.

Here's a first pass at it. This is the DataTemplate for the cells in the first column: 

The other two templates are very similar so I won't clog up the screen with them just yet. Here's the result so far:

We ended up with boxes when we really wanted lines, but it's a good start. The first trick is to set the individual values on the BorderThickness - that is left, top, right and bottom. By setting a value of 0 on the left and right we will remove the vertical lines.

We also want to remove the top border, otherwise there will be a double line between the rows (the bottom border of one row, followed by the top border of the next). So, here's an improved version: 

Getting closer. If we offset the start positions of the Borders in the DataTemplates and shunt them to the left to span the default gap of 6 units either side, we should be able to create a continuous line.

The following code snippet is the DataTemplate for the second column's cells. I'll explain why in a moment:

The result:

What has happened here is that the Border in the second cell's template has been moved 12 units to the left. This has the effect of joining the end of first cell's bottom border to the start of the second cell's bottom border. This is achieved by setting the value of -12 for the left margin in the second line of markup above. So, to come back to why I have shown you the second cell's template, the reason is of course that the first cell doesn't need to be shunted to the left.

It's almost perfect, but there is just one minor adjustment still needed which I'll deal with next.

Moving the Border to the left means that its child TextBlock is also moved. It would look much better if the text content was displayed more in line with the column headers. You can see this in the second two columns in the screenshot above. This can be fixed by setting Margins on the TextBlocks. This time, I will shunt the TextBlocks back to the right.

Here is the markup for the second cell again: 

This time it is the Margin property on Line 6 that's of interest. As you can see, it pushes the start of the text back to where we want it.

For completeness, here is the markup for all three DataTemplates: 

As it has been a couple of blogs since you saw the markup for the actual ListView, I'll list that too: 

The DataBinding to the very basic data source was covered in this blog.

So I know I've plodded through this in minute detail and you might think that it would have been better to have shown you the final versions of those DataTemplates and cut out all the intermediate steps. The reason I haven't is that you might want to take the basic idea and tweak it further - change colors, alter the vertical space between lines, change the distance that the text is shunted and so on. Now that you fully understand what each of those individual tweaks does, you can go ahead and make those kind of changes without having to pull my XAML apart to work out how its done.

 The Story So Far
Each of my previous blog items on WPF ListViews has mostly used a collection of DrinkProduct objects as the data source. This collection is bound to the Window via a DataContext and the individual columns are bound to fields in the collection. (As an alternative, this blog looked at the XML data source alternative.)

As the route from that first ListView blog to this one has become a bit murky, I'm going to start off by recreating the DrinkProduct class and creating the collection. I've taken the opportunity to add a few new properties which will be used in this and the upcoming ListView blogs.

You can view the revised DrinkProducts class code here.

The XAML markup for the start state of the ListView is in two locations. The ListView itself is in a WPF Window: 

All the Resources - GradientBrush, Styles, DataTemplates for ColumnHeaders and Cells - are in the Application.xaml file. You can see the markup for these here.

If the Resources looks like a lot of markup, it breaks down into much less if you analyze it. There's a GradientBrush, a couple of Styles, then the DataTemplates, which are really only slightly tweaked versions of two simple templates.

At this stage the ListView looks like this:

ValueConverters
In this blog I want to demonstrate a simple example of the creation and use of a ValueConverter in WPF. ValueConverters are particularly useful in situations where you are using data binding to directly populate elements in the UI. By definition, this means that the data from the fields of the data source are passed untested from the source to the display.

This data will often be in a raw state, e.g. primitive types such as integer, double, boolean, etc.   In the first example I will use integer values that represent the quantity of stock remaining of the various drink products. These will be displayed in a new column of the ListView.

Although the DataTemplates created earlier can alter the core properties of all the values in the column - Foreground, Bold font, etc,- they don't offer any mechanism for analyzing these values and changing the look of the display of an individual value based on some criteria. For instance, changing the color of the text if the value is negative.

The way to achieve this kind of fine tuning is to use a ValueConverter. This automatically intercepts the data as it is being fed in from the DataContext, analyzes the value and makes any appropriate settings or changes to the display of this piece of data.

A Simple ValueConverter
Let's start with something simple, a ValueConverter that analyzes the quantity held in stock and if that value is less than a particular threshold, the figure is displayed in red in the ListView. This will give an easy introduction to the steps involved.

Before getting round to the ValueConverter I need to add a new column to the ListView, the column that will display the quantities held in stock. First a couple of DataTemplates - one for the column header and for the cell:  

Followed by the additional column in the ListView itself: 

With just the raw quantity values showing in the new column, the ListView now looks like this:

For the sake of example, let's say that we want to highlight in red all values that are less than 200. First we create a class that implements IValueConverter. This implementation requires two methods - Convert and ConvertBack - each with a standard signature. Here is the code, which can be placed in a file of its own or - as I have chosen to do - appended to the end of (but not inside!) the Application.xaml.vb file:  

As you can see from the comments, I have chosen to test that a Brush object is passed in to the method. This isn't mandatory but is often worth including.   The second test in the Convert method checks the value of the current field and if it finds the value to be less than 200, Returns a Red Brush, otherwise it Returns a MediumBlue Brush.

Clearly, what is needed next is some mechanism that is watching for those returned values and making use of the particular brush that is returned. This is handled in the markup in the Application.xaml file.  If you are wondering why the markup is in Application.xaml and not the Window that contains the ListView, the reason is that we need to set the conversion on the DataTemplate that formats the Quantity column. And that DataTemplate is in Application.xaml.

As things stand, the XAML markup is unable to access the code above directly. So the first requirement is to map the current project into an XML namespace, making it possible to create a direct link between the two. The syntax for this is as follows:  

which is placed in the Application.xaml file, just below the default XML namespaces which are placed there automatically. This now gives the ability to refer to the IntegerToBrushConverter in the XAML markup. (You may find that you have to Rebuild the solution to remove the wavy blue error mark after you first enter this. )

Now that the mapping is in place, I can create an instance of the IntegerToBrushConverter class and assign it a key so that it can be referred to in the XAML. 

The final step is to use this instance of the converter inside the DataTemplate for the Quantity column. This markup is in the Application.xaml file: 

The only change is to the Foreground property in the markup,which I have changed from the original hard-coded value of MediumBlue to the Binding you can see there. The syntax is reasonably straightforward:

• The Path has to be an Integer type because that is what the IntegerToBrushConverter expects.
  
• The relevant Path points to the field that the column is being databound to - Quantity.
  
• The Converter in the Binding refers to that instance of the IntegerToBrushConverter created a few moments ago and given the key of 'QtyConverter'.

 The resulting display when the project runs is now:

Just to briefly cover the ConvertBack method, you can see from the commenting that this method isn't of use to us in this scenario. However, IValueConverter requires that it is included, so we simply throw an Exception if this method should be accessed at any point.

This has been a very simple example of using a ValueConverter, but it includes all the key steps. I plan to cover some more complex scenarios in later blogs.

In the previous blog, I created a simple ValueConverter that analyzed the data bound values and set the Foreground color of a TextBlock based on whether the value was less or more than a cut off value of 200 units. In reality, these preset values (such as the 200 in that demonstration) are rarely that rigid and you often need some flexibility in the analysis. To continue the example of a collection of drink products, it might be more realistic to compute a cut off value on the fly. For instance, if you know your annual sales for an individual item and you know the quantity you have in stock, you might want to highlight those items that need to be re-ordered. If it's a big selling item, the value of 200 may be far too low as a cut off; conversely an item with low annual sales might only need to be re-ordered when the stock is down to a handful.

So, how do we include this kind of calculation in a process where the value is data bound, but we need to apply some arithmetic to more than one field? The answer is to use MultiBinding and a MultiValueConverter.

You create a class that implements IMultiValueConverter. The core difference between this class and the one created in the previous blog is that the 'value' parameter of the Convert method is renamed to 'values' and is an array, not a single object. Armed with that array, you can pass in the values of two or more of the fields of your data source, run the calculations and Return a result.

Take a look at this class:

It is similar to the converter class created in the previous blog, having the same two methods, Convert and ConvertBack.    Note that this class implements IMultiValueConverter and the first parameter being an array as mentioned earlier.

In the Convert method, I have included the test that confirms that the correct Target Type has been passed in. Two variables, QtyHeld and AnnualSales are created and you will see that their respective values are taken from the two elements of the array named 'values' passed in as a parameter. We will need to look at how those array elements are notified to the converter in a moment.

Continuing with the Convert method, a test is included to avoid any divide by zero errors. I have chosen to Return a different colored Brush, but it could have been left to the default of MediumBlue if preferred.

The 'RestockLevel' variable could have been left out and the calculation that it uses could have been placed inside the If statement in the final line. But I felt that it is easier to read in the more verbose approach. The gist of these two lines is to divide the annual sales figure by 12 in order to find the average monthly sales. If the Stock held is less than one month's worth, then a Red Brush is returned, otherwise a MediumBlue one.

So, how do the values in the array get passed in to the Convert method? The answer is that a MultiBinding is used in the XAML. This is a similar approach to the single ValueConverter example seen previously, except that this time two Paths are required - one for the Quantity field and one for the AnnualSales field of the data source.

Assuming you are using the same project as in the previous blog, there is already a namespace mapping named 'local'. You then need to create an instance of this new converter class:

The DataTemplate for the Quantity column cells will contain the MultiBinding. Here is the markup for this: 

The Element.Property syntax is used to allow for the multiple sub elements. The MultiBinding is created and set to point to that instance of the StockLevelConverter class, which has been keyed as 'StockChecker'. The two paths which are passed in to the StockLevelConverter are listed next. Note that the array is filled in the order in which these paths are listed - that is values(0) will take the Quantity field values and values(1) will take the AnnualSales field values.

That's all there is to it. If I create some arbitrary dummy data for all the properties of the DrinkProduct class collection (i.e. including the Quantity and AnnualSales figures) and run the project, the resulting ListView will look like this:

If you're interested in trying this out, using the class code from the previous blog but can't be bothered to create your own dummy data, here is the collection I created:

Don't forget to include the DataContext in the code-behind of Window1, the Window that holds the actual ListView:

 By the end of the previous blog item on the topic of the WPF ListView, the ListView looked like this:

In this blog I want to look at ways of changing the look of the rows. You may, for example, want to assign a background color to the rows. And based on what we have done so far, you might be tempted to edit the DataTemplates used for the cells. Maybe you would think about adding a Border with a Background fill and placing this around the TextBlock for each cell:  

I won't waste the space showing the markup for all three templates here, but if you did try this you will get a disappointing result:

Pretty ugly, I think you'll agree. Playing around with the Margin or Padding won't get you any further either.

The answer is to use the ItemContainerStyle property of the ListView. This opens up a number of choices for you. Firstly, if you would like to still have a gap between each of the columns - but an even gap - then you can take the following approach:  

This will produce the following output, which is an improvement:

If you want the light green to spread across the whole row, then you still use the ItemContainerStyle, but this time you set the Background property of the ListViewItem:  

Now you get the result you are probably looking for.

If all that whiteness in the background is a bit too much for you, then of course you can blend another shade of green into the mix by setting the ListView's Background property. Using SeaGreen, for example, will produce this:

The final markup for the ListView looks like this:  

The markup for the DataTemplates and Styles is the same as that shown in the previous blog, all of which I placed in the Application.xaml file (App.xaml for C# projects).

There are some other row formatting options I want to cover, but I will leave those for another day.

Sometimes it's the tiniest little changes that make you happy out of all proportion to the size of the change. While testing the WPF features in VS2010 I was totally thrilled to discover that at last when you type in the opening curly brace in the XAML Pane, you get an Intellisense list of useful choices. The top one, of course, is StaticResource. If I had a penny for every time I've laboriously typed out that name, I'd be a rich man!

The same feature also offers other commonly used properties such as Binding. And once you have entered 'Binding' and a space, you also get Path, again courtesy of Intellisense.

On the subject of DataBinding, which is a key feature in WPF of course, the Properties Pane has been improved. Now if you select a control such as a ListView, the ItemsSource property is available in the Properties Pane and you can select the Binding from the available choices:

Maybe I've missed a trick, though, because when I tried to drill deeper into the ListView components and looked at the binding for a GridViewColumn, there didn't seem to be a way to select a value for the DisplayMemberBinding. If in the XAML Pane I manually typed in a valid Path, i.e. a field from the data source behind the DataContext, then that would be shown in the Properties Pane. But I couldn't find an option to switch the Path to a different field within that dialog.

I quite liked the way you can now view and choose from all the Resources in scope. This example shows where I am building a ListView and using a CellTemplate, for instance:

I noticed that when using the Properties Pane in this way, it can have an annoying habit. You close the dialog window by clicking anywhere outside it (i.e. it doesn't have a close/x button). If you are careless about where you click, you will deselect the current element in the XAML Pane. Often, if you click in the Design Pane to deselect, you will be taken back to the root element. It would be nice if a close button is added to the dialog windows at some point.

You can also pick and assign a saved Style for the Style property of any element. In this example I am offered all the previously created styles which can be assigned to a TextBlock element:

Another super improvement in the Properties pane is the color picker feature. If you select a property which can be assigned a color (well, to be more accurate, a brush), then you can click on the little down arrow at the right hand side of the property in the Properties pane and a color picker dialog will appear:

This example shows the Background property of a TextBlock. You can play with the color picker until you have the exact look you want. if you've used Expression Blend you'll recognize this layout.

You can still select a named color if you want. The drop down list is at the bottom left of the color picker:

Overall, I like the new look of the VS2010 editor and the new features I've found so far.