highlight listview item won't work properly

Question

After i applied a custom ItemContainerStyle on my listView, Highlighting a listView's item won't work as it supposed to, it only works when the mouse is over the ContentPresenter of the item as you can see in the screenshots:

Original highlight (with no style applied):

highlight when custom ItemContainerStyle applied

highlight when custom ItemContainerStyle applied (mouse over ContentPresenter)

ListView Style:

    <Style x:Key="DetailStyle" TargetType="{x:Type ListView}">
        <Setter Property="l:ListBoxSelector.Enabled" Value="True"/>
        <Setter Property="ItemContainerStyle" Value="{StaticResource DetailViewStyle}"/>
        <Setter Property="View">
            <Setter.Value>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn Width="30" CellTemplate="{StaticResource columnIconDT}"/>
                    <GridViewColumn Header="Name" Width="100" CellTemplate="{StaticResource columnNameDT}"/>
                    <GridViewColumn Header="Size"  Width="100" CellTemplate="{StaticResource columnSizeDT}"/>
                </GridView>
            </Setter.Value>
        </Setter>
    </Style>

ItemContainerStyle :

<Style x:Key="DetailViewStyle" TargetType="{x:Type ListViewItem}">
        <EventSetter Event="ContextMenu.ContextMenuOpening" Handler="Item_ContextMenuOpening"/>
        <EventSetter Event="PreviewMouseDoubleClick" Handler="Item_MouseDoubleClick"/>
        <Setter Property="Margin" Value="0,0,0,-1"/>
        <Setter Property="ContextMenu" Value="{DynamicResource ContextMenuForItem}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ListViewItem}">
                    <Grid HorizontalAlignment="Stretch">
                        <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
                        <GridViewRowPresenter x:Name="gridrowPresenter" Content="{TemplateBinding Property=ContentControl.Content}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#33C1DEFF" Offset="0"/>
                                        <GradientStop Color="#41A5CDFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF7DA2CE"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF7DA2CE"/>
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#97C1DEFF" Offset="0"/>
                                        <GradientStop Color="#A7A5CDFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FFB4B4B4"/>
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#7FE5E5E5" Offset="0"/>
                                        <GradientStop Color="#B2CCCCCC" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

How can I fix it?

Answer 1

Your problem is that you have replaced the default ControlTemplate of the ListViewItem with your own definition and that definition does not contain the elements that highlighted the item on mouse over.

The solution is simple... find the default ControlTemplate and update your ControlTemplate with the missing elements... I'm guessing, that you at least need the VisualStateManager.VisualStateGroups element from the original ControlTemplate.

You can find full details of the default ControlTemplate of the ListViewItem from the ListView Styles and Templates page on MSDN.

---

UPDATE >>>

Dude, if you are going to override part of any control's ControlTemplate, you do it like this:

First, copy the whole default ControlTemplate into your new ControlTemplate and ensure that it is working properly. Then, and only then, can you start to adjust the contents, checking each time that you add or remove a few things, whether it still works as expected.

This is a fail-safe method and only sloppy work on your side could stop it from working... give it a go.