Search code examples
uwpuwp-xaml

How to achieve a static image with overlay which displays a text when user hovers over the blue overlay in UWP apps?

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. enter image description here

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?

Solution

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

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

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

    enter image description here

    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.sstatic.net/wrWb8.jpg" canvasLeft="250" canvasTop="250"/>