Question

我有两个交叉的矩形。当鼠标悬停在它们上面时，我希望两者的不透明度发生变化。它适用于鼠标悬停在其中一个上面的情况。但是当鼠标位于矩形的交叉区域时，只有上部矩形会改变其不透明度。在这种情况下，你能告诉我如何让两个矩形改变不透明度吗？

<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

事实上，HiTech Magic描述的方法与此类似：

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

其代码隐藏：

    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;
    }

当然，最好为这种情况添加一些特殊的附加属性和行为。

Answer 2

您需要将悬停处理程序添加到父网格中，使两个矩形都具有IsHitTestVisible = False并使用VisualTreeHelper.FindElementsInHostCoordinates来确定鼠标实际上是哪个对象（1个或更多）。

如果必须让它基于样式，Mario Vernari的建议会起作用，但悬停会触发网格中的任何位置，而不仅仅是矩形。

这对于附加行为来说是一个非常有用的想法。该行为将实现上面概述的代码，但会触发子对象上的悬停事件，因此您仍然可以使用样式进行...将不得不尝试。

Answer 3

尝试将样式应用于Grid元素。

MouseEvent没有鼓泡

3 个答案: