WPF ItemsControl IsMouseOver not working as expected

Question

I have the following code in the Window.Resources of a WPF window. What it is basically doing is creating an item that represents a grid with a label positioned on the left and a button on the right. When I mouse over the label or the button the row changes color as expected but I want it to also change color if the mouse is over any of the row.

How can this be achieved?

Any help is appreciated.

<Window.Resources>
    <dtos:ProjectDto x:Key="data"/>
    <Style x:Key="alternatingWithTriggers" 
           TargetType="{x:Type ContentPresenter}">
        <Setter Property="Height" Value="25"></Setter>
    </Style>
    <Style x:Key="onmouseover" TargetType="{x:Type DockPanel}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Yellow">
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <DataTemplate x:Key="ItemTemplate">
        <Border x:Name="ItemBorder" HorizontalAlignment="Stretch" BorderThickness="0" Background="#BBB" ClipToBounds="True" >
            <DockPanel ClipToBounds="True" HorizontalAlignment="Stretch" Style="{StaticResource onmouseover}">
                <Label Content="{Binding Name}" HorizontalAlignment="Left" Height="80"></Label>
                <Button Content="Delete" HorizontalAlignment="Right" Margin="0,0,10,0"/>
            </DockPanel>
        </Border>
...

Answer 1

Give the DockPanel Background="Transparent" . That should allow it to capture mouse events.

Answer 2

I don't see anything obviously wrong in the snippet you've posted, and since I'm not in front of Studio, I can't try it out, but if I were you, I'd try adding a MouseEnter handler on the DockPanel (just throw the do-nothing handler in the code-behind for the view, since you'll remove it later).

Make sure that handler is getting hit when you enter, and with the debugger/immediate window, make sure the IsMouseOver property is as you expect it to be. That will at least direct your next debugging steps:

If IsMouseOver is true and your handler is hit, then my guess would be something about the trigger you've got set up isn't quite right.

If IsMouseOver is false or your handler isn't hit, then my guess would be something like IsHitTestVisible is set to false or something of that sort.

Just for fun, I'd also try moving the style declaration inline to the dockpanel, just to make sure, like so:

<DataTemplate x:Key="ItemTemplate"> 
    <Border x:Name="ItemBorder" HorizontalAlignment="Stretch" BorderThickness="0" Background="#BBB" ClipToBounds="True" > 
        <DockPanel ClipToBounds="True" HorizontalAlignment="Stretch">
            <DockPanel.Style>
                <Style TargetType="{x:Type DockPanel}">  
                    <Style.Triggers>  
                        <Trigger Property="IsMouseOver" Value="True">  
                            <Setter Property="Background" Value="Yellow"/>  
                        </Trigger>  
                    </Style.Triggers>  
                </Style> 
            </DockPanel.Style>
            <Label Content="{Binding Name}" HorizontalAlignment="Left" Height="80"></Label> 
            <Button Content="Delete" HorizontalAlignment="Right" Margin="0,0,10,0"/> 
        </DockPanel> 
    </Border>