This tutorial is done entirely in Blend and without a line of code.

Step 0) (for the DataGrid only)

Go to Code Plex and download the WPF Toolkit. Extract to a convenient location.

Right-Click on the References folder in your project tab and click “Add Reference…”

Navigate to the location you extracted the WPFToolkit.dll file, select it and hit OK.

Step 1) Select the ComboBox you wish to change and edit the ControlTemplate by right-clicking and selecting “Edit Control Parts (Template) –> Edit a Copy…”

Step 2) Find the ItemsPresenter. This is what would normally display our ItemsSource.

We’re going to get rid of it. And the ScrollViewer for good measure.

Step 3) Where the ScrollViewer is, put in a ListView or a DataGrid, whichever one you’re using.

Now, go the properties of that ListView or DataGrid and click on the box to the right of “ItemsSource”

and, in the resulting menu, select “Template Binding –> ItemsSource”.

Set the DataContext of the ListView or DataGrid to the DataContext of the parent ComboBox using the same process.

And… you’re done! Open the ComboBox and you will see that you can select items in the ListView or DataGrid in the ComboBox dropdown and see those items change the selection of the ComboBox.

You’ll notice that this is probably not yet an ideal solution. For example, when we select an item, the dropdown doesn’t automatically close. Your best bet is to use the SelectionChanged event to trigger some logic to close the ComboBox dropdown.

One of the things we had to do was swap out ControlTemplates so that we could display a caret to indicate ascending or descending lists. We ended up deciding on ControlTemplates over DataTemplates because the DataTemplates would only work for ListViews that had no custom DataTemplates for the headers. We’re doing all sorts of crazy stuff with our headers and we need to preserve our DataTemplates, so this wasn’t an option.

In any case, I was having no luck finding the resource when I named it this way:

<ControlTemplate x:Key="MyCustomControlTemplate" TargetType="{x:Type GridViewColumnHeader}">

I was using the following code to try and find the resource.

ControlTemplate myNewTemplate = (ControlTemplate)Resources["MyCustomTemplate"];

However, we were able to solve the problem by naming the resource this way

<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:MyCustomListView}, ResourceId=MyCustomControlTemplate}"
         TargetType="{x:Type GridViewColumnHeader}">

And then using this code to access it.

ComponentResourceKey myCustomTemplateKey = new ComponentResourceKey(typeof(SortableListView), "MyCustomControlTemplate");
ControlTemplate myNewTemplate = (ControlTemplate)this.TryFindResource(myCustomTemplateKey);

Just thought I’d pass it along.

Normally, I’ve been creating listviews that look like this:

<ListView x:Name=”MyListView”
               ItemContainerStyle=”{DynamicResource MyListViewItemContainerStyle}”>
    <ListView.View>
         <GridView ColumnHeaderContainerStyle=”{DynamicResource MyListViewHeaderStyle}”
                         ColumnHeaderTemplate=”{DynamicResource MyGridColumnHeaderTemplate}”> 

I did this because I didn’t know exactly how to assign these styles and templates to the ListView Style. In the style, ColumnHeaderContainerStyle and ColumnHeaderTemplate are not properties of the ListView, they are properties of the GridView… which you can’t create a style for.

Instead, you can encapsulate all the information above in the following style.

<Style x:Key=”CustomListViewStyle” TargetType=”{x:Type ListView}”>
      <Setter Property=”GridView.ColumnHeaderContainerStyle” Value=”{DynamicResource MyListViewHeaderStyle}” />
      <Setter Property=”GridView.ColumnHeaderTemplate” Value=”{DynamicResource MyGridColumnHeaderTemplate}” />
      <Setter Property=”ItemContainerStyle” Value=”{DynamicResource MyListViewItemContainerStyle}” />
</Style>

Problem solved.

The solution ended up being so easy in WPF that I thought I’d post it here.

I’m in a two-birds-one-stone mood, so we’ll do this for both the listview, which will also cover a more traditional scrollviewer. Let’s start with our ever friendly listview.

