WPF

Question

案例是这个：

我有一个代表模式的图像，假设像下面这样的十字

我需要将图像包含在 WPF 用户控件中，让用户单击每个分支（红色、绿色或蓝色...），然后根据所选分支执行不同的操作。

解决这个问题的最佳方法是什么？

我试过 canvas 但我找不到正确追踪背景图像形状的方法（也是因为真实图像不像这里的示例那么简单）

感谢任何建议

Answer 1

这取决于形状的复杂程度，但通过 VisualTreeHelper.HitTest 方法不难找到触发鼠标松开事件的形状。

假设有一个 Canvas 里面有两个矩形。

<Canvas Background="Transparent"
        PreviewMouseUp="Canvas_PreviewMouseUp">
    <Rectangle x:Name="Rect1" Canvas.Left="20" Canvas.Top="20"
               Width="20" Height="20" Fill="Red"/>
    <Rectangle x:Name="Rect2" Canvas.Left="80" Canvas.Top="80"
               Width="20" Height="20" Fill="Green"/>
</Canvas>

捕捉它的 PreviewMouseUp 事件，您可以告诉 Rectangle 在何处触发该事件。

private void Canvas_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
    var position = e.GetPosition((IInputElement)sender);
    var result = VisualTreeHelper.HitTest((Visual)sender, position);
    if (result.VisualHit is Rectangle rect)
    {
        Debug.WriteLine($"Hit {rect.Name}");
    }
}

WPF - 显示图像并在其上设置不同的可点击区域

WPF - show an image and set different clickable areas on it

image

wpf-controls