c# - 调整选定的 ListViewItem TextBlock 样式

Question

我有一个奇怪的问题。我不确定这是否是一个错误，或者我是否只是误解了一些东西，因为我对 WPF 还很陌生(可能是后者)。

在我的项目中，我有一个 ListView，它以类似于使用图标 View 在 Windows 资源管理器中看到的方式显示项目。我概述了一个控件模板，它由一个 Image 元素和一个位于其下方的 TextBlock 元素组成。我的目标是在选择 ListViewItem 时调整 TextBlock 的最大高度。这样项目的名称就会从用省略号修剪到显示项目的全名进行调整。

然而，当项目被选中时，它不会调整仅所选项目的TextBlock的最大高度，而是调整所有每个项目的 TextBlock，无论它是否被主动选择。

我已经研究过答案，但没有找到与此特定问题类似的任何内容。这个链接是一个类似的概念，但没有我的问题。

WPF - ListView Item on Selected change Font size

我的一些其他方法包括一个带有样式更改触发器的 ControlTemplate，或 ItemContainerStyle 而不是显式 ControlTemplate，它所有这些似乎都给出了相同的不良结果。

我怎样才能实现这个功能？ ControlTemplate 是否可行？

这是我的一些 XAML 代码:

ListView

<ListView x:Name="ItemViewer">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Margin="10"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Template" Value="{StaticResource ListViewItemNormal}"/>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="True"/>
                        <Condition Property="Selector.IsSelectionActive" Value="True"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Template" Value="{StaticResource ListViewItemSelected}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

控件模板

<ControlTemplate x:Key="ListViewItemNormal" TargetType="{x:Type ListViewItem}">
    <Border x:Name="ItemBoxBorder" Background="Transparent">
        <Grid HorizontalAlignment="Left" MinHeight="90"
              Margin="5"
              MaxWidth="90"
              Width="90"
              x:Name="ItemBox">
            <StackPanel>
                <Image HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       Source="{StaticResource NewImage}"
                       Width="64" Height="64"/>
                <TextBlock x:Name="ItemDescription"
                           Text="{Binding Path=Name}"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Bottom"
                           TextWrapping="Wrap"
                           MaxWidth="90"
                           MaxHeight="30"
                           TextTrimming="CharacterEllipsis"/>
            </StackPanel>
            <Grid.ToolTip>
                <ToolTip Content="{Binding Path=Name}"/>
            </Grid.ToolTip>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="False"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="ItemBoxBorder"  Property="Background" Value="{StaticResource HighlightMouseHoverColorBrush}"/>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="ListViewItemSelected" TargetType="{x:Type ListViewItem}">
    <Border x:Name="ItemBoxBorder" Background="{StaticResource SelectedItemBrush}"
            BorderBrush="{StaticResource HighlightBorderColorBrush}"
            BorderThickness="1">
        <Grid HorizontalAlignment="Left" MinHeight="90"
              Margin="5"
              MaxWidth="90"
              Width="90"
              x:Name="ItemBox">
            <StackPanel>
                <Image HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       Source="{StaticResource NewImage}"
                       Width="64" Height="64"/>
                <TextBlock x:Name="ItemDescription"
                           Text="{Binding Path=Name}"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Bottom"
                           TextWrapping="Wrap"
                           MaxWidth="90"
                           MaxHeight="125"
                           TextTrimming="CharacterEllipsis"/>
            </StackPanel>
            <Grid.ToolTip>
                <ToolTip Content="{Binding Path=Name}"/>
            </Grid.ToolTip>
        </Grid>
    </Border>
</ControlTemplate>

编辑

这是 ms_dos 实现问题的示例。

This image shows I have the item with a short description selected. This is the height all items should remain if they are not selected.

In this image, you'll see the item with the long description is selected. However, both items extend their height, but only the selected one should grow.

Answer 1

为此您不需要两个单独的控件模板。只需采用 ListView 的 ItemContainerStyle 属性并使用如下控件模板:

<ListView x:Name="ItemViewer">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Margin="10" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Border x:Name="ItemBoxBorder"
                                    Background="Green"
                                    BorderThickness="1"
                                    VerticalAlignment="Top">
                                <Grid HorizontalAlignment="Left"
                                      MinHeight="90"
                                      Margin="5"
                                      MaxWidth="90"
                                      Width="90"
                                      x:Name="ItemBox">
                                    <StackPanel>
                                        <Image HorizontalAlignment="Center"
                                               VerticalAlignment="Top"
                                               Width="64"
                                               Height="64" />
                                        <TextBlock x:Name="ItemDescription"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Bottom"
                                                   TextWrapping="Wrap"
                                                   Text="{Binding}"
                                                   MaxWidth="90"
                                                   MaxHeight="125"
                                                   TextTrimming="CharacterEllipsis" />
                                    </StackPanel>
                                    <Grid.ToolTip>
                                        <ToolTip Content="{Binding Path=Name}" />
                                    </Grid.ToolTip>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected"
                                         Value="true">
                                    <Setter TargetName="ItemBoxBorder"
                                            Property="Background"
                                            Value="Red" />
                                    <Setter TargetName="ItemDescription"
                                            Property="TextElement.FontSize"
                                            Value="20" />
                                    <Setter TargetName="ItemBoxBorder"
                                            Property="Height"
                                            Value="135" />
                                </Trigger>
                                <Trigger Property="IsSelected"
                                         Value="false">
                                    <Setter TargetName="ItemBoxBorder"
                                            Property="Height"
                                            Value="90" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
</ListView>

看看 ControlTemplate.Triggers 部分。基本上，您使用 Trigger 属性来控制触发器应该处理的属性...在我们的例子中是来自 ListView 的 IsSelected。使用 Setter，您可以为 ListViewItem 控件的更改定义属性和值。 Setter 的TargetName 是指您在ControlTemplate 部分中定义的控件的x:Name。

希望这个例子能帮助您解决问题!

问候 ms_dos