At the very sight of this thing, with a stylus in hand, your average lefty is thinking to him or herself “I wonder if I can do my work upside down?” Let’s show them that we love and accept them just as they are.

The first thing we’re going to do is create a new template for this sucker, so right click on your listview and go to “Edit Control Parts (Template) -> Edit a Copy…”

Now we’re looking at the standard listview template. Mine looks like this:

Let’s dig right into the ScrollViewer. If you’re doing this from the listview (like I am) then creating a template for the listview has already created a template for the scrollviewer. If you’re starting from a basic scrollviewer, you can pretty much start right here.

For the purposes of making this thing easy to work with in Blend, go ahead and set the HorizontalScrollBarVisibility and VerticalScrollBarVisibility to Visible.

And then “Edit Control Parts (Template) -> Edit a Copy…” (or “Edit Control Parts (Template) -> Edit Template” if it is available).

We are now looking at the guts of the ScrollViewer Control.

ListView ScrollViewer will look like this:

The normal ScrollViewer will look like this:

For our purposes, they’re functionally the same. It is actually a fairly simple control… basically just a Grid panel with the columns and rows set up like so:

<Grid.ColumnDefinitions>
      <ColumnDefinition Width=”*“/>
      <ColumnDefinition Width=”Auto“/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
      <RowDefinition Height=”*“/>
      <RowDefinition Height=”Auto“/>
</Grid.RowDefinitions>

The scrollBars are set up so that their visibility is tied to (duh) the visibility that is set on the control. But what this does is it means that when they are collapsed… they Grid reclaims the space that they were taking up.

Now… here’s the hilarious part… in order to make this ScrollViewer left handed, all you have to do is swap the Grid.Columns:

<Grid.ColumnDefinitions>
      <ColumnDefinition Width=”Auto“/>
      <ColumnDefinition Width=”*“/>
</Grid.ColumnDefinitions>

You’ve now switched the columns so that the left handed column is auto. Here’s a list of the Grid.Column realignments you’ll need to make:

Change Column to “1″:

• PART_HorizontalScrollBar
• All DockPanels (ListView only)
• PART_ScrollContentPresenter (ScrollViewer only)
• Corner (ScrollViewer only)

Change Column to “0″:

• PART_VerticalScrollBar

Basically, swap everything from in the two columns.

Done.

If you want to make this a more robust control, I recommend creating a ScrollViewer with an additional dependency property (IsSouthPaw or something). Make it so that your Grid has three columns:

<Grid.ColumnDefinitions>
      <ColumnDefinition Width=”Auto“/>
      <ColumnDefinition Width=”*“/>
      <ColumnDefinition Width=”Auto“/>
</Grid.ColumnDefinitions>

And then you can just create a trigger that swaps the column placement of your PART_VerticalScrollBar. Such a trigger will look something like this. And by “something”, I mean “exactly”.

<Trigger Property=”IsSouthPaw” Value=”True“>
      <Setter Property=”Grid.Column” TargetName=”PART_VerticalScrollBar“  Value=”0” />
</Trigger>

Go forth and make Ned Flanders proud.

By the way, I listen to pop punk whenever I write my tutorials and I just thought I should let Senses Fail know that they can probably get away with about 80% less “dying cat” screaming and still put out good music. You know… because they’re probably WPF programmers on the side and they’ll probably read this to solve all their left-handed scrollbar needs.

 Finally, I went looking online for an answer and discovered a list of possible performance killers for the ListView (and ListBox) on Mark Shurmer’s blog. Chief among his no-no’s:

Embedding the ListView inside a StackPanel

Which is exactly what I was doing.

Why is this a problem? To answer that question, let’s take a look at the ItemsPanel at runtime using Snoop. When I place my ListBox into a Grid, here is what my ItemsPanel looks like:

If I change back to what I originally had (my ListBox in a StackPanel), here is what my ItemsPanel looks like:

That’s actually not even the end of it. That’s about half.

