wpf拖拽图片,滚轮放大缩小

WPF提供了很多函数方便我们处理图片，例如各式各样的Transform类用来移动、缩放和旋转图片，有各式各样的Effect类来修改图片的外观。更难得的是，这些类都可以在XAML代码直接设置，而XAML为了提高代码的可维护性，又为我们提供了Resource这么好的概念来将通用的代码和设置保存在一个中心位置，其它控件可以直接引用同一个Resource就可以获取同样的设置。因此，为什么我们不能将这两个工具结合起来编写尽量少的代码来实现图片移动和缩放的功能呢？

步骤如下：

1.         定义一个TranslateTransform实例来修改图片显示的起始位置。

2.         定义一个ScaleTransform实例来缩放图片的大小，你可以通过设置CenterX和CenterY的值来指定图片缩放的原点。

3.         将两个Transform放到一个TransformGroup里面，这样Image控件就可以在显示的时候综合使用两个Transform的效果了。

4.         将TransformGroup放到当前窗体的Resource里面，这样窗体里面所有的Image控件都可以引用到这个实例。

5.         在鼠标移动事件里面修改TranslateTransform对应的值。

6.         在鼠标滚轮事件里面修改ScaleTransform的ScaleX和ScaleY的值来缩放图片。

<Window x:Class="图片的缩放.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:图片的缩放"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="MainPanel">
        <Grid.Resources>
            <TransformGroup x:Key="ImageTransformResource">
                <ScaleTransform />
                <TranslateTransform />
            </TransformGroup>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" x:Name="MasterImage"
                   MouseLeftButtonDown="MasterImage_MouseLeftButtonDown"
                   MouseLeftButtonUp="MasterImage_MouseLeftButtonUp"
                   MouseMove="MasterImage_MouseMove"
                   MouseWheel="MasterImage_MouseWheel">
            <Rectangle.Fill>
                <VisualBrush Transform="{StaticResource ImageTransformResource}" Stretch="Uniform">
                    <VisualBrush.Visual>
                        <Image Source="shipin.png" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Grid.Column="1"
                   MouseLeftButtonDown="MasterImage_MouseLeftButtonDown"
                   MouseLeftButtonUp="MasterImage_MouseLeftButtonUp"
                   MouseMove="MasterImage_MouseMove"
                   MouseWheel="MasterImage_MouseWheel">
            <Rectangle.Fill>
                <VisualBrush Transform="{StaticResource ImageTransformResource}" Stretch="Uniform">
                            <VisualBrush.Visual>
                                <Image Source="zhuanhuan.png" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>

using System.Diagnostics;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace 图片的缩放
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private bool m_IsMouseLeftButtonDown;
        private void MasterImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Rectangle rectangle = sender as Rectangle;
            if (rectangle == null)
                return;

            rectangle.ReleaseMouseCapture();
            m_IsMouseLeftButtonDown = false;
        }

        /// <summary>
        /// 鼠标的位置
        /// </summary>
        private Point m_PreviousMousePoint;

        /// <summary>
        /// 鼠标左键按下
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void MasterImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Rectangle rectangle = sender as Rectangle;
            if (rectangle == null)
                return;

            rectangle.CaptureMouse();//捕获鼠标
            m_IsMouseLeftButtonDown = true;
            m_PreviousMousePoint = e.GetPosition(rectangle);
        }

        /// <summary>
        /// 鼠标移动
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void MasterImage_MouseMove(object sender, MouseEventArgs e)
        {
            Rectangle rectangle = sender as Rectangle;
            if (rectangle == null)
                return;

            if (m_IsMouseLeftButtonDown)
                DoImageMove(rectangle, e);
        }

        /// <summary>
        /// 开始移动
        /// </summary>
        /// <param name="rectangle"></param>
        /// <param name="e"></param>
        private void DoImageMove(Rectangle rectangle, MouseEventArgs e)
        {
            //Debug.Assert(e.LeftButton == MouseButtonState.Pressed);
            if (e.LeftButton != MouseButtonState.Pressed)
                return;

            TransformGroup group = MainPanel.FindResource("ImageTransformResource") as TransformGroup;
            Debug.Assert(group != null);
            TranslateTransform transform = group.Children[1] as TranslateTransform;
            Point position = e.GetPosition(rectangle);
            transform.X += position.X - m_PreviousMousePoint.X;
            transform.Y += position.Y - m_PreviousMousePoint.Y;

            m_PreviousMousePoint = position;
        }

        /// <summary>
        /// 滚轮事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void MasterImage_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            TransformGroup group = MainPanel.FindResource("ImageTransformResource") as TransformGroup;
            Debug.Assert(group != null);
            ScaleTransform transform = group.Children[0] as ScaleTransform;
            transform.ScaleX += e.Delta * 0.001;
            transform.ScaleY += e.Delta * 0.001;//0.001是我随便取的一个值，因为滚轮的Delta值太大了
        }
    }
}