时间戳

首页 > 解决方案 > 如何使 WPF ListBox 中的项目水平和垂直换行

wpf - 如何使 WPF ListBox 中的项目水平和垂直换行

问题描述

我想显示一个缩略图列表，并允许用户选择一个。AListBox似乎是一个显而易见的选择，将模板设置为包含缩略图和描述。

以下代码正确执行此操作...

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

但是，这会垂直显示缩略图，每行一个，这对于 a 来说是正常的ListBox。鉴于缩略图只有 150 像素宽，我想以更像网格的方式显示它们，但（理想情况下）以某种方式显示它们，以便列数适应窗口的大小。

我尝试用 替换ListBox，ItemsControl添加以下内容...

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

...它完全显示了我想要的方式，但是ItemsControl不允许选择，所以对我的目的没有用。

有没有办法实现一个灵活的、可选择的显示来填充水平空间，并根据窗口的大小分成新的一行？

谢谢

标签： wpfuser-interface

解决方案

您可以在 a 中使用一个ItemsPanelTemplate，就像在 .ListBox中使用一个一样ItemsControl。我认为您看到的不同之处在于ListBox默认情况下使用滚动条而不是包装内容。基本上允许内容永远增长，所以你永远不会得到包装。相反，您会得到一个滚动条。好消息是您可以禁用此行为。以下内容应为您提供水平换行，其中根据需要创建新行。

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

推荐阅读