Как сделать так, чтобы элементы в WPF ListBox переносились горизонтально и вертикально

Question

Я хочу показать список миниатюр и позволить пользователю выбрать один. ListBox казалось очевидным выбором, устанавливая шаблон для включения миниатюры и описания.

Следующий код делает это правильно ...

<ListBox Margin="5"
         Name="BackgroundsLb">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Border Margin="5"
              BorderBrush="Black"
              BorderThickness="1">
        <StackPanel Margin="5">
          <Image Source="{Binding Path=Data, Converter={StaticResource BytesToImageVC}}"
                 Width="150"
                 HorizontalAlignment="Center" />
          <TextBlock Text="{Binding Path=Description}"
                     HorizontalAlignment="Center" />
        </StackPanel>
      </Border>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Однако миниатюры отображаются вертикально по одному на строку, как обычно для ListBox. Учитывая, что миниатюры имеют ширину всего 150 пикселей, я хотел бы показать их в виде сетки, но (в идеале) таким образом, чтобы количество столбцов соответствовало размеру окна.

Я попытался заменить ListBox на ItemsControl, добавив следующее ...

  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Vertical" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

... и он отобразил именно то, что я хотел, но ItemsControl не позволяет выбрать , поэтому бесполезен для моей цели.

Есть ли способ создать гибкий, выбираемый дисплей, который заполняет горизонтальное пространство и разбивается на новую строку в соответствии с размером окна?

Спасибо

Answer 1

Вы можете использовать ItemsPanelTemplate в ListBox точно так же, как вы используете в ItemsControl. Разница, которую я думаю, вы видите в том, что ListBox по умолчанию использует полосы прокрутки, а не перенос содержимого. По сути, контент может расти вечно, поэтому вы никогда не получите перенос. Вместо этого вы получаете полосу прокрутки. Хорошей новостью является то, что вы можете отключить это поведение. Следующее должно дать вам горизонтальную переноску, где новые строки создаются по мере необходимости.

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
         </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>