列表框中的 WPF 包装面板

Question

我想在垂直滚动列表中显示多个图像，但这些图像被细分为用户必须能够区分的几个组。为了实现这一点，我使用了一个 ListView，其中的项目包含一个 WrapPanel，其中包含单个图像：

<ListView Name="ListGroups" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Label Content="{Binding Groupname}" />
                <ListBox ItemsSource="{Binding Images}" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel  />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <Image Source="{Binding Thumb}" />
                                <Label Content="{Binding Res}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我得到的是：

Current result - wrong

但我想要实现的是：

Thats what I want

也就是说我根本不想要任何水平的Scollbars，并且组显然必须分开。另一方面，在调整 window 大小时，一组 中的图像 必须换行以填充所有可用的 space.

Answer 1

同时禁用内部 ListBox 的水平滚动条，并在 Image 元素上设置 Stretch="None"。

<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Label Content="{Binding Groupname}"/>
                <ListBox ItemsSource="{Binding Images}"
                         ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding Thumb}" Stretch="None"/>
                                <Label Content="{Binding Res}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

列表框中的 WPF 包装面板

WPF Wrappanel in Listbox

wpf

listview

wrappanel