Question

我想在垂直滚动列表中显示几幅图像，但是这些图像被细分为用户必须区分的几组。为此，我使用ListView，其中每个项目包含一个WrapPanel，该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

这就是说我根本不需要任何水平的Scollbar，并且显然必须将组分开。另一方面，调整窗口大小时，一组内的图像必须包装以填充所有可用空间。

Answer 1

只需禁用内部ListBox的水平ScrollBar，并在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 Wrappanel在列表框中

1 个答案: