[WPF] 图片展示控件

一、主要功能介绍

        在MainWindow中调用自定义的图片展示控件。通过选择图片按钮将图片文件的路径传输进来，然后刷新按钮显示图片，清楚按钮则清楚展示的图片内容。这里左边分布了2*2的图片展示控件。

二、图片控件

    <Border BorderBrush="Blue" BorderThickness="2" MinHeight="400" MinWidth="400"
                x:Name="xBorder" 
            MouseWheel="Image_MouseWheel" MouseLeftButtonDown="Image_MouseLeftButtonDown" 
            MouseRightButtonDown="Image_MouseRightButtonDown" MouseRightButtonUp="Image_MouseRightButtonUp"
            MouseMove="Image_MouseMove">
        <Grid x:Name="xImageGrid" ClipToBounds="True">
            <Image x:Name="xImage" Source="{Binding TheBitmapSource}"  Stretch="Uniform" RenderOptions.BitmapScalingMode="NearestNeighbor">
                <Image.RenderTransform>
                    <MatrixTransform x:Name="xMatrix"/>
                </Image.RenderTransform>
            </Image>
        </Grid>
    </Border>

该控件主要功能是：

1.  右键按住移动
2. 左键双击回原
3. 鼠标滚轮放大缩小      

 资源绑定：

            <views:ImageDispalyView  x:Name="xView1"/>

控件图片资源中绑定的是 DataContext的 “TheBitmapSource"属性。在后台中有

 Mat image = new Mat();
 image = new Mat(imageFilePath,ImreadModes.ReducedColor2);
 dispalyViews[viewIndex].DataContext = new Product(image);

其中Product：

    public class Product
    {
        public Mat ImageMat { get; set; }
        public BitmapSource TheBitmapSource { get; set; }
        public Product(Mat mat)
        {
            ImageMat = mat;
            TheBitmapSource=mat.ToBitmapSource();
        }
    }

三、功能实现

右键按住移动：

        对应Border事件：MouseRightButtonDown、MouseRightButtonUp、MouseMove

        private void Image_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            var position = e.GetPosition(xImageGrid);
            mousePos = position;
            xImage.CaptureMouse();
        }

当右键鼠标点下时，捕捉当前鼠标

        private void Image_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
        {
            xImage.ReleaseMouseCapture();
        }

当右键鼠标松开时，释放当前鼠标

        private void Image_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (xImage.IsMouseCaptured)
            {
                var pos = e.GetPosition(xImageGrid);
                var m = xMatrix.Value;

                m.OffsetX += pos.X - mousePos.X;
                m.OffsetY += pos.Y - mousePos.Y;
                xMatrix = new MatrixTransform(m);
                xImage.RenderTransform = xMatrix;
                mousePos = pos;
            }
        }

鼠标移动时，图片跟着移动

左键双击回原

        对应Border事件：MouseLeftButtonDown

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ClickCount > 1)
            {
                var m = new Matrix();
                xMatrix = new MatrixTransform(m);
                xImage.RenderTransform = xMatrix;
            }

        }

鼠标滚轮缩放

        对应border事件MouseWheel

        private void Image_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            var position = e.GetPosition(xImage);
            var m = xMatrix.Value;
            if (e.Delta > 0)
            {
                m.ScaleAtPrepend(1.1, 1.1, position.X, position.Y);
            }
            else
            {
                m.ScaleAtPrepend(1 / 1.1, 1 / 1.1, position.X, position.Y);
            }
            xMatrix = new MatrixTransform(m);
            xImage.RenderTransform = xMatrix;
        }