The WPF Designer Guide To Styling the (your-favorite-adjectival-swear-word-here) ListView

So, after months of delay I finally figured that there are probably some people out there who want to figure out how to make the WPF listview look the way they want it to look.

A quick note: I will be dealing almost entirely with the listview look. If you want the listview to do something (functionality) or look a certain way and you can’t find the answer here, leave a comment with your suggestion and I’ll try to blog about it and place a link to the answer in my listview FAQ.

My goal is to create a significant repository on getting the stinking listview to look the way you want and do what you want it to do.

You’re probably here because, compared with most of the WPF controls, Blend gives very little guidance on how to deal with the listview (even though you use the listview for practically everything you do).  So we’re going to start with the basic structure of the listview. This is what the basic listview looks like in the XAML.

<ListView>
     
<ListView.View>
           
<GridView>
                 
<GridViewColumn Header=”Column Header/>
           
</GridView>
      
</ListView.View>
</ListView>

So this post will start out giving basic guidance on what to edit when you’re trying to edit the various parts of the listview. I will update these sections with links and tutorials on listview specific tasks as time goes on.

As a point of note, I recommend using an ItemSource for your listview when you’re learning ot style it. Manually putting ListViewItems into it and trying to style them will muddy the waters of good design. If you need a good ItemsSource, I recommend any of the New York Times RSS feeds.

How to connect the New York Times RSS feed to your listview

Question 1: “How do I make the items (see picture below) look the way I want them to?”

ListView_ItemContainerStyle

Answer: Use the ItemContainerStyle property in the ListView (and the associated ControlTemplate)

More on ItemContainerStyle and Blend

In the XAML:

Put this in the resources:
<Style x:Key=”MyItemContainerStyleTargetType=”{x:Type ListViewItem}>
</Style>

Put this in the composition:
<ListView ItemContainerStyle=”{DynamicResource MyItemContainerStyle}>

Question 2: “How do I make all the items in a certain column (see below) look a certain way?”

LV_CellTemplate

Answer: Use a CellTemplate in the GridViewColumn

More on CellTemplate and Blend.

In the XAML:

Put this in the resources:
<DataTemplate x:Key=”MyCellTemplate>
</DataTemplate>

Put this in the composition:
<GridViewColumn CellTemplate=”{DynamicResource MyCellTemplate}>

Question 3: “How do I make the whole header (see below) look the way I want?”

ListView_ColumnHeaderContainerStyle

Answer: Use the ColumnHeaderContainerStyle in the GridView (and the associated ControlTemplate)

More on the ColumnHeaderContainerStyle and Blend

In the XAML:

Put this in the resources:
<Style x:Key=”MyColumnHeaderContainerStyleTargetType=”{x:Type GridViewColumnHeader}>
</Style>

Put this in the composition:
<GridView ColumnHeaderContainerStyle=”{DynamicResource MyColumnHeaderContainerStyle}>

Question 4: “How do I change the layout of the header sections (all of them)?”

ListView_ColumnHeaderTemplate

Answer: Use a ColumnHeaderTemplate in the GridView

 How do I get to the ColumnHeaderTemplate using Blend? (coming soon)

In the XAML:

Put this in the resources:
<DataTemplate x:Key=”MyColumnHeaderTemplate>
</DataTemplate>

Put this in the composition:
<GridView ColumnHeaderTemplate=”{DynamicResource MyColumnHeaderTemplate}> 

Question 5: “How do I make a specific part of the header look different than another part?”
or “How do I make the red part look different than the blue part?”

 ListView_ColumnHeaderTemplate_better

Answer: Use the HeaderTemplate in the GridViewColumn

How do I get to the HeaderTemplate using Blend? (coming soon)

In the XAML:

Put this in the resources:
<DataTemplate x:Key=”MyHeaderTemplate>
</DataTemplate>

Put this in the composition:
<GridViewColumn HeaderTemplate=”{DynamicResource MyHeaderTemplate}>