As far as I can tell, all of Mark’s suggestions have to do with making sure that the VirtualizingStackPanel can do what it needs to do in order to keep your program running at a reasonable rate. Good stuff.

So you have a column header and you want the text inside to wrap when the header space gets too short for the content. Your header probably looks something like this:

First, go to wherever your resources are being held and type the following in:

<Style x:Key=”CustomHeaderStyle“ TargetType=”{x:Type GridViewColumnHeader}“>
</Style>

Now, go over to your resources tab (usually on the far right) and click on your “CustomHeaderStyle”:

Blend will take you into the Design mode for your style. Go to the “Layout” section and expand the advanced properties. You’ll see that the HorizontalContentAlignment is, by default, set to “Center”. Let’s go ahead and change that to “Stretch”.

Now go to your ListView in the XAML and find your GridView. Assign the following property to your GridView:

<GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}” >

Now, your header looks like this:

Now we just need to tell the DataTemplate holding the actual text that it is OK to let that text wrap. In your resources, create a DataTemplate like the one below.

<DataTemplate x:Key=”WrappingHeaderTemplate“>
      <Grid>
            <TextBlock Text=”{Binding}” TextWrapping=”Wrap” />
      </Grid>
</DataTemplate>

Highlight your target ListView in the Objects and Timeline window and scroll all the way down in the properties window, expanding the “View (GridView)” section at the bottom.

Click on the box to the right of the ColumnHeaderTemplate property, expand the “Local Resource” section and select your new data template.

Your GridView will look like this:

<GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}“ 
      ColumnHeaderTemplate=”{DynamicResource WrappingHeaderTemplate}“>

and your listview header should now look like this:

If you’re really picky and you want your header to be centered (see how “Title” is left aligned?) , go back into your DataTemplate (as seen above) and set your Grid to the following:

<Grid HorizontalAlignment=”Center“>

Your header should now look like this:

You’re awesome.

I’m going to sleep.

This is a bit of an advanced tutorial. I’m putting it up because I just figured out how to do it and I want to share. You can also download the project files for this tutorial (in zip format… requires .Net 3.5).

Recently, I received from my user experience designers a wireframe that looked something like this:

As you can see, there are embedded categories (categories within categories) here. I considered many solutions (hacks), but I found that a deeper understanding of the ListView and how it works would allow me to resolve this issue very simply (and without even touching the code behind).

<Exposition>

So… within every ListView, there is a Gridview that holds a set of GridViewColumns. What I didn’t realize until a couple days ago was that when you put the GridViewColumns into the GridView, you’re implicitly handing the GridView a GridViewColumnCollection.This collection is then referenced by the GridViewHeaderRowPresenter (located deep inside the ListView Template) and the GridViewRowPresenter, which is located inside the ListViewItem template (which I usually get to through the ItemContainerStyle… see here for more details).

Anyway, these two presenters databind back up to the GridView to grab the GridViewColumns that we’ve defined.

Once I understood that, I realized that I could create a GridViewColumnCollection as a resource and the reference it inside some custom templates.

At this point, I get the feeling that some readers are just hearing “blah blah blah”. It’s actually easier to demonstrate than it is to explain. So let’s get to it.

</Exposition>

We’re going to grab the header image from the New York Times RSS feed and display it in its own column while displaying all the accompanying header data under a broad Images header with sub-columns called Title, URL, and Link. It will look like this:

Resources

First, lets deal with all the resources we need. Take note that this part will be pretty XAML heavy.

Create a resources section. If mine isn’t in a separate resource dictionary, I usually just create it at the top of the window as seen below.

<Window.Resources>
</Window.Resources>

All your resources stuff will go in between those two tags. 

Create a GridViewColumnCollection in the resources:

<GridViewColumnCollection x:Key=”ImageColumnCollection“>
      <GridViewColumn Header=”Title” />
      <GridViewColumn Header=”URL” />
      <GridViewColumn Header=”Link” />
</GridViewColumnCollection>

