How do I achieve something like this in a UWP app?
Use case: Static image contains blue dots(overlays) which give the user an opportunity to click/hover over the blue dot to learn more.When user hovers/clicks the blue dot, a text pops up describing something in the image.

我如何在UWP应用程序中实现这样的功能？使用案例：静态图像包含蓝点(覆盖)，使用户有机会在蓝点上单击/悬停以了解更多信息。当用户悬停/单击蓝点时，会弹出一个文本来描述图像中的内容。

1)How do I achieve this blue dot in different places on a static image?
2)Should I draw the blue dot in XAML or is there a XAMl default control for this?
3)Should I rather host this image in a webview control and draw the image using HTML?
4)How do I take care the localization for the string using the text for the blue dots?

1)如何在静态图像上的不同位置实现这个蓝点？2)我应该在XAML中绘制这个蓝点，还是有一个XAML默认控件？3)我应该将此图像托管在Webview控件中并使用HTML绘制图像吗？4)我如何使用蓝点的文本来处理字符串的本地化？

You can use UserControl to create such a control, which is also convenient for reuse.

您可以使用UserControl来创建这样的控件，这也便于重复使用。

This UserControl has three custom property, it use Canvas to adjust the position of the blue circle in the image.

这个UserControl有三个自定义属性，它使用Canvas来调整图像中蓝色圆圈的位置。

• mainImageSource Define the source of main image


• canvasLeft Define Canvas.Left property of the blue circle


• canvasTop Define Canvas.Top property of the blue circle

Q: "How do I take care the localization for the string using the text for
the blue dots?"

问：“如何使用蓝点文本对字符串进行本地化？”

A: You can refer to this document Localize strings in your UI and app package manifest.

答：您可以参考本文档在您的UI和应用程序包清单中本地化字符串。

MyImageControl.xaml

<UserControl
    x:Class="UWPappleImage.MyImageControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPappleImage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Canvas x:Name="canvas">
        <Image x:Name="mainImage" Canvas.ZIndex="0" Source="{x:Bind mainImageSource}" Width="{Binding ElementName=canvas, Path=ActualWidth}" 
               Height="{Binding ElementName=canvas, Path=ActualHeight}" Stretch="Fill"/>

        <Ellipse Fill="SteelBlue" Height="20" Width="20" Canvas.ZIndex="1" Canvas.Left="{x:Bind canvasLeft}" Canvas.Top="{x:Bind canvasTop}">
            <ToolTipService.ToolTip>
                <ToolTip x:Uid="imageTip"/>
            </ToolTipService.ToolTip>
        </Ellipse>
    </Canvas>
</UserControl>

MyImageControl.xaml.cs

public sealed partial class MyImageControl : UserControl
{
    public static readonly DependencyProperty canvasLeftProperty =
   DependencyProperty.Register("canvasLeft", typeof(double), typeof(MyImageControl), new PropertyMetadata(0.0));

    public static readonly DependencyProperty canvasTopProperty =
  DependencyProperty.Register("canvasTop", typeof(double), typeof(MyImageControl), new PropertyMetadata(0.0));

    public static readonly DependencyProperty mainImageSourceProperty =
  DependencyProperty.Register("mainImageSource", typeof(string), typeof(MyImageControl), new PropertyMetadata("Assets/StoreLogo.png"));

    public MyImageControl()
    {
        this.InitializeComponent();
    }

    public string mainImageSource
    {
        get { return (string)GetValue(mainImageSourceProperty); }
        set { SetValue(mainImageSourceProperty, value); }
    }

    public double canvasLeft
    {
        get { return (double)GetValue(canvasLeftProperty); }
        set { SetValue(canvasLeftProperty, value); }
    }

    public double canvasTop
    {
        get { return (double)GetValue(canvasTopProperty); }
        set { SetValue(canvasTopProperty, value); }
    }

}

MainPage.xaml

<local:MyImageControl Height="500" Width="500" mainImageSource="https://i.stack.imgur.com/wrWb8.jpg" canvasLeft="250" canvasTop="250"/>