One framework to rule us all…
Silverlight, WPF

WPF ListView Styling Tutorial Part I

This quick article will enable you to take full advantage of the ListView control by creating a simple data model and through a step-by-step incremental approach. I will try to be concise and direct in order for you to keep this article as future development reference.

Lets start by creating a new WPF Window and define a base data model for our sample. We’ll create a ListView control named “ListView”:

Window and data context setup:

I’ve added an ObservableCollection with initialized 3 Person class objects to the Data Context of the control. Now let’s configure the ListView layout to accommodate the data structure we’re passing into the control’s DataContext. For this example, the GridView view mode of the ListView will be used.

Notice that in the Age and Movie columns, I’ve purposefully used a CellTemplate definition to show you cell data templating. This is what we have so far:

Capture

So this will be the base from which we will start styling. We will follow a step-by-step styling procedure for easier reference.

Step #1: ListView Column Header styling (GridViewColumn)

We’ll start by adding a few brush styles to the resources collection and then reference it in the column style. Remember that GridView columns are derived from ButtonBase, so you have access to all the behaviors derived from it.

Before we add the final header style, we’ll first add the gripper style. This will allow us to visually define the portion of the header that will respond to column resize and dragging operations.

This will add a nice touch to the UI. Now well add the style for the GridViewColumn. This style will aggregate previous resources and provide visual responses for mouse over, press and drag events:

And this is the outcome:

This sums up the first part of this ListView styling tutorial. In the [link2post id="633"]next article[/link2post], I’ll be covering in-depth styling on ListView items. For now, you can download the full sample solution here.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

9 Comments

  1. Good tutorial, txh.

  2. Better if you post your codes package.

  3. Updated article with solution sample download.

  4. Great tutorial, thank you!

  5. hi great tutorial
    how to access the subitems in that list?
    any ideas please

  6. Can you detail a bit further please?

  7. Thanks a lot for this tutorial.

  8. You’re welcome!

Leave a Reply