<howto>Replace ListView columns with rows</howto>

September 22, 2008

7 comments

Introduction: You want to present a table with a ListView, but you should display columns as rows.

Problem: The only out-of-the-box view for the WPF ListView control is GridView. GridView was designed to work with columns. It displays headers and rows as two parts, using a stack layout by default. Changing the stack orientation to horizontal will not work since both the headers presenter and rows presenter are displaying children horizontally.

Solution #1: Do not use ListView. Use a ListBox with custom template.

Solution #2: Create a custom ListView view, derived from the View base class (a big headache).

Solution #3: Cheat a bit. Rotate and Flip both the headers and rows presenters, and change the stack items panel orientation to horizontal. Then you should Flip and Rotate back each header and row content.

 

image image image image

 

Download the code from here.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

7 comments

  1. KellenJune 3, 2009 ב 23:04

    Will this translate to silverlight?

    Reply
  2. Jesper GFebruary 24, 2011 ב 21:02

    Thanks!!!!

    I owe you!

    Reply
  3. Jesper GFebruary 25, 2011 ב 16:34

    But using the code I’ve gotten into troubles in my existing project.
    a) Adding code in App.xaml crashes all my ordinary list views.
    b) Adding code as Window.Resources does not work.
    Any suggestions?
    I can’t figure out how to explicitly define this trick in App.xaml so it only works when I want it to.

    Reply
  4. KevinSeptember 19, 2011 ב 01:20

    Is there any way to make the values editable?

    Reply
  5. Tomer ShamamSeptember 22, 2011 ב 15:36

    Hi Kevin,
    Set a DataTermplate on each GridViewColumn which provide special control.
    Now when double click this control for example, change it from TextBlock to TextBox for example.

    Reply