Question

我正在创建一个窗口，其中我基本上有一个列表框（由绑定到ObservableCollection形成）。这些项目有图像，标题和其他东西。我想使列表框（通过itemTemplate）形成像只有来自我的ObservableCollection项目的图像的矩阵。我使用过UniformGrid，但问题是我无法根据WindowSize更改列数。举个例子，我有10个项目。图像宽度为100像素。窗口宽度为1000像素。从技术上讲，它应该连续出现10个项目。如果我将窗口调整为500 px，我应该有2行5个图像/行。如果我将它增长到700像素，它应该是一行4个图像，第二行有3个图像。如果我设置UniformGrid的列，那么当我调整窗口大小时它不会自行修改。我尝试将列表框的HorizontalAlignment或VerticalAlignments设置为top / center / etc. ... 到目前为止，我已经谈过这个问题：

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

ItemsPanel作为autoResizable矩阵

1 个答案: