在列表视图中缩放图像以适合

问题描述

我正在尝试创建一个列表视图，其中每个项目都是一个图像.我希望列表视图水平显示项目.如果视图框项无法水平放置在窗口中，则需要水平滚动条.如果列表项不能垂直放置在窗口中，我希望图像缩小以适合它们.我似乎没有在列表视图上缩放垂直的滚动条，而是将图像缩放到合适的大小.

I'm trying to make a listview where each item is an image. I want the listview to display the items horizontally. If the view box items won't fit horizontally in the window I want a horizontal scroll bar. If the list items won't fit vertically within the window I want the images to scale down so they fit. Instead of the images scaling to fit I seem to be getting a vertical scrollbar on the listview.

在垂直调整窗口大小时，它会导致垂直滚动条出现在列表视图中.我已经尝试过各种方法来将图像高度设置为祖先列表视图的高度，但是我无法使其正常工作.如何实现我想要的行为?

At the moment when the window is resized vertically it causes a vertical scrollbar to appear on the listview. I've tried various options around setting the image height to the height of the ancestor listview but I can't make it work correctly. How do I achieve my desired behaviour?

<Window x:Class="ViewBoxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ViewBoxExample"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance Type=local:MainWindow}"
        Title="Viewbox Test"
        Height="400" Width="600">
    <Window.Resources>
        <DataTemplate x:Key="ItemTemplate" >
                <Border BorderBrush="Black" BorderThickness="2" >
                    <Image Margin="2" Source="image.png" />
                </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
       </Grid.RowDefinitions>
        <ListView VerticalAlignment="Stretch"
                  ItemTemplate="{StaticResource ItemTemplate}"
                  ItemsSource="{Binding Items}">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal">
                    </StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
        <Grid Grid.Row="1" Height="100">
            <!--placeholder for more content-->
        </Grid>
    </Grid>
</Window>

推荐答案

禁用垂直ScrollBar以使ListView垂直缩放其项目:

Disable the vertical ScrollBar to make the ListView scale its items vertically:

<ListView ItemsSource="{Binding Items}"
          ItemTemplate="{StaticResource ItemTemplate}"
          ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

这与重量更轻的ListBox相同.

这篇关于在列表视图中缩放图像以适合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！