MouseEvent not Bubbling up

Question

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>
    </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>

Answer 1

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.