Search code examples
wpfxamllistboxrendertransform

Reverse ListBox only using transforms


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>

Solution

  • 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