WPF 控件的缩放和移动

WPF 控件的缩放和移动

1.页面代码

<ContentControl ClipToBounds="True" Cursor="SizeAll">
     <Viewbox
         x:Name="viewbox"
         MouseDown="viewbox_MouseDown"
         MouseMove="viewbox_MouseMove"
         MouseWheel="Viewbox_MouseWheel">
         <Viewbox.RenderTransform>
             <TransformGroup>
                 
                 <ScaleTransform x:Name="scaler"/>
                 <TranslateTransform x:Name="transer" />
             TransformGroup>
         Viewbox.RenderTransform>
         <Image Name="image" Source="{Binding ImageSource, RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}}" />
     Viewbox>
 ContentControl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ScaleTransform 用于进行缩放

TranslateTransform 用于进行位置的移动

ViewBox中可以放入不同的控件不光可以是图片

ContentControl 可以对超过容器的部分进行剪切,这样就不会覆盖到其他控件了

2.后台代码

public partial class ImageSuper : UserControl
{
    public ImageSuper()
    {
        InitializeComponent();
    }

    public ImageSource ImageSource
    {
        get { return (ImageSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageSuper), null);

    public double Scale
    {
        get { return (double)GetValue(ScaleProperty); }
        set { SetValue(ScaleProperty, value); }
    }
    public static readonly DependencyProperty ScaleProperty =
        DependencyProperty.Register("Scale", typeof(double), typeof(ImageSuper),
            new PropertyMetadata(default(double), new PropertyChangedCallback(ScalePropertyChanged)));
    public double TranserX
    {
        get { return (double)GetValue(TranserXProperty); }
        set { SetValue(TranserXProperty, value); }
    }
    public static readonly DependencyProperty TranserXProperty =
        DependencyProperty.Register("TranserX", typeof(double), typeof(ImageSuper),
            new PropertyMetadata(default(double), new PropertyChangedCallback(TranserPropertyChanged)));
    public double TranserY
    {
        get { return (double)GetValue(TranserYProperty); }
        set { SetValue(TranserYProperty, value); }
    }
    public static readonly DependencyProperty TranserYProperty =
        DependencyProperty.Register("TranserY", typeof(double), typeof(ImageSuper),
            new PropertyMetadata(default(double), new PropertyChangedCallback(TranserPropertyChanged)));

    public static void ScalePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as ImageSuper).DoScale();
    }
    public static void TranserPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as ImageSuper).DoMove();
    }

    /// 

    /// 缩放图片。最小为0.1倍，最大为0倍
    /// 
    private void DoScale()
    {
        // 限制最大、最小缩放倍数
        if (scaler.ScaleX + Scale < 0.1 || scaler.ScaleX + Scale > 80) return;

        scaler.ScaleX = Scale;
        scaler.ScaleY = Scale;
    }

    /// 

    /// 移动图片
    /// 
    private void DoMove()
    {
        transer.X = TranserX;
        transer.Y = TranserY;
    }

    
    private void Viewbox_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        var point = e.GetPosition(viewbox);
        var delta = e.Delta * 0.002;
        Scale += delta;
        TranserX -= point.X * delta;
        TranserY -= point.Y * delta;
    }

    private Point lastMousePosition;
    private void viewbox_MouseDown(object sender, MouseButtonEventArgs e)
    {
        Point currentMousePosition = e.GetPosition(image);
        lastMousePosition = currentMousePosition;
    }

    private void viewbox_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            // 获取鼠标相对于图片的位置
            Point currentMousePosition = e.GetPosition(image);

            // 获取鼠标在X轴和Y轴上的移动距离
            double deltaX = currentMousePosition.X - lastMousePosition.X;
            double deltaY = currentMousePosition.Y - lastMousePosition.Y;

            TranserX += deltaX / 10;
            TranserY += deltaY / 10;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

3.总结

目前这个是直接做成了第三方控件的样式使用的,还有一个旋转的属性但是因为项目不需要所有就没有加进去.还有一个自适应大小的功能就是把Scale 的值改为1,TranserX 和TranserY 的值改为0就可以了.

2023/11/20