DCSIMG
<howto>Replace ListView columns with rows</howto> - Essential XAML

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

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.

Published Monday, September 22, 2008 3:40 AM by Tomer Shamam

Comments

# re: <howto>Replace ListView columns with rows</howto>

Monday, September 22, 2008 8:57 AM by Ivan Kaselj

Hi Tomer,

I posted comment in MSDN Forums

social.msdn.microsoft.com/.../8cfc339c-b2b6-4ae4-8232-e0743e814f8d

Best regards, Ivan

# re: <howto>Replace ListView columns with rows</howto>

Wednesday, June 03, 2009 11:04 PM by Kellen

Will this translate to silverlight?

# re: <howto>Replace ListView columns with rows</howto>

Thursday, February 24, 2011 9:02 PM by Jesper G

Thanks!!!!

I owe you!

# re: <howto>Replace ListView columns with rows</howto>

Thursday, February 24, 2011 9:12 PM by Tomer Shamam

You welcome ;)

# re: <howto>Replace ListView columns with rows</howto>

Friday, February 25, 2011 4:34 PM by Jesper G

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.

# re: <howto>Replace ListView columns with rows</howto>

Monday, September 19, 2011 1:20 AM by Kevin

Is there any way to make the values editable?

# re: <howto>Replace ListView columns with rows</howto>

Thursday, September 22, 2011 3:36 PM by Tomer Shamam

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.

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Enter the numbers above:
Powered by Community Server (Commercial Edition), by Telligent Systems