[win8] パンダ福笑いを作るために ManipulationDelta を使う

acer w500 のタブレットPC に windows 8 を入れて（これには元 winodws 7 が入っています）、子供に遊ばせようッ!!! っての第１弾

パンダ福笑い無料ダウンロード版 どうぶつ雑貨「パンダスプン」♪/ウェブリブログ
http://panda-spoon.at.webry.info/200803/article_5.html

からパンダのパーツを貰ってきて、下記なのを作ります。

目と耳、口のパーツは指を使って動かせるので、うちの2歳児でもできます。製作時間は、プログラミングに1時間弱（いろいろ調べたし orz）、パーツ切り取りに数時間です。どちらかというとパーツの切り取りが面倒だった、ってぐらいで、慣れるとこの手のドラッグ操作のものは簡単にできそうですね。

■画面を XAML で作る

<Grid Background=&quot;White&quot;>
    <Canvas x:Name=&quot;canvas&quot; ManipulationDelta=&quot;el_ManipulationDelta&quot;>
        <Image Source=&quot;ms-appx:///panda/face.png&quot; Canvas.Left=&quot;310&quot; Canvas.Top=&quot;216&quot; ></Image>
        <Image 
            ManipulationMode=&quot;All&quot;
            Source=&quot;ms-appx:///panda/mouth.png&quot;
            Canvas.Left=&quot;549&quot; Canvas.Top=&quot;567&quot; 
            />
        <Image 
            ManipulationMode=&quot;All&quot;
            Source=&quot;panda/left_ear.png&quot; Canvas.Left=&quot;310&quot; Canvas.Top=&quot;239&quot; >
        </Image>
        <Image 
            ManipulationMode=&quot;All&quot;
            Source=&quot;panda/right_ear.png&quot; Canvas.Left=&quot;663&quot; Canvas.Top=&quot;172&quot; ></Image>
        <Image 
            ManipulationMode=&quot;All&quot;
            Source=&quot;panda/left_eye.png&quot; Canvas.Left=&quot;455&quot; Canvas.Top=&quot;429&quot; ></Image>
        <Image 
            ManipulationMode=&quot;All&quot;
            Source=&quot;panda/right_eye.png&quot; Canvas.Left=&quot;646&quot; Canvas.Top=&quot;366&quot; ></Image>
    </Canvas>
</Grid>

ManipulationDelta のパターン ≪ 宇宙仮面の C# 研究室
http://uchukamen.wordpress.com/2012/08/16/manipulationdelta-%E3%81%AE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/
マルチタッチができるWindows 7アプリ作成の基礎 – ＠IT
http://www.atmarkit.co.jp/fwcr/design/ux/win7_01/01.html
ManipulationDelta を知ろう – 高橋 忍のブログ – Site Home – MSDN Blogs
http://blogs.msdn.com/b/shintak/archive/2012/05/01/10299351.aspx

マウスやタッチの移動をどうやって取得するか？なのですが、MouseMove は大変（つーか、タッチの場合は Mouse イベントは発生しません）、Thumb コントロールを使ったパターンも作ったのですが、そこそこ大変。で、ManipulationDelta イベントを取得するのが簡単ってことです。

# これ、WPF、Windows Phone にもあるので見落としていた模様 orz

画面は、Grid に直接配置するパターンがあるのですが、今回は Canvas を使っています。こっちのほうは xy 座標を直接指定できるので楽かなと。あとレイアウト変更に関係ないから描画が早いかも、っていう想像です。

ManipulationDelta イベント自体は、それぞれの Image コントロールに設定してもよいのですが、いくつか調べると、

• コンテナ（Grid とか Canvas とか） ManipulationDelta イベントを設定する。
• 動かしたい Image コントロールに ManipulationMode=”All” を設定する。

ってことで動きました。この例では、顔（face.png”）は動かさないようにするので、ManipulationMode を設定しません。

■ドラッグさせるコード

移動したとき ManipulationDelta イベントで、e.Delta を使うと、前回の移動からの差分が取得できます。絶対値がほしい場合は e.Position ですが、今回は使っていません。

/// <summary>
/// 移動中のイベント
/// </summary>
/// <param name=&quot;sender&quot;></param>
/// <param name=&quot;e&quot;></param>
private void el_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var el = e.OriginalSource as UIElement;
    var img = el as Image;

    double x = Canvas.GetLeft(el) + e.Delta.Translation.X;
    double y = Canvas.GetTop(el) + e.Delta.Translation.Y;

    // 画面からはみ出ないようにする
    if (-img.ActualWidth / 2 <= x && x <= canvas.ActualWidth - img.ActualWidth / 2 &&
            -img.ActualHeight / 2 <= y && y <= canvas.ActualHeight - img.ActualHeight / 2)
    {
        Canvas.SetLeft(el, x);
        Canvas.SetTop(el, y);
    }
}

Grid を使う場合には img.Margin = new Thickness(…) とするのですが、Canvas の場合は Canvas.SetLeft と Canvas.SetTop を使います。
実際に指やマウスを使って動かすとわかるのですが、すーっと「慣性」が働いてどこかに行ってしまう（笑）ので、画面の端（実際には Canvas の端）で止まるようにしています。

■で、拡大と回転とかできないの？

早速、遊ばしてみるとうちの奥さんから「で、拡大とかはできないの？」っていう要求が…ええ、以前作っていた Thumb コントロールの場合その手のイベントを拾うのが大変そうだったのでやめていたのですが、ManipulationDelta であれば大丈夫そうですね。これは、後ほど実装をしましょう。

ってなわけで続く。