Reverse ListBox only using transforms

Question

I would like to reverse the items in a ListBox using only transforms. I have this attempt (below). However, I want the items on the right to flow down from the top. Can someone see how to do that?

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <Style TargetType="ListBoxItem" x:Key="R">
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ListBox>
            <ListBoxItem>A</ListBoxItem>
            <ListBoxItem>B</ListBoxItem>
            <ListBoxItem>C</ListBoxItem>
            <ListBoxItem>D</ListBoxItem>
            <ListBoxItem>E</ListBoxItem>
            <ListBoxItem>F</ListBoxItem>
        </ListBox>
        <ListBox Grid.Column="1" RenderTransformOrigin="0.5,0.5">
            <ListBox.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="-1"/>
            </ListBox.RenderTransform>
            <ListBoxItem Style="{StaticResource R}">V</ListBoxItem>
            <ListBoxItem Style="{StaticResource R}">U</ListBoxItem>
            <ListBoxItem Style="{StaticResource R}">W</ListBoxItem>
            <ListBoxItem Style="{StaticResource R}">X</ListBoxItem>
            <ListBoxItem Style="{StaticResource R}">Y</ListBoxItem>
            <ListBoxItem Style="{StaticResource R}">Z</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

It works at reversing the items. It just draws them in the wrong spot. — Brannon, Jul 07 '14 at 18:57
You could insert this inside the second `` element: ``. But this still would leave problems with the vertical scrollbar which looks unusual due to the vertical mirroring. I think you would be better off by using some code-behind which performs the reversal of the list box items. — , Jul 07 '14 at 19:13
@fmunkert, thanks for the `ItemsPresenter` idea. It did work, but I would have had to automatically scroll to the bottom on add. — Brannon, Jul 07 '14 at 20:22

score 1 · Accepted Answer · edited May 23 '17 at 12:06

I found what I was looking for. The VerticalAlignment is the kicker:

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel VerticalAlignment="Top" Orientation="Vertical">
            <VirtualizingStackPanel.LayoutTransform>
                <ScaleTransform ScaleX="1" ScaleY="-1" />
            </VirtualizingStackPanel.LayoutTransform>
        </VirtualizingStackPanel>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

Related source: WPF View ListView Backwards

Reverse ListBox only using transforms

1 Answers1