Now, go through the motions to getting your RSS feed. Follow the steps I lay out in my post on getting the New York Times RSS feeds, except that, instead of clicking on the item(Array), click on the image section. Continue on with the “Create Data Template” option to get your RSS bindings automated.

Grab the bindings in this template and put them into the DisplayMemberBinding property in the GridViewColumns. Your GridViewColumnCollection should now look like this:

<GridViewColumnCollection x:Key=”ImageColumnCollection“>
      <GridViewColumn Header=”Title”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=title}“  />
      <GridViewColumn Header=”URL”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=url}“   />
      <GridViewColumn Header=”Link”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=link}“   />
</GridViewColumnCollection>

Now that we have our GridViewColumnCollection in place, let’s create some stuff that will actually use it.

Create a new empty Data Template. If you’re still uncomfortable digging into the XAML itself, you can just type the following in:

<DataTemplate x:Key=”MultiColumnHeaderTemplate“>
</DataTemplate>

And then go to your resources tab and double click on it to make it accessible in the design mode.

The way I set this up was very simple. I put in a grid with two rows set to auto, put a TextBlock in the top one and a GridViewHeaderRowPresenter into the other one. The TextBlock at the top is bound to the Header Content with a simple binding:

Text=”{Binding}”

The real trick is that the GridViewHeaderRowPresenter is bound to our Columns resource by simply entering the following property:

Columns=”{DynamicResource ImageColumnCollection}”

Now, each column in that collection will send its header information to be handled by this particular GridViewHeaderRowPresenter.

Our final header data template looks something like this:

<DataTemplate x:Key=”MultiColumnHeaderTemplate“>
      <Grid>
            <Grid.RowDefinitions>
                  <RowDefinition Height=”Auto” />
                  <RowDefinition Height=”Auto” />
            </Grid.RowDefinitions>
            <TextBlock Text=”{Binding}”
                  HorizontalAlignment=”Center“/>
            <GridViewHeaderRowPresenter Grid.Row=”1”
                  HorizontalAlignment=”Stretch”
                  Columns=”{DynamicResource ImageColumnCollection}” />                                       
      </Grid>
</DataTemplate>

That takes care of our headers… what about our item data? How do I get this data to fit into the proper columns? This was a problem I struggled with for quite some time until a friend of mine pointed out that the GridViewRowPresenter in the ItemTemplate could be extracted and used where ever I wanted to use it. Resultingly, I could place it into the CellTemplate of my Image Information column to compliment the placement of the GridViewHeaderRowPresenter in the Header of that same column.

If you’re following along and trying hard to learn, create a new DataTemplate and just toss a GridViewRowPresenter into it, binding it to the same column collection. Or you can just copy and paste the XAML below. Your choice.

<DataTemplate x:Key=”MultiColumnCellTemplate“>
      <Grid>
            <GridViewRowPresenter HorizontalAlignment=”Stretch”
                  Columns=”{DynamicResource ImageColumnCollection}” />                                       
      </Grid>
</DataTemplate> 

This will be the basis of our embedded column design. We’re almost there, let’s just tie up some resources loose ends.

In order to get the image to show up in the “Image” column, we need to create a handy little DataTemplate to display that image. Simply have an image in the Data Template and have the Source property point to the url binding for the image like so:

<DataTemplate x:Key=”ImageTemplate“>
      <Image Source=”{Binding Mode=OneWay, XPath=url}” />                                       
</DataTemplate> 

OK… we are now ready to actually do something outside of our resources. Don’t worry, this will be fast.

Main XAML Composition

If you haven’t already drawn a ListView in your main window, do so now.  Right click on the ListView and  go to Bind ItemSource to Data…

In the resulting pop-up choose your RSS Feed (mine is called NYTTech) and select the image option from it.  (If you haven’t added the RSS feed, just copy and paste the line below to the top of your resources.)

<XmlDataProvider x:Key=”NYTTech”
      d:IsDataSource=”True”
      Source=”http://www.nytimes.com/services/xml/rss/nyt/Technology.xml” />

