How to set items order in StackPanel

Question

I have a List of string. e.g. "abc", "pqr", "xyz" in this order. A StackPanel is data bound to this list. I want to display the list in a StackPanel vertically but in reverse order from top to bottom

"xyz"
"pqr"
"abc"

Is there a way to do this in xaml or do I have to reorder my list?

http://stackoverflow.com/questions/2373343/sorting-elements-in-a-stackpanel-wpf look there, similar question — msarchet, Sep 19 '11 at 18:37
The same list is used at multiple places in the View. At one place I need to show it in Left to Right direction and in another place I need to show in Bottom to Top direction. So I did not want to change the list. I thought there will be a simple property in StackPanel to set this direction. But I guess I am wrong. — Souvik Basu, Sep 19 '11 at 18:47
I cannot find it now but I saw a really slick solution on SO where a they used scaling -1, 1 to reverse the order. — paparazzo, Sep 19 '11 at 19:34
You can take a look at this [question's answer](http://stackoverflow.com/questions/7405473/reversed-listbox-without-sorting/7409586#7409586) which shows how to use a converter to reverse a list you're binding to. It should be easy to extend the converter to support sorting, permutations, etc though. — Iain Skett, Sep 19 '11 at 19:54

score 5 · Answer 1 · answered Jun 09 '12 at 20:27

5

This is very hackish, but seems to work. Set the stackpanel's layout transform to rotate 180. Then each child's layout transform also to 180.

<StackPanel Name="pnlLayers">
<StackPanel.LayoutTransform>
    <RotateTransform Angle="180"/>
</StackPanel.LayoutTransform>

(in my case, I had a custom user control as the row)

<UserControl.LayoutTransform>
    <RotateTransform Angle="180"/>
</UserControl.LayoutTransform>

answered Jun 09 '12 at 20:27

Charlie

81
1
3

Alternatively, use `ScaleTransform` and `ScaleX="-1"`. This feels a bit more intuitive. – Steven Jeuris Apr 07 '15 at 15:13
I also don't feel this is a 'hacky' solution. It seems to be the only solution in case you properly want to follow [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel), since I don't feel the view model should change just because the view changes. – Steven Jeuris Apr 07 '15 at 15:32

score 2 · Accepted Answer · answered Sep 19 '11 at 18:37

2

Yes and No, the StackPanel will display them in the order in which they are enumerated. So you have a couple of options as I see it:

1) Re-order your list

2) Change your binding, or apply a IValueConverter that does the re-order on the fly. This of course requires coding the converter, but once it's written you can re-use it in your XAML as required without having to modify individual windows, code-behinds, etc.

answered Sep 19 '11 at 18:37

CodingGorilla

19,612
4
45
65

In case of `2)`, I presume the converter should also listen to collection modification events when binding to an `ObservableCollection`. An advantage of [Charlie's approach](http://stackoverflow.com/a/10964360/590790) is this works 'out of the box'. – Steven Jeuris Apr 07 '15 at 15:36

score 0 · Answer 3 · answered Apr 11 '22 at 08:27

You can replicate a StackPanel using a DockPanel with LastChildFill="False" attribute and setting the Dock attached property on every child element. By using Dock.Right you can stack elements horizontally in reverse order (i.e right-to-left); using Dock.Bottom stacks vertically in reverse order (i.e. bottom-to-top).

For more details and example code, see my answer to StackPanel reverse order - WPF.

How to set items order in StackPanel

3 Answers3

Linked