[WPF系列]Adorner应用-自定义控件ImageHotSpot

引言

项目中有时需要在图片上标注热区，在HTML中有<area>标签，但在WPF中目前还没现成的控件来实现这这一功能。至于图片热区功能有道词典的【图解词典】是个不错的例子，如图1：

图 1

什么是Adorner？

Adoner 是一个绑定到某个UIElement自定义的FrameWorkElemnt 。Adoner被渲染在AdornerLayer,而AdornerLayer又被渲染在被装饰的Element或者Element集合上面。Adorner的渲染独立于它所装饰的UIElement。Adoner通常使用相对坐标来定位到它所装饰的Element上。    

Adorner应用场景：

• 为UIElement添加功能句柄，从而使用户能够通过某种方式操作改Element（如Resize，Rotate，Reposition等）
• 可以提供多种状态提示或者响应许多事件
• 在UIElement上叠加一些可视修饰（外观修饰）
• 遮罩UIElement的部分或者全部 

本文所涉及的功能一方面是要添加一个装饰元素去标记热区另一方面就是为该热区添加响应事件。    

ImageWithHotSpot

   

先看下效果图:

当用户在图片上点击红色圆圈内部是，将会触发一个点击事件。

   

实现思路：

首先新建一个用户自定义控件ImageWithHotSpots.xaml并在其中添加一个Image控件来存放要添加热点的图片,为了在Image控件上添加热点Adorner，我新建了个ImageHotSpotAdorner类，为了方便控制热点的形状外观我独立定义了个ImageHotSpot类，另一方面在我们引用该自定义控件时不用关注具体的Adorner，而只需要关注热点本身就可以了。

代码结构

代码：

   

ImageHotSpot Class code：

  public class ImageHotSpot
    {
        public int Id { get; set; }
        public Point Location { get; set; }

        public double With { get; set; }

        public double Height { get; set; }

        public Color BorderColor { get; set; }

        public double BorderThickness { get; set; }

        public event EventHandler MouseClick;

        public void InvokeMouseClickEvent()
        {
            if (MouseClick != null)
            {
                MouseClick(this, EventArgs.Empty);
            }
        }
    }

View Code