Now, in the interest of time, we’re going to go right into the XAML. If you’re interested in seeing how to do this using Blend only, check this post out. Trust me, it’s not worth it.

Because we’ve already constructed most of what we need in the resources, we only need to do a couple things here. First, create two GridViewColumns, one with

Header=”Image“ 

and another with

Header=”Image Information”

In the Image column, set

CellTemplate=”{StaticResource ImageTemplate}”

In the Image Information column (which is our column with embedded columns), we just need to point to our already constructed templates like so:

<GridViewColumnHeader Header=”Image Information“ 
      HeaderTemplate=”{StaticResource MultiColumnHeaderTemplate}“ 
      CellTemplate=”{StaticResource MultiColumnCellTemplate}” >

Go ahead and run the project and you’ll see that we have one tiny little problem left.

Because the default content alignment of the header style is to center everything, all of our columns are misaligned. To solve this problem, copy the following style into your resources:

<Style x:Key=”StretchHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
      <Setter Property=”HorizontalContentAlignment” Value=”Stretch“/>
</Style>

And point to it in your ListView GridView with a :

ColumnHeaderContainerStyle=”{StaticResource StretchHeaderStyle}”

At the end, your ListView should look like this:

<ListView IsSynchonizedWithCurrentItem=”True“>
      <ListView.View>
            <GridView ColumnHeaderContainerStyle=”{StaticResource StretchHeaderStyle}” >
                  <GridViewColumn Header=”Image“
                        CellTemplate=”{StaticResource ImageTemplate}” >
                   <GridViewColumn Header=”Image Information“ 
                        HeaderTemplate=”{StaticResource MultiColumnHeaderTemplate}”
                        CellTemplate=”{StaticResource MultiColumnCellTemplate}” > 
            </GridView>
      <ListView.View>
</ListView>

And if you hate writing XAML, you notice with a grateful heart that I’ve posted every bit of XAML you need right here. Additionally (and this is a first for this site), because of the complexity of this post, I’m offering this project as a downloadable zip file so you can tweak it or futz with it at your convenience.

Embedded Columns Project Files (in zip format… requires .Net 3.5)

 Styling the gripper is actually pretty easy. First, take a look at my Styling the ListView Column Header post. Follow that along until you get to the template for the ColumnHeader (by the fifth image down).

You should have something that looks like this:

Now we’re going to ignore everything here except that little part at the bottom the “PART_HeaderGripper”

A point of note: Perhaps I’ll go over this more some day, but we’ll just mention it in passing:

Do NOT change the name of that thing.

When you see something in a template with the prefix “PART”… Well, Robby Ingebretsen talks about it here:

“PART_” is just a naming convention.  It means that the control expects an element with that name to exist in the template and will be looking for it.  Think of it as a way to flag that element as important and an indication that the name shouldn’t change. The control could be looking for that element for a variety of reasons.

So this gripper is essential to the proper functionality of the column header.

But that doesn’t mean we can’t futz with it right?

The thing about the gripper is that its parent template (the GridViewColumnHeader template) holds all the triggers that control the IsMouseOver and IsPressed state. If you want to alter those, make sure that you either:

• Do it in the GridViewColumnHeader template (just change the triggers as they currently are)
• Get rid of the triggers in the GridViewColumnHeader template so they don’t interfere with your own triggers.

The difference of course is that if you use the second option, your gripper will only perform the triggers when the user is directly over the gripper itself while in the first option, the triggers will fire off when the user is over any part of the column header. The user design side of me loves the second option because it is a much clearer indication to the user that they are about to do something with the gripper itself.

Besides, when I decide to mess with the gripper, I’m usually doing a major overhaul of the thing. So lets go into the guts of the gripper by right clicking on the gripper in the Object and go to:

Edit Control Parts (Template) -> Edit Template

The Gripper is a “Thumb” control. You can also see more examples of Thumb controls acting as the scrollbars in the ScrollViewer template. Unlike the ScrollViewer, this Thumb control is the most boring template you’ve ever seen… it’s Border with a Rectangle in it.

