时间戳

首页 > 解决方案 > 列表框中的 WPF Wrappanel

wpf - 列表框中的 WPF Wrappanel

问题描述

我想在垂直滚动列表中显示几张图像，但这些图像被细分为几个必须由用户区分的组。为了实现这一点，我使用了一个 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>

我得到的是：

当前结果 - 错误

但我想要实现的是：

这就是我想要的

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

标签： wpflistviewwrappanel

解决方案

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

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

推荐阅读