调整选定的ListViewItem TextBlock样式

Question

I am having a strange issue. I am not sure if this is a bug, or if I am simply misunderstanding something as I am fairly new to WPF (Probably the latter).

In my project, I have a ListView that displays items in a similar fashion to that seen of Windows Explorer using Icon view. I have outlined a control template that consists of a an Image element, and a TextBlock element below it. My goal is to adjust the maximum height of the TextBlock when the ListViewItem is selected. This is so the name of the Items will adjust from being trimmed with an ellipsis to showing the full name of the item.

When the item is selected however, instead of adjusting the maximum height of only the selected item's TextBlock , it adjusts all TextBlock s for each item whether it is actively selected or not.

I have researched for an answer, but have not found anything similar to this particular issue. This link is a similar concept, but without my problem.

WPF - ListView Item on Selected change Font size

Some of my other methods have consisted of one ControlTemplate with triggers for the style changes, or ItemContainerStyle instead of explicitly a ControlTemplate , which all seemed to give the same undesired result.

How can I achieve this functionality? Is it possible with ControlTemplate ?

Here is some of my XAML code:

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>

ControlTemplates

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

EDIT

Here is an example of the issue with ms_dos's implementation.

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

You don't need two separate control templates for this. Just take the ItemContainerStyle property of the ListView and use a control template like this:

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

Take a look at the ControlTemplate.Triggers section. Basically you use the Trigger property to control which property the trigger should handle... in our case the IsSelected from the ListView. And with the Setter you define the property and the value for the changes of the ListViewItem control. The TargetName of the Setter refers to the x:Name of the control which you define in the ControlTemplate section.

I hope this example helps you with your problem!

Greets ms_dos