But boring is good because we can go in and change everything we need really easily. The rectangle is the piece you can see and the border defines the clickable area. From here, you could make the gripper a smiley face if you wanted.

Such is the power of WPF…

In this post, we’re going to change the default color of the header (background and foreground) and make the headers look more like bubbles. Why? Because we can! (Everytime I say that, somewhere a usability expert loses a little bit of their soul.)

Take note that anything done in this will affect the whole header. If you’re looking to do something to one individual column in the header, you need to go to this post on ColumnHeaders (coming soon). See the bottom of this post for more details.

As a point of note, the easy way in this particular case involves going directly into the XAML and the hard way involves going through the steps in Blend. The easy way is posted at the bottom.

Now for the hard way. First, go to your listview, right click on it and go to:

Edit Control Parts (Template) -> Edit a Copy…

You’ll be given the basic template of your listview. Right-click on the scrollviewer and go to:

Edit Control Parts (Template) -> Edit Template

You’ll be given the default scrollViewer template for the specialized scrollViewer used in the ListView. In addition to the normal scrollviewer parts, it has a control that acts as the holder for the header called the “GridViewHeaderRowPresenter”. 

Highlight the GridViewHeaderRowPresenter (which I am renaming “steve” so I don’t have to write that anymore) and, in the menu, go to:

Object -> Edit Other Styles -> Edit ColumnHeaderContainerStyle -> Edit a Copy…

This is where we are going to want to change the foreground and background.

Go over to the Properties panel to the right and click on foreground, giving it a solid color brush (I’m going to use a dark blue). Do the same thing with the background (light blue)and the BorderBrush (blue gradient) (you’ll see why in a moment).

Now my style looks like this in the XAML:

<Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
      <Setter Property=”Background” Value=”#FFCDE7F4” />
      <Setter Property=”Foreground” Value=”#FF07034B“/>
      <Setter Property=”BorderBrush“>
            <Setter.Value>
                  <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0“>
                        <GradientStop Color=”#FFA1CCE0” Offset=”0“/>
                        <GradientStop Color=”#FFABD5EA” Offset=”1.0“/>
                  </LinearGradientBrush>
            </Setter.Value>
         </Setter>
   <Setter Property=”Template“>
      …
</Style>

 and my column headers look like this in the composition (zoomed in to 200%):

But wait… there’s more. Right click on your ColumnHeaderContainerStyle in the Objects and Timeline panel and select:

Edit Control Parts (Template) -> Edit Template…

Finally, we are in the real guts of the header template, which means we have all the bits and pieces to make it work.

Note: I’ve recently had a comment on how to style the header gripper (the part of the column header that allows you to resize the column), but this post is already getting way too long, so I deal with it in this post over here (coming soon).

OK, so now we can really get at the look of this sucker. If you’re using Vista, you probably have some Borders with names like “UpperHighlight”, “HeaderHoverBorder”, and “HeaderPressBorder”. These are borders that alter the look of the headers when certain triggers are active. We’ll be ignoring them for the sake of simplicity.

(At this point, my readers are saying to themselves, “Simplicity? SIMPLICITY? At what juncture in this entire post have we even approached simplicity.” To which I reply “Hey, don’t kill the messenger.”)

So go to the highest border (in my case, it’s called the “HeaderBorder”) and do the following:

• BorderThickness=”1,1,1,1“
• CornerRadius= “6,6,6,6“
• Margin=”2,0,2,0“

The header now looks like this:

This is the hard way because it uses Blend exclusively without touching the XAML.

The Easy Way

The easy way is also the better way from a XAML perspective. Simply create a  create a Style like so:

 <Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
</Style>

and add it to your ListView like this:

<ListView>
      <ListView.View>
            <GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}“>
            ….

Access it though your resources tab to get to the visual designer interface for your new style:

Once you’ve done this, you can skip directly to the part of the tutorial where you start changing the foreground and background.

Hopefully, at this point you feel like you have a pretty decent handle on the basics of styling your header section. Because it’s getting really late and I’m getting really tired.

But before I go, let’s get one thing absolutely clear: When it comes to ListView headers, you can technically do most of this in the data template, but if you do, you’ll make baby Jesus cry.

Here is why. By doing things as we have done them above, we get the following:

If we do all this work in the data template, we instead get this:

Which brings about the aforementioned consequences. You’ve been warned.

Questions about column headers:

• How do I wrap text in a header?
• How do I make headers sort columns (and how do I style for that)? (coming soon)
• How do I make one header look different than the other headers? (coming soon)

 First things first… getting to the ItemContainerStyle using Blend. With the ListView selected, go to the top menu and click:

 Edit Other Styles -> Edit ItemContainerStyle -> Create Empty…

Name your Style and you get tossed into Style editing. Here, you can do all sorts of great things, like… um… changing the background or something.

 OK, I’ll fess up, I’ve found the ItemContainerStyle to be good for the following things (and not too much else):

• Giving your items a nice border.
• Changing up and down margins (how far apart your  items are from one another)
• Changing the HorizontalContentAlignment (like in this post on centering items in a column)
• Changing the VerticalContentAlignment (if you have a thick item, you can get your data to align to the top or center or whatever)

However, in order to get to the real fun stuff with ListView items, we want to go into the ItemContainerStyle template. So right-click on the “ItemContainerStyle” in your “Objects and Timeline” panel and go to:

Edit Control Parts (Template) -> Edit a Copy…

And now you have a copy of your default ListViewItemTemplate. If you want a good example of how a lookless control is constructed, head here. You’ll see how they use split grids and transparent gradients to get a look that maintains it’s feel even when the base background is changed. I’m working inside Vista, so this is what the visual tree of my ListViewItemTemplate looks like:

But if you’re like me, what is interesting about this particular template is not the visual tree… it is the triggers that the template hands to you. Lets look at these triggers one by one.

(If you don’t know where the triggers are, they’re above the Objects and Timeline pane and they look like this:

Clicking on a trigger will give you a preview of what that trigger looks like and will also allow you to change the properties of anything inside the template that will implement when the trigger is active.

You can put these same triggers into your ItemContainerStyle and, as a general rule, I would recommend it. As a general rule, I would recommend putting as much into the style and staying out of the template for the sake of simplicity. However, the style does have some pretty significant limitations, especially in this case. So, for the meantime, we’re just going to futz with it as it has been given to us.)

IsMouseOver = True

Kind of obvious what this does.

IsSelected = True

Again, kind of self-explanitory. When an item is selected, this is what you get.

IsSelected = True and IsSelectionActive = False

This is the default state of the first item in your listview before you’ve done anything to it. I have to admit, it took me quite some time to figure that out. The designers I was working with thought this style would confuse users and so we got rid of it. If you want to get rid of it, just delete this trigger and you’re golden.

IsSelected = True and IsMouseOver = True

In this example, it is subltly different than the IsMouseOver alone, but you can see the difference.

IsEnabled = False

I vaugely recall working on a project in which I tried to get individual items to unenable and I vaugely recall it not working very well. It could be because I was trying to do it in XAML, but the example you’re seeing here is when the entire ListView has IsEnabled set to “False”

A couple of suggestion for getting a good feel of the ItemContainerStyle triggers:

• change the background when the user selects an item
• change the height when the user selects AND mouses over an item.
• change the visibility to “Collapsed” when the user mouses over an item. (This one is sure to make your users roll on the floor with laughter… shortly before they come after you with torch and pitchfork in hand.)

All of these triggers are property triggers, so they are not (as they stand) suitible for triggering any animations. If you’re interested in seeing animations in your ListView items, check out this post (coming soon).

If you’re more interested in what you can do with triggers, check out this post (coming soon).

If you’d like to have that nifty “every-other-item-is-gray” thing going on, here’s a post for you while I try to whip up something of my own.

Please sound off with any more comments if you have additional questions.