#667 – IsMouseOver vs. IsMouseDirectlyOver

The IsMouseOver property for a user interface element indicates whether the mouse is currently located over the element or any of its children.  For example, for a Button contained in a StackPanel, when the user moves the mouse over the ButtonIsMouseOver will be true for both the Button and the StackPanel.

The IsMouseDirectlyOver, on the other hand, indicates whether the mouse is over a control and not over any of its children.

In the example below, when the mouse is over the button, the StackPanel’s IsMouseOver property is true, but its IsMouseDirectlyOver property is false.

 

Notice that IsMouseDirectlyOver is also false for the Button.  This is because the mouse is actually pointing to some child element within the Button element.

If we move the mouse back off the Button, but still within the StackPanel, its IsMouseDirectlyOver property becomes true.

Advertisement

#666 – Using a Trigger to React to the Mouse Being Over a Control

You can perform some action when the user moves the mouse over a user interface element by defining event handlers for the MouseEnter and MouseLeave events for the element.

If the action that you’re performing is something that can be expressed in XAML (like setting a property value), it’s more elegant to use a trigger to react to the mouse movement.

You can define a property trigger for the IsMouseOver property, setting new values for one or more of the Button’s properties when the mouse is over the Button.

    <StackPanel Margin="20" >
        <Button HorizontalAlignment="Center" Padding="10,5">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Content" Value="Click Me"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Button.Content" Value="!! CLICK Me !!"/>
                            <Setter Property="FontWeight" Value="Bold"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
    </StackPanel>



Note that when you move the mouse off of the Button, the Content and FontWeight properties both revert back to their original values.

#663 – How IsMouseOver Works for Nested Elements

The IsMouseOver property for a user interface element indicates whether the mouse is currently over the element.

When an element is contained within another element in the logical tree, then IsMouseOver will be true for both the lower-level element and for any elements higher up in the logical tree.

Suppose that we have a Button in a StackPanel which is inside a Window.

<Window Name="win1">
    <StackPanel Name="sp1" Background="Pink" Margin="20,0">
        <Button Name="btn1" Content="Click Me" HorizontalAlignment="Center" Padding="10,5"/>
    </StackPanel>
</Window>

If the mouse is in the application’s Window, but outside of the StackPanelIsMouseOver will be true only for the Window.

If we move the mouse into the StackPanel, but not over the ButtonIsMouseOver will be true for both the StackPanel and the Window.

Finally, moving the mouse over the Button results in IsMouseOver being true for all three elements.

#662 – IsMouseOver Property

Every UIElement object has an IsMouseOver property that indicates whether or not the mouse is currently located over the element.

In the example below, we define a Label whose content is bound to the current state of the IsMouseOver property for a Button.

    <StackPanel Margin="20">
        <Button Name="btn1" Content="Move Mouse Over Me !" HorizontalAlignment="Center" Padding="10,5"/>
        <Label Content="{Binding ElementName=btn1, Path=IsMouseOver}" Foreground="Green"/>
    </StackPanel>