WPFでコントロールをドラッグ(1)

Thumbコントロールでドラッグ
http://www.moonmile.net/blog/archives/698

で、スクロールバーで使われる Thumb コントロールを使ってドラッグを試してみましたが、このままでは単純な四角（決められたスタイル）しかドラッグできません。
Thum コントロールを少し工夫して、色々な形のコントロールも移動ができるようにする、ことは可能だとは思うのですが、いささか面倒です。つーか、もともとやりたいことは、普通のコントロールのドラッグ、あとはコントロールを配置してマウスで移動、なんてのを想定しているので、Thumb コントロールでは都合が悪いのです。コードの見通は悪くないんだけどね、XAMLが奇妙な感じになりそう。

そんな訳で、普通のコントロール（Ellipseコントロール）を移動させてみます。

■Window1.xaml

<Window x:Class="SampleDrag.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="400">
    <Canvas Name="board">
        <TextBlock Canvas.Left="0" Canvas.Top="0" Height="21" Name="textPos" Width="119" Text="x:0 y:0" />
        <Ellipse Name="mark0" Canvas.Left="28" Canvas.Top="43"
                 Height="30" Stroke="Black" Width="30" Fill="Pink"
                 MouseLeftButtonDown="mark0_MouseLeftButtonDown"
                 MouseLeftButtonUp="mark0_MouseLeftButtonUp"
                 MouseMove="mark0_MouseMove"
                 />
    </Canvas>
</Window>

■Windows1.xaml.cs

/// <summary>
/// Window1.xaml の相互作用ロジック
/// </summary>
public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }

    private void printPos( UIElement el)
    {
        int x = (int)Canvas.GetLeft( el );
        int y = (int)Canvas.GetTop( el );
        textPos.Text = string.Format("x:{0} y:{1}", x, y);
    }

    private bool _isDrag = false;
    private Point _dragOffset;

    /// <summary>
    /// ドラッグ開始
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void mark0_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        UIElement el = sender as UIElement;
        if (el != null)
        {
            _isDrag = true;
            _dragOffset = e.GetPosition(el);
            el.CaptureMouse();
        }
    }

    /// <summary>
    /// ドラッグ終了
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void mark0_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (_isDrag == true)
        {
            UIElement el = sender as UIElement;
            el.ReleaseMouseCapture();
            _isDrag = false;
        }
    }

    /// <summary>
    /// ドラック中
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void mark0_MouseMove(object sender, MouseEventArgs e)
    {
        if (_isDrag == true)
        {
            Point pt = Mouse.GetPosition(board);
            UIElement el = sender as UIElement;
            Canvas.SetLeft(el, pt.X - _dragOffset.X);
            Canvas.SetTop(el, pt.Y - _dragOffset.Y);
            printPos(el);
        }
    }
}

ざっと説明すると、

1.移動したい XAML のコントロールに3つのイベントを付けます。

 MouseLeftButtonDown="mark0_MouseLeftButtonDown"
 MouseLeftButtonUp="mark0_MouseLeftButtonUp"
 MouseMove="mark0_MouseMove"

マウスの左ボタンを押した時と離した時、そして移動しているときです。

このそれぞれのイベントに、ドラッグの処理を入れていきます。

private void mark0_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    UIElement el = sender as UIElement;
    if (el != null)
    {
        _isDrag = true;
        _dragOffset = e.GetPosition(el);
        el.CaptureMouse();
    }
}

左ボタンを押した時にドラッグを開始させます。
このとき、ドラッグ中のフラグ（_isDrag)を設定することと、マウスの相対位置（ドラッグするコントロールの左上からの相対位置）を e.GetPosition で取得して _dragOffset に保存しておきます。
これらはドラッグ中の時の、コントロールの移動に使います。

el.CaptureMouse() は、マウスコントロールをキャプチャするためのメソッドです。これがないと、マウスを素早く動かしたときに追随できません。

private void mark0_MouseMove(object sender, MouseEventArgs e)
{
    if (_isDrag == true)
    {
        Point pt = Mouse.GetPosition(board);
        UIElement el = sender as UIElement;
        Canvas.SetLeft(el, pt.X - _dragOffset.X);
        Canvas.SetTop(el, pt.Y - _dragOffset.Y);
        printPos(el);
    }
}

マウスを動かしているときのイベントでは、ドラック中かどうかを調べます。これは、コントロール上でマウスを動かしたときでも、このイベントが発生するためです。

移動するコントロールの位置は、Mouse.GetPosition でボタンの位置を取得して、先ほど保存しておいた _dragOffset だけシフトさせます。board は、ドラッグするコントロールが乗っている canvas コントロールの名前です。

canvas に対する位置の設定は、Canvas.SetLeft と Canvas.SetTop を使います。
このあたり、本来は拡大率を計算する必要があるのですが、通常ドラッグは等倍で行われるので、簡単のためそのまま計算します。

private void mark0_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (_isDrag == true)
    {
        UIElement el = sender as UIElement;
        el.ReleaseMouseCapture();
        _isDrag = false;
    }
}

そして、マウスを離したときは、ドラッグ中のフラグ _isDrag を false にして、マウスのキャプチャを ReleaseMouseCapture メソッドで解放します。

これを実行すると

＜001＞

から

＜002＞

のようにマウスでドラッグできます。

Silverlight版は
http://moonmile.net/sl/SampleDrag/ 
で実行できます。
さて、コントロールを移動することができました。
しかし、このままでは xaml にいちいちイベントを追加しないと駄目ですよね。複数のコントロールを動かしたい場合は、大変なことになりそうだし、新しいコントロールを動的に追加したときなんか、どうやるんだろう？　ってこといなりそうですね。

というわけで、今回はイベントを xaml にイベントを直に書きましたが、次回はこれを動的に追加できるようにします。