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>
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