ItemsPanel 作为可自动调整大小的矩阵

Question

我正在处理一个窗口，其中基本上有一个列表框（由绑定到 ObservableCollection 形成）。这些项目有图像、标题和其他内容。我想让列表框（通过 itemTemplate）形成一个矩阵，该矩阵仅包含来自我的 ObservableCollection 项目的图像。我使用过 UniformGrid，但问题是我无法根据 WindowSize 更改列数。例如，我有 10 个项目。图像的宽度为 100 像素。窗口的宽度为 1000 像素。从技术上讲，它应该连续出现 10 个项目。如果我将窗口大小调整为 500 像素，我应该有 2 行，每行 5 张图像。如果我将它增加到 700 像素，它应该是一排 4 张图像，第二排有 3 张图像。 如果我设置了 UniformGrid 的列，那么当我调整窗口大小时它不会自行修改。我尝试将列表框的 Horizo​​ntalAlignment 或 VerticalAlignments 设置为顶部/中心/等。 ... 到目前为止，我已经做到了：

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid x:Name="UniformGridTest" Columns="?"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Name="ListItemImage" Source="{Binding LocImage.Source}" 
                       RenderOptions.BitmapScalingMode="HighQuality" 
                       MaxHeight="100" MaxWidth="100" Margin="0,0,5,0" 
                       MouseDown="ListItemImage_MouseDown"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>`

我正在使用 ListBox，因为我需要让我的项目可选择。 我希望我解释得足够好让你理解。 非常感谢！ 阿德里安。

Answer 1

你应该试试WrapPanel。它可以容纳您的宽度允许的这么多项目，其余的将移动到下一行。最终，它应该看起来像您需要的那样。但在这种情况下，您将在某些宽度值的右侧有一些空白。

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel x:Name="WrapPanel"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel >
                <Image Name="ListItemImage" Source="{Binding LocImage.Source}" RenderOptions.BitmapScalingMode="HighQuality" MaxHeight="100" MaxWidth="100" Margin="0,0,5,0" MouseDown="ListItemImage_MouseDown"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>