MouseEvent not Bubbling up

I have two intersecting rectangles. I want the opacity of both to change when Mouse hovers over them. It works when mouse is over one of them. But when the mouse is on the intersecting area of the rectangles, only the upper rectangle changes its opacity. Can you please let me know how I can get both the rectangles to change opacity in this case?

<Window x:Class="WpfTestApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:WpfTestApp="clr-namespace:WpfTestApp" Title="MainWindow" Height="350" Width="525" >
<Window.Resources>
    <Style x:Key="RectangleHighlighter" TargetType="{x:Type Rectangle}">
        <Setter Property="Opacity" Value="0.25" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1" />
            </Trigger>
        </Style.Triggers>
    <开发者_StackOverflow;/Style>
</Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Rectangle Stroke="Black" Width="100" Fill="Green" Height="1000" Margin="0,15,0,0" Style="{StaticResource RectangleHighlighter}"/>
        <Rectangle Stroke="Black" Width="1000" Fill="Green" Height="100" Margin="0,15,0,0" Style="{StaticResource RectangleHighlighter}"/>
    </Grid>
</Window>

In fact the similar approach that HiTech Magic has described:

<Window.Resources>
    <Style x:Key="RectangleHighlighter" TargetType="{x:Type Rectangle}">
        <Setter Property="Opacity" Value="0.25" />
        <Style.Triggers>
            <Trigger Property="Tag" Value="MouseOver">
                <Setter Property="Opacity" Value="1" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent" MouseMove="LayoutRoot_MouseMove">
    <Rectangle Stroke="Black" Width="100" Fill="Green" Height="1000" Margin="0,15,0,0" Style="{StaticResource RectangleHighlighter}"/>
    <Rectangle Stroke="Black" Width="1000" Fill="Green" Height="100" Margin="0,15,0,0" Style="{StaticResource RectangleHighlighter}"/>
</Grid>

And its codebehind:

    private List<DependencyObject> hitResultsList = new List<DependencyObject>();

    private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
    {
        // Retrieve the coordinate of the mouse position.
        Point pt = e.GetPosition((UIElement)sender);

        // Clear the contents of the list used for hit test results.
        hitResultsList.Clear();

        // Set up a callback to receive the hit test result enumeration.
        VisualTreeHelper.HitTest(LayoutRoot, null,
            new HitTestResultCallback(MyHitTestResult),
            new PointHitTestParameters(pt));

        // Unset all children
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(LayoutRoot); ++i)
        {
            var element = VisualTreeHelper.GetChild(LayoutRoot, i) as FrameworkElement;
            if (element != null)
            {
                element.Tag = null;
            }
        }

        // Perform actions on the hit test results list.
        foreach (var dependencyObject in hitResultsList)
        {
            var element = dependencyObject as FrameworkElement;
            if (element != null)
            {
                element.Tag = "MouseOver";
            }
        }
    }

    // Return the result of the hit test to the callback.
    public HitTestResultBehavior MyHitTestResult(HitTestResult result)
    {
        // Add the hit test result to the list that will be processed after the enumeration.
        hitResultsList.Add(result.VisualHit);

        // Set the behavior to return visuals at all z-order levels.
        return HitTestResultBehavior.Continue;
    }

Of course its better to add some special attached properties and behaviours for this case.

You need to add your hover handler to the parent grid instead, make both Rectangles have IsHitTestVisible=False and use VisualTreeHelper.FindElementsInHostCoordinates to determine what object was actually under the mouse (1 or more).

If you must have it style-based, Mario Vernari's suggestion will work, but the hover will trigger anywhere in the grid and not just over the rectangles.

This strikes me as a very useful idea for an attached Behaviour. The behaviour would implement the code outlined above, but would trigger hover events on the child objects so you could still do it using styles... will have to give that a try.

Try to apply the style to the Grid element.