如何使WPF ListView處於水平狀態，並且將包含的圖像拉伸到合適的高度？

Question

我想要一個在水平ListView中顯示帶有標簽圖像的畫廊。

每個列表項僅是帶有標簽的圖像：

<DataTemplate x:Key="ImageItemTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
        <Label Grid.Row="1" Content="{Binding Title}" />
    </Grid>
</DataTemplate>

為了使ListView處於水平狀態，我將ListView.ItemsPanel替換為水平的StackPanel ：

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

現在我得到這樣的東西：

但是我希望每個圖像都可以拉伸以占據ListView的整個高度（減去標簽的足夠高度），同時保持寬高比，所以我替換了ListView.ItemContainerStyle ：

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

但是我不知道為什么每個項目的寬度都不會被拉伸而是被切割：

請幫忙，謝謝！

編輯：

整個xaml如下所示：

<UserControl x:Class="Test.ImageGalleryControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        mc:Ignorable="d">
    <UserControl.Resources>
        <DataTemplate x:Key="ImageItemTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="4*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
                <Label Grid.Row="1" Content="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <ListView x:Name="MyImageList" ItemTemplate="{StaticResource ImageItemTemplate}">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
    </Grid>
</UserControl>

Answer 1

嘗試這個

通過將ListView的高度設置為Itemtemplate（網格）。

<ListView  x:Name="MyImageList">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="4*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
                <Label Grid.Row="1" Content="fghfgh" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

---

更新資料

通過設置VerticalScrollBarVisibility =“ Hidden”或禁用並添加邊距可以解決此問題，但下面是正確的解決方案

此垂直滾動條是由於默認的邊距和Listview和ListviewItem默認樣式中的填充而來的。您可以通過編輯listview和listviewItem的樣式來獲得所需的結果

工作樣本（無垂直滾動條）

資源資源

<Window.Resources>
    <Style TargetType="{x:Type ListView}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="#FFABADB3"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListView}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" Height="{TemplateBinding Height}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="0" SnapsToDevicePixels="True">
                        <ScrollViewer Focusable="False" Padding="0" >
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="Bd" Value="White"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FFD9D9D9"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping" Value="True"/>
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FocusVisualStyle">
            <Setter.Value>
                <Style>
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"  Background="{TemplateBinding Background}" Margin="0,-1,5,-1" SnapsToDevicePixels="True">
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="#1F26A0DA"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#A826A0DA"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                <Condition Property="IsSelected" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="#3DDADADA"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FFDADADA"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                <Condition Property="IsSelected" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="#3D26A0DA"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

窗口

<ListView  x:Name="MyImageList">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
        <Grid.RowDefinitions>
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
        <Label Grid.Row="1" Content="fghfgh"/>
    </Grid>
    <Grid  Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
        <Grid.RowDefinitions>
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
        <Label Grid.Row="1" Content="fghfgh"/>
    </Grid>
</ListView>

Answer 2

現在嘗試更改Stretch屬性。 嗯，為什么不能添加代碼...

嘗試將Stretch =“ Uniform”設置為圖像

<Image Grid.Row="0" Source="{Binding Image}" Stretch="Uniform" />

Answer 3

<Image Grid.Row="0" Source="{Binding Image}" Stretch="Fill" />

但是，它不會保持圖像的縱橫比，無論圖像控件的大小如何，都可以使用Stretch =“ Uniform”來保持縱橫比。 您可以靜態指定圖像控件的高度，並使用Stretch =“ Uniform”來調整圖像控件的縱橫比和大小。

Answer 4

使用ItemsControl的簡單解決方案

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="ImageItemTemplate">
            <Grid Height="{Binding ActualHeight,RelativeSource={RelativeSource FindAncestor,AncestorType=ItemsControl}}"
                  Margin="2,2,2,-25"
                  VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
                <Label Grid.Row="1" Content="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Grid.Resources>
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Hidden">
        <ItemsControl x:Name="MyImageList"
                      ItemTemplate="{StaticResource ImageItemTemplate}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </ScrollViewer>
</Grid>

Answer 5

@pushpraj的“使用ItemsControl的簡單解決方案”在長時間搜索類似功能后確實對我有幫助。 我是WPF的新手，但仍嘗試使用ListView和ItemsControl模板的功能區，但未獲得所需的結果。 為了適應我的要求，做了一個小改動，將Image拉伸為均勻，Stretch =“ Uniform”。 感謝您的博客。