WPFでCanvas自体を移動させたい

前提・実現したいこと

WPFでGUIアプリを作っています．
Canvasをマウスホイールクリックを使って移動させたいです．
Canvasだけではなく，Canvas上にあるオブジェクトも一緒に移動させたいです．

マウスホイールでスクロール => Canvas倍率変化
マウスホイールでドラッグドロップ => Canvas移動

ぶつかっている場所

Canvasの倍率変化はできましたが，Canvasの移動で，ホイールをクリックしたときにうまく動きません．

理想としては，マウスホイールをクリックしたときのカーソルのポジションから，ドラッグした分だけCanvasが移動するということをやりたいのですが，ホイールをクリックすると，一瞬Canvasの左上の原点がカーソルの位置に合わさってまた戻るという変な挙動を示します．
この動作をなくしたいのですが，どう修正すればいいでしょうか．

ちなみにこの挙動さえ目をつぶれば，Canvas移動はできています．

該当のソースコード

View

Xaml
1        <Viewbox Grid.Row="1" Height="512" Width="512" Stretch="Uniform" ClipToBounds="True" x:Name="viewbox">
2            <Canvas Height="512" Width="512" AllowDrop="True"
3                    x:Name="canvas"
4                    MouseDown="Canvas_MouseDown"
5                    MouseUp="Canvas_MouseUp"
6                    MouseMove="Canvas_MouseMove"
7                    MouseWheel="Canvas_MouseWheel">
8
9                <Canvas.RenderTransform>
10                    <TransformGroup x:Name="CanvasTransformGroup">
11                        <ScaleTransform x:Name="CanvasScaleTransform" CenterX="256" CenterY="256"/>
12                        <TranslateTransform x:Name="CanvasTranslateTranform" X="0" Y="0"/>
13                    </TransformGroup>
14                </Canvas.RenderTransform>
15                <Image Source="/Resources/sample.jpg" Height="512" Width="512" Stretch="UniformToFill" x:Name="image"/>
16                <Path>
17                    <Path.Data>
18                        <EllipseGeometry Center="130 130"
19                                         RadiusX="20"
20                                         RadiusY="20"/>
21                    </Path.Data>
22                </Path>
23            </Canvas>
24        </Viewbox>
25

コードビハインド

C#
1        private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
2        {
3            const double scale_rate = 1.1;
4            if (e.Delta > 0)
5            {
6                CanvasScaleTransform.ScaleX *= scale_rate;
7                CanvasScaleTransform.ScaleY *= scale_rate;
8            }
9            else
10            {
11                CanvasScaleTransform.ScaleX /= scale_rate;
12                CanvasScaleTransform.ScaleY /= scale_rate;
13            }
14        }
15
16        private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
17        {
18            if (e.MiddleButton == MouseButtonState.Pressed)
19            {
20                canvas.CaptureMouse();
21                start = e.GetPosition(viewbox);
22            }
23        }
24
25        private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
26        {
27            if (e.MiddleButton == MouseButtonState.Released)
28                canvas.ReleaseMouseCapture();
29        }
30
31        private void Canvas_MouseMove(object sender, MouseEventArgs e)
32        {
33            if (canvas.IsMouseCaptured)
34            {
35                Vector v = start - e.GetPosition(viewbox);
36                CanvasTranslateTranform.X = -v.X;
37                CanvasTranslateTranform.Y = -v.Y;
38            }
39        }
40    }

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは。

ebiryoさんもおっしゃっていますが、マウスをキャプチャした直後にMouseMoveが呼ばれてしまうため、start変数に期待した値が入っていない状態でRenderTransformの値を更新してしまっているのが原因です。

また、再度ドラッグしたときに画像の位置がリセットされてしまうという問題も含まれていますので、それも併せて修正が必要です。

csharp
1        private Point start;
2        private Point startTranslate;
3
4        private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
5        {
6            const double scale_rate = 1.1;
7            if (e.Delta > 0)
8            {
9                CanvasScaleTransform.ScaleX *= scale_rate;
10                CanvasScaleTransform.ScaleY *= scale_rate;
11            }
12            else
13            {
14                CanvasScaleTransform.ScaleX /= scale_rate;
15                CanvasScaleTransform.ScaleY /= scale_rate;
16            }
17        }
18
19        private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
20        {
21            if (e.MiddleButton == MouseButtonState.Pressed)
22            {
23                start = e.GetPosition(viewbox);
24                startTranslate = new Point(CanvasTranslateTranform.X, CanvasTranslateTranform.Y);
25                canvas.CaptureMouse();
26            }
27        }
28
29        private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
30        {
31            if (e.MiddleButton == MouseButtonState.Released)
32            {
33                canvas.ReleaseMouseCapture();
34            }
35        }
36
37        private void Canvas_MouseMove(object sender, MouseEventArgs e)
38        {
39            if (canvas.IsMouseCaptured)
40            {
41                Vector v = start - e.GetPosition(viewbox);
42                CanvasTranslateTranform.X = startTranslate.X - v.X;
43                CanvasTranslateTranform.Y = startTranslate.Y - v.Y;
44            }
45        }

投稿2019/06/27 00:34

takabosoft

総合スコア8356

以下の記事のコードをそのまま利用する。
C#のWPFでドラッグできるコントロールを作る

WPF
1<Window x:Class="Sample.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:Sample"
7        mc:Ignorable="d"
8        Height="500" Width="500">
9    <Canvas Margin="10" Background="Transparent">
10        <Thumb Width="auto" Height="auto"
11               Canvas.Left="0"
12               Canvas.Top="0"
13               DragDelta="Thumb_DragDelta">
14            <Thumb.Template>
15                <ControlTemplate>
16                    <Canvas Background="Silver" Width="100" Height="100">
17                        <Path Fill="White">
18                            <Path.Data>
19                                <EllipseGeometry Center="50 50"
20                                         RadiusX="40"
21                                         RadiusY="40"/>
22                            </Path.Data>
23                        </Path>
24                    </Canvas>
25                </ControlTemplate>
26            </Thumb.Template>
27        </Thumb>
28    </Canvas>
29</Window>
30

C#
1using System;
2using System.Windows;
3using System.Windows.Controls;
4using System.Windows.Controls.Primitives;
5
6namespace Sample
7{
8    /// <summary>
9    /// MainWindow.xaml の相互作用ロジック
10    /// </summary>
11    public partial class MainWindow : Window
12    {
13        public MainWindow()
14        {
15            InitializeComponent();
16        }
17
18        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
19        {
20            var thumb = sender as Thumb;
21            if (null != thumb)
22            {
23                var x = Canvas.GetLeft(thumb) + e.HorizontalChange;
24                var y = Canvas.GetTop(thumb) + e.VerticalChange;
25
26                var canvas = thumb.Parent as Canvas;
27                if (null != canvas)
28                {
29                    x = Math.Max(x, 0);
30                    y = Math.Max(y, 0);
31                    x = Math.Min(x, canvas.ActualWidth - thumb.ActualWidth);
32                    y = Math.Min(y, canvas.ActualHeight - thumb.ActualHeight);
33                }
34
35                Canvas.SetLeft(thumb, x);
36                Canvas.SetTop(thumb, y);
37            }
38        }
39    }
40}
41

投稿2019/06/26 11:21

編集2019/06/27 10:22

退会済みユーザー

総合スコア0

CaptureMouseは　startに座標をセットしてからじゃないとダメだと思います。
座標の設定ですが　提示されたやり方ではダメだと思います。以下でどうでしょうか。

C#
1private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
2{
3    if (e.MiddleButton == MouseButtonState.Pressed)
4    {
5        //startにセットしてからCaptureMouse
6        start = e.GetPosition(viewbox);
7        canvas.CaptureMouse();
8    }
9}
10
11private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
12{
13    if (e.MiddleButton == MouseButtonState.Released)
14        canvas.ReleaseMouseCapture();
15}
16
17private void Canvas_MouseMove(object sender, MouseEventArgs e)
18{
19    if (canvas.IsMouseCaptured == false)
20        return;
21    var pos = e.GetPosition(viewbox);
22    Vector v = start - pos;
23
24    CanvasTranslateTranform.X -= v.X;
25    CanvasTranslateTranform.Y -= v.Y;
26    start = pos;
27}