如何在.NET MAUI中实现类似ImageMap的功能？

核心思路 #

通过Image控件的点击事件，结合坐标计算匹配预设的热点区域，触发模态弹窗，纯原生实现无需第三方控件，效果等价于HTML的map/usemap或ASP.NET的ImageMap。

步骤实现 #

1. 定义热点区域模型 #

创建类存储热点区域的比例坐标和弹窗内容：

public class ImageHotspot
{
    // 区域左上角X（相对于图片的比例值，范围0-1）
    public double X { get; set; }
    // 区域左上角Y（相对于图片的比例值，范围0-1）
    public double Y { get; set; }
    // 区域宽度比例
    public double Width { get; set; }
    // 区域高度比例
    public double Height { get; set; }
    // 弹窗展示内容
    public string PopupContent { get; set; }
}

2. 页面布局与逻辑 #

XAML中添加带点击手势的Image控件：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiHotspotDemo.MainPage">

    <Image x:Name="TargetImage" 
           Source="your_image_source.png" 
           Aspect="AspectFit">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnImageTapped" />
        </Image.GestureRecognizers>
    </Image>

</ContentPage>

后台代码实现点击匹配与弹窗逻辑：

using Microsoft.Maui.Controls;
using System.Collections.Generic;
using System.Linq;

namespace MauiHotspotDemo
{
    public partial class MainPage : ContentPage
    {
        private readonly List<ImageHotspot> _hotspots;

        public MainPage()
        {
            InitializeComponent();
            // 初始化热点区域（按图片比例设置，适配不同分辨率）
            _hotspots = new List<ImageHotspot>
            {
                new ImageHotspot { X = 0.1, Y = 0.1, Width = 0.2, Height = 0.2, PopupContent = "区域1提示内容" },
                new ImageHotspot { X = 0.6, Y = 0.3, Width = 0.3, Height = 0.4, PopupContent = "区域2提示内容" }
            };
        }

        private async void OnImageTapped(object sender, TappedEventArgs e)
        {
            if (sender is Image image)
            {
                var tapPosition = e.GetPosition(image);
                if (tapPosition.HasValue)
                {
                    // 将点击坐标转为图片比例值
                    double relativeX = tapPosition.Value.X / image.Width;
                    double relativeY = tapPosition.Value.Y / image.Height;

                    // 匹配点击位置对应的热点区域
                    var matchedHotspot = _hotspots.FirstOrDefault(h =>
                        relativeX >= h.X && relativeX <= h.X + h.Width &&
                        relativeY >= h.Y && relativeY <= h.Y + h.Height);

                    if (matchedHotspot != null)
                    {
                        // 弹出系统自带模态弹窗
                        await DisplayAlert("热点提示", matchedHotspot.PopupContent, "关闭");
                        // 若需自定义弹窗，可替换为模态页：
                        // await Navigation.PushModalAsync(new CustomPopupPage(matchedHotspot.PopupContent));
                    }
                }
            }
        }
    }
}

3. 进阶优化点 #

• 支持复杂形状：扩展ImageHotspot添加形状类型（圆形、多边形），编写对应的点-in-形状判断逻辑
• 坐标适配：若图片使用AspectFill，需额外计算显示区域的偏移量修正坐标
• 可视化调试：开发阶段可在图片上叠加半透明区域标记热点位置，方便调试

内容的提问来源于stack exchange，提问作者Arun