[WPF] Picture display control

1. Introduction of main functions

        Call the custom picture display control in MainWindow. Transfer the path of the image file by selecting the image button, then refresh the button to display the image, and clear the button to clearly display the content of the image. Here, 2*2 image display controls are distributed on the left.

Two, the picture control

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

The main functions of this control are:

1.  right click to move
2. Left double click to return to the original
3. Mouse wheel zoom in and zoom out      

 Resource binding:

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

The "TheBitmapSource" property of DataContext is bound to the picture resource of the control. in the background there are

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

Where Product:

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

3. Function realization

Right click and hold to move:

        Corresponding Border events: MouseRightButtonDown, MouseRightButtonUp, MouseMove

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

When the right mouse button is clicked, capture the current mouse

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

When the right mouse button is released, release the current mouse

        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;
            }
        }

When the mouse is moved, the picture moves with it

Left double click to return to the original

        Corresponding Border event: MouseLeftButtonDown

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

        }

mouse wheel zoom

        Corresponding to the border event 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;
        }