作为autoResizable矩阵的ItemsPanel

Question

我正在处理一个窗口，在这个窗口中我基本上有一个列表框(从绑定到ObservableCollection中形成)。这些项目有一个图像，标题和其他东西。我想让列表框(通过itemTemplate)形成一个矩阵，其中只包含我的项目ObservableCollection中的图像。我使用过UniformGrid，但问题是我无法根据WindowSize更改列数。举个例子，我有10个项目。图像的宽度为100像素。该窗口的宽度为1000像素。从技术上讲，它应该在一行中显示10个项目。如果我将窗口大小调整到500px，我应该有2行5个图像/行。如果我将它增大到700像素，它应该是一行4个图像，第二行有3个图像。如果我设置了UniformGrid的列，那么当我调整窗口大小时，它不会自动修改。我尝试将列表框的HorizontalAlignment或VerticalAlignments设置为top/center/等...到目前为止，我得到了以下结论：

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