Adjust Selected ListViewItem TextBlock Style

Viewed 1181

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

1 Answers
Related