WPF缩放图片 不显示超出控件的部分

一、方式一

1.1 前台代码

<Window x:Class="Demo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Demo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Border Width="450" Height="400"  ClipToBounds="True">
        <Grid x:Name="grd">
            <Grid x:Name="grdRelative"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Width="{Binding ActualWidth, ElementName=grdMap}"
              Height="{Binding ActualHeight, ElementName=grdMap}"></Grid>
            <Grid x:Name="grdMap"
              MouseWheel="grdMap_MouseWheel"
              MouseLeave="grdMap_MouseLeave"
              MouseDown="grdMap_MouseDown"
              MouseUp="grdMap_MouseUp"
              MouseMove="grdMap_MouseMove"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              RenderTransformOrigin="0,0">
                <Grid.RenderTransform>
                    <TransformGroup  >
                        <ScaleTransform ScaleX="{Binding Value, ElementName=slider}"
                                    ScaleY="{Binding Value, ElementName=slider}" />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform />
                    </TransformGroup>
                </Grid.RenderTransform>
                <Image Source="D:\program\program\Test\Demo\Demo\bin\Debug\net6.0-windows\1.png" />
            </Grid>
            <Slider x:Name="slider"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Orientation="Vertical"
                Width="20"
                Height="200"
                Maximum="3"
                Minimum="1" />
        </Grid>
    </Border>
 
</Window>

1.2 后台代码

  public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        ScaleTransform st;
        TranslateTransform tt;
        TransformGroup group;
        bool isDrag = false;
        Point startPoint;

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            group = (TransformGroup)grdMap.RenderTransform;
            st = group.Children[0] as ScaleTransform;
            tt = group.Children[3] as TranslateTransform;
        }

        private void grdMap_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            var point = e.GetPosition(grdRelative); // 实际点击的点
            var actualPoint = group.Inverse.Transform(point); // 想要缩放的点
            slider.Value = slider.Value + (double)e.Delta / 1000;
            tt.X = -((actualPoint.X * (slider.Value - 1))) + point.X - actualPoint.X;
            tt.Y = -((actualPoint.Y * (slider.Value - 1))) + point.Y - actualPoint.Y;
        }

        private void grdMap_MouseDown(object sender, MouseButtonEventArgs e)
        {
            isDrag = true;
            startPoint = e.GetPosition(grdRelative);
        }

        private void grdMap_MouseUp(object sender, MouseButtonEventArgs e)
        {
            isDrag = false;
        }

        private void grdMap_MouseLeave(object sender, MouseEventArgs e)
        {
            isDrag = false;
        }

        private void grdMap_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDrag)
            {
                Point p = e.GetPosition(grdRelative);
                Point topPoint = grdMap.TranslatePoint(new Point(0, 0), grdRelative);
                Point bottomPoint = grdMap.TranslatePoint(new Point(grdMap.ActualWidth, grdMap.ActualHeight), grdRelative);

                double moveX = p.X - startPoint.X;
                double moveY = p.Y - startPoint.Y;

                //向上向下移动条件判断（会有一点点的小偏移，如果想更精确的控制，那么分向上和向下两种情况，并判断边距）
                if ((moveY < 0 && bottomPoint.Y > grdRelative.ActualHeight) || (moveY > 0 && topPoint.Y < 0))
                {
                    tt.Y += (p.Y - startPoint.Y);
                    startPoint.Y = p.Y;
                }

                //向左向右移动条件判断
                if ((moveX < 0 && bottomPoint.X > grdRelative.ActualWidth) || (moveX > 0 && topPoint.X < 0))
                {
                    tt.X += (p.X - startPoint.X);
                    startPoint.X = p.X;
                }
            }
        }
    }

二、方式二

1.1 前台代码

<Window x:Class="Demo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Demo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Border Width="450" Height="400"  ClipToBounds="True">
        <Image Name="imageScan" MouseWheel="Grid_MouseWheel" Source="D:\program\program\Test\Demo\Demo\bin\Debug\net6.0-windows\1.png">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="sfr" />
                    <TranslateTransform x:Name="tlt" />
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Border>
 
</Window>

1.2 后台代码

  public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Grid_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            System.Windows.Point centerPoint = e.GetPosition(imageScan);

            double val = (double)e.Delta / 1000;   //描述鼠标滑轮滚动
            if (sfr.ScaleX < 4 && sfr.ScaleY < 4 && sfr.ScaleX <= 1 && sfr.ScaleY <= 1 && e.Delta <= 0)
            {
                return;
            }
            sfr.CenterX = centerPoint.X;
            sfr.CenterY = centerPoint.Y;

            sfr.ScaleX += val;
            sfr.ScaleY += val;
        }
    }