WPF下的仿QQ图片查看器

本例中的大图模式使用图片控件展示，监听控件的鼠标滚轮事件和移动事件，缩略图和鹰眼模式采用装饰器对象IndicatorObject和Canvas布局。百分比使用一个定时器，根据图片的放大倍数计算具体的数值显示。

首先看看效果图：

WPF下的仿QQ图片查看器

以下开始绘制图片定义缩略图上白色的矩形，这其实是一个Indicator，它的外围是一个Canvas，然后缩略图是一个Image控件

 internal class IndicatorObject : ContentControl
    {
        private MaskCanvas canvasOwner;

        public IndicatorObject(MaskCanvas canvasOwner)
        {
            this.canvasOwner = canvasOwner;
        }

        static IndicatorObject()
        {
            var ownerType = typeof(IndicatorObject);

            FocusVisualStyleProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(null));
            DefaultStyleKeyProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(ownerType));
            MinWidthProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(5.0));
            MinHeightProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(5.0));
        }

        public void Move(System.Windows.Point offset)
        {
            var x = Canvas.GetLeft(this) + offset.X;
            var y = Canvas.GetTop(this) + offset.Y;

            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;

            x = Math.Min(x, this.canvasOwner.Width - this.Width);
            y = Math.Min(y, this.canvasOwner.Height - this.Height);

            Canvas.SetLeft(this, x);
            Canvas.SetTop(this, y);

            canvasOwner.UpdateSelectionRegion(new Rect(x, y, Width, Height), true);
        }



    }

Indicator