Использование WrapPanel и ScrollViewer для создания многоколоночного списка в WPF

Question

Я делаю простое приложение LOB, которое загружает данные из XML-файла и отображает его в списке с несколькими кнопками для редактирования.

С моей первой попытки все было в порядке, за исключением того, что список прокручивался вниз в одной длинной колонке. Я бы предпочел, чтобы данные были обернуты так, что в нижней части окна он запускает второй столбец и т. Д. - если вы измените размер окна, данные должны соответственно изменить размер.

Во-первых, я просто поместил ListBox внутри ScrollViewer. Это не имело никакого значения.

Затем я добавил WrapPanel внутри ItemTemplate. В этот момент я получил длинный ряд по горизонтали, но он никогда не был перенесен во второй ряд, несмотря на то, что мой параметр ScrollViewer.HorizontalScrollbar = отключен.

Я искал в Интернете различные блоги и форумы, но не вижу разницы между предложениями и моим кодом (см. Ниже). Любые советы будут высоко оценены.

<Window x:Class="MyApp.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="My App" Height="300" Width="400" 
     FocusManager.FocusedElement="{Binding ElementName=eventsList}"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="auto" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
       <ScrollViewer Grid.Row="0" Grid.Column="0"  HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"> 
      <ListBox Name="eventsList"> 
       <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel /> 
        </ItemsPanelTemplate> 
       </ListBox.ItemsPanel> 
      </ListBox> 
     </ScrollViewer> 

     <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal"  HorizontalAlignment="Center" Visibility="Collapsed"> 
      <Button Name="action1Button" /> 
      <Button Name="action2Button" /> 
      <Button Name="action3Button" /> 
     </StackPanel> 
    </Grid> 
</Window> 

Answer 1

Кажется, что вы были на правильном пути: заменив ItemsPanelTemplate в ListBox WrapPanel, установив ориентацию WrapPanel на Vertical и установив ScrollViewer.VerticalScrollBar в Disabled, это все, что вам нужно сделать.

Это работает для меня:

<Window x:Class="ScrollingWrapPanel.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"> 
    <Grid> 
     <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel IsItemsHost="True" Orientation="Vertical"/> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Red"/> 
      </ListBoxItem> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Orange"/> 
      </ListBoxItem> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Yellow"/> 
      </ListBoxItem> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Green"/> 
      </ListBoxItem> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Blue"/> 
      </ListBoxItem> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Indigo"/> 
      </ListBoxItem> 
      <ListBoxItem> 
       <Rectangle Width="80" Height="80" Margin="10" Fill="Violet"/> 
      </ListBoxItem> 
     </ListBox> 
    </Grid> 
</Window> 

Это должно привести к его вынести полный столбец по вертикали, обертывание, а затем продолжить на следующей колонке, прокрутка по мере необходимости горизонтально (но не вертикально), так как в картина:

ListBox with WrapPanel wrapping vertically http://i40.tinypic.com/358dzxj.png

ключевые моменты в этой реализации

1. Настройка ориентации = «Вертикаль» на WrapPanel, чтобы вещи обернулись вертикально, а не горизонтально, и
2. Настройка ScrollViewer.VerticalScrollBarVisibility = «Отключено» в ListBox, чтобы ScrollViewer знал, чтобы ограничить его высоту доступным пространством.

Answer 2

Я считаю, чтобы сделать это, вам нужно написать собственный код - у вас есть правильная идея в переопределении ItemsPanelTemplate, но WrapPanel не заказывают вещи так, как вы хотите - это закажут вещи, как :

A B C D 
E F G H 
I J K L 

в то время как вы, вероятно, хотите:

A D G J 
B E H K 
C F I L 

Кроме того, поместив его в ScrollViewer, это как говорить это, что он имеет экран бесконечно размера, так что результат будет просто одна строка (потому что ScrollViewer предоставит ему столько места, сколько требует). Написание панели не сложно, это всего лишь две функции («Измерить и упорядочить»).