WPF实现聚光灯查看内容特效

实现效果如下：

思路：该效果用到了鼠标跟随获取坐标位置，根据位置信息设置展示图像的Clip属性EllipseGeometry；同时在进入进出时添加放大缩小动作。

步骤：

1、自定义控件MyImageBox的封装

添加展示图像和展示字体内容属性：

        public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(ImageSource), typeof(MyImageBox), new PropertyMetadata(null));
        public ImageSource DisplayImage
        {
            get { return (ImageSource)GetValue(DisplayImageProperty); }
            set { SetValue(DisplayImageProperty, value); }
        }

        public static readonly DependencyProperty DisplayTextProperty = DependencyProperty.Register("DisplayText", typeof(String), typeof(MyImageBox), new PropertyMetadata(null));
        public String DisplayText
        {
            get { return (String)GetValue(DisplayTextProperty); }
            set { SetValue(DisplayTextProperty, value); }
        }

前端xaml：

交互逻辑：

        private Point lastMousePosition = new Point(0, 0);
        private EllipseGeometry myEllipseGeometry;
        private bool isMouseLeave = false;

        public MyImageBox()
        {
            InitializeComponent();
            myEllipseGeometry = new EllipseGeometry()
            {
                Center = new Point(0,0),
                RadiusX = 0,
                RadiusY = 0,
            };
            CompositionTarget.Rendering += UpdateRectangle;
            this.PreviewMouseMove += UpdateLastMousePosition;
            this.MouseEnter += MyImageBox_MouseEnter;
            this.MouseLeave += MyImageBox_MouseLeave;
        }

        private void MyImageBox_MouseLeave(object sender, MouseEventArgs e)
        {
            isMouseLeave = true;
            DoubleAnimation scale = new DoubleAnimation();
            scale.From = 100;
            scale.To = 0;
            scale.Duration = new Duration(TimeSpan.FromMilliseconds(100));
            myEllipseGeometry.BeginAnimation(EllipseGeometry.RadiusXProperty, scale);
            myEllipseGeometry.BeginAnimation(EllipseGeometry.RadiusYProperty, scale);
        }

        private void MyImageBox_MouseEnter(object sender, MouseEventArgs e)
        {
            isMouseLeave = false;
            DoubleAnimation scale = new DoubleAnimation();
            scale.From = 0;
            scale.To = 100;
            scale.Duration = new Duration(TimeSpan.FromMilliseconds(100));
            myEllipseGeometry.BeginAnimation(EllipseGeometry.RadiusXProperty, scale);
            myEllipseGeometry.BeginAnimation(EllipseGeometry.RadiusYProperty, scale);
        }

        private void UpdateRectangle(object sender, EventArgs e)
        {
            if (isMouseLeave) return;
            myEllipseGeometry.Center = new Point(lastMousePosition.X, lastMousePosition.Y);
            this.GeometryImage.Clip = myEllipseGeometry;
        }

        private void UpdateLastMousePosition(object sender, MouseEventArgs e)
        {
            lastMousePosition = e.GetPosition(containerCanvas);
        }

2、主窗体调用