XTab's Blog

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.