How to implement ImageMap like functionality in .NET MAUI?

Question

I am very new to .NET MAUI. I have requirement to show modal window/popup when clicked in specific areas of an image in my .NET MAUI application. The functionality is similar to what we implement in html with with and usemap or like ImageMap control in ASP.Net Any help is appreciated . Thank you

I have tried exploring .NET MAUI controls , Community controls . Did not find any solution

Answer 1

For a simple modal popup, you can use DisplayAlert. See https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pop-ups?view=net-maui-8.0. For a more versatile Popup, check out CommunityToolkit.Maui - https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/popup

For HTML Image Map behavior I adapted the example https://www.w3schools.com/html/html_images_imagemap.asp to XAML using the following pattern:

<Grid>
    <Image Source="workplace.jpg" />
    <Button CommandParameter="Computer" />
    <Button CommandParameter="Phone" />
    <Button CommandParameter="Coffee" CornerRadius="44" />
</Grid>

This is because you can stack VisualElements into the same Grid cell. If you use pixel-perfect coordinates you can get the effect you need.

Also, note the appropriate setting of Button.CornerRadius to create a round button instead of a rectangular one.

<!-- ImageMapPage.xaml.cs -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Maui.StackOverflow.ImageMapPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="ImageMapPage">
    <VerticalStackLayout>
        <Grid HeightRequest="379" WidthRequest="400">
            <Grid.Resources>
                <Style TargetType="Button">
                    <Setter Property="HorizontalOptions" Value="Start" />
                    <Setter Property="VerticalOptions" Value="Start" />
                    <Setter Property="Opacity" Value="0.8" />
                </Style>
            </Grid.Resources>
            <Image HeightRequest="379" WidthRequest="400">
                <Image.Source>
                    <UriImageSource Uri="https://www.w3schools.com/html/workplace.jpg" />
                </Image.Source>
            </Image>
            <Button Clicked="Button_Clicked" CommandParameter="Computer" TranslationX="34" TranslationY="44" WidthRequest="236" HeightRequest="306" />
            <Button Clicked="Button_Clicked" CommandParameter="Phone" TranslationX="290" TranslationY="172" WidthRequest="43" HeightRequest="78" />
            <Button Clicked="Button_Clicked" CommandParameter="Coffee" TranslationX="293" TranslationY="256" WidthRequest="88" HeightRequest="88" CornerRadius="44" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

// ImageMapPage.xaml.cs
namespace Maui.StackOverflow;
public partial class ImageMapPage : ContentPage
{
    public ImageMapPage()
    {
        InitializeComponent();
    }
    void Button_Clicked(object sender, EventArgs e)
    {
        Button btn = (Button)sender;
        DisplayAlert("Identify", btn.CommandParameter.ToString(), "OK");
    }
}

If you are looking for creating image maps for irregular shapes, I have a more generalize solution involving SkiaSharp's SKBitmap here:

https://stackoverflow.com/a/77428504/881441