79 thoughts on “The WPF Designer Guide To Styling the (your-favorite-adjectival-swear-word-here) ListView

  1. A fascinating discussion is definitely worth comment.
    There’s no doubt that that you ought to write more about this topic,
    it may not be a taboo matter but usually people do not discuss such topics.
    To the next! Best wishes!!

  2. Nice post. I used to be checking constantly this blog and I
    am impressed! Extremely helpful info specially the last part :
    ) I take care of such info much. I used to be seeking this certain info for a very lengthy time.

    Thanks and best of luck.

  3. Pretty part of content. I just stumbled upon your
    web site and in accession capital to assert that I get in fact loved
    account your blog posts. Any way I will be subscribing for your feeds and even I fulfillment you
    get admission to consistently rapidly.

  4. May I simply just say what a comfort to find someone that really knows what they are discussing on the internet.
    You definitely know how to bring a problem to light and make it important.
    A lot more people ought to read this and understand this side of your story.
    I was surprised that you’re not more popular given that you
    certainly have the gift.

  5. Great goods from you, man. I have remember your stuff
    previous to and you are simply extremely fantastic.
    I actually like what you’ve acquired right here, really like what you are
    saying and the best way in which you are saying it. You’re making it entertaining and you continue to care
    for to keep it wise. I cant wait to read far more from
    you. That is actually a great site.

  6. Awesome blog you have here but I was curious if
    you knew of any message boards that cover the same topics discussed
    in this article? I’d really love to be a part of group where I can get feed-back from
    other experienced people that share the same interest.
    If you have any suggestions, please let me know. Thanks a lot!

  7. Remarkable things here. I’m very satisfied to peer your article.
    Thanks a lot and I’m having a look forward to contact you.

    Will you kindly drop me a e-mail?

  8. It started off with publications, moved onto the Ebook reader,
    therefore revolutionizing the studying globe.
    The relaxation of my talk with Ashley was spent on two topics, both coming out of this incident.

  9. Some jailbreakers quit after the iOS 4 launch.

    I would like to request you never to reconcile at the stage you are inside
    your writing ability. The next time you need a split book a bus journey, from
    The Reel.

  10. Hello there! This article couldn’t be written any better! Looking
    through this article reminds me of my previous roommate!
    He continually kept preaching about this. I will forward
    this article to him. Pretty sure he will have a very good read.
    Many thanks for sharing!

  11. You will have another guide if you want any help published up for this.
    Would be the surfaces cleaned regularly to avoid accidents?
    Which kind of information are attendees searching for?

  12. This is when you truly do some damage to your telephone and that’s never a
    good factor to do. Move on to Spoof Genuine Sim to
    SAM, this is heading to allow the process of unlocking. We were offered an enhanced iPhone 4
    instead.

  13. People is now able to jailbreak their iPhone with no legal consequences from Apple, Inc.

    The teacher should be effectively and a ireb that could work with you properly.
    These were not rather warm scholar kinds anyways!!

  14. After that the card will get turned on and a thorough lookup system will discover it.
    This sport can occasionally be challenging but very
    addicting! Then locate the “FuriousMod” package
    and install it.

  15. Hi there to every one, for the reason that I am
    actually eager of reading this blog’s post to be updated daily.

    It includes pleasant material.

  16. The Microsoft’s regular user interface – TouchFLO is being adopted but becoming renamed to HTC
    Feeling. Depart iTunes running and by no means get in touch with it as soon as again. We were given an improved iPhone four instead.

  17. Consequently go together with the complete approach and revel in the flexibility of using iPhone on any company.
    This is exactly what allow us to throw off myths and the
    misconceptions that influence our selections.

  18. Excellent items from you, man. I’ve bear in mind your stuff prior to and you’re just too fantastic.
    I actually like what you have received right here, really like what you’re stating and the best way wherein you assert
    it. You make it entertaining and you still take care of to stay it
    wise. I cant wait to learn far more from you. This is
    actually a terrific website.

  19. Sweet blog! I found it while browsing on Yahoo News.
    Do you have any tips on how to get listed in Yahoo
    News? I’ve been trying for a while but I never seem to get there!
    Thank you

  20. To download it to your gadget, tap the button labeled Free, then faucet Install Application. As you do it, you then have to wait around
    for a couple of seconds for the notification concept to appear.

  21. Sure, I have some stragglers in my system, who does not?
    Putting score multipliers, speed bonuses and powerups proves highly addictive.
    Don’t be a laughing joke on the web.

  22. As the jailbreak ps3 arrived into the market it was extremely nicely acknowledged by gamers around the world.

    The presentations are played with reduced body price and results in slower animations and video
    clip playback.

  23. There are a llot of services out there that claim to be
    the best VPN service. However, if your consumption requires a more
    conventional VPN solution like Open VPN, this document covers the installation and configuration of the Open VPN software.

    Numerous companies are offfering VPN software in its different versions.

  24. The Toshiba Satellite L870 is the newest instance of that.

    This is a fantastic app to make notes for just about everything.
    The stunning Apple iphone five could be bailed out whenever.

    I don’t mind dropping these who are not on WeChat.

  25. When I originally commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get four emails with the same comment.
    Is there any way you can remove me from that service? Appreciate it!

  26. Hey there! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing
    many months of hard work due to no data backup. Do you
    have any methods to prevent hackers?

  27. After looking into a number of the blog articles on your blog,
    I really like your way of blogging. I saved
    as a favorite it to my bookmark webpage list and will
    be checking back soon. Please visit my web site too and tell me
    your opinion.

  28. Hello I am so grateful I found your blog page, I really found you by error, while I was looking on Bing for something else,
    Nonetheless I am here now and would just like to say thanks a lot for a fantastic post and a all round interesting blog (I also love the theme/design), I don’t have time to browse it all at the moment but I have
    book-marked it and also included your RSS feeds, so when I
    have time I will be back to read a great deal more, Please do keep up the superb work.

  29. Many of these clubs have organized competitions where you
    can showcase not only your latest model, but also your driving prowess and talents.
    However, iif buildin RC cars is your issue, you can purchase the build it
    yourself kit. $100 cheaper than an entry-level electric hobby class vehicle.

  30. This pertains to a set of criteria that manufacturers must meet in order
    to qualify their green electronic products, like desktop computers, integrated desktop computers, notebooks, workstation notebooks, workstation desktops and thin clients,
    as certifiably safe and friendly to the environment.
    That’s why credit report monitoring has become such an essential safeguard againstt identity theft and other attacks.
    There are a few reasons why employers use a credit report
    as a tool for hiring.

  31. The emerald has shade variations including greens that are
    greenish-blue to deeper. Hence iPhone 3G will be an excellent, wonderful gift to your family members.
    It requires a chunk from the life – 18 months.

  32. You have been playing with its trendy features, installing applications, and listening to your favorite songs.
    While I can comprehend the former, I simply can’t agree with the latter purpose.

  33. They’re an easy task to understand and grasp, while being extremely entertaining and addicting to play.

    You enter your location and merely convert for
    the Around Me iPhone request. If there are any in stock, you will locate them there.

  34. You shut it, and the iPad 2 extends back to sleep.
    This might be a store that will resolve the Apple
    items. A rear-facing 0.7 MP camera, and a front-facing VGA camera.
    It allows you to execute your job effortlessly.

  35. The only way to shed your jailbreak is to restore from a
    backup or set up a long term software update from Apple.

    It enables you to install the third-party programs.
    For people on the go, skinny wallets are all the rage.

  36. Once again, really great tutorial, Matthias. I find myself constantly coming back to your site for solutions relating to customizing listviews.

  37. I have tried to implement the selected item style shown in the tutorial but it seems to apply the gradient to the entire background. If a black and white gradient is used and you select a row on top it might be white, then select a row on bottom and it will be black. I need to have the row itself show the entire gradient just like in the above examples. Am I missing something? Maybe an working example of the above gridview styling might help.

  38. Very helpful.

    Do you know of how to style the seperator lines between cells in the header?

    What about the vertical and horizontal scroll bars?

    Minor typo. GridViewColumn has no “MyCellTemplate”. It has “CellTemplate”.

  39. Salam Matthias,

    Is there an easy way to set and get cell items by row and col indexes?

    This onion-like concentric visual layers of this ****ing listview are really getting to me and currently can’t add a new item and access it immediately until the StateChanged event is fired in order to get a valid ContentPresenter etc.

    Please help!

    Ali Adams
    Earth, Water, Air, Fire, Light, Soul, Spirit

  40. Is there an easy way to get gridlines just between the columns of the ListView? Or does one have to put a Border element inside each cell and remove all item padding? (Does that even work?)

Comments are closed.