画面上のオブジェクトをタッチで移動させる方法

#wp7dev_jp

イベントやら何やらで久しぶりのBlogですが、小技を。

画面上にオブジェクトを置いてそれを移動させる方法です。まずは適当にオブジェクトを置いておきます。それぞれのポイントは HorizontalAlignment と VerticalAlignmentを Left, Topに合わせておくとこ。

 <Grid x:Name="LayoutRoot" Background="#000027FF">

    <Ellipse Height="100" Width="100" Fill="Red"

                MouseMove="obj_MouseMove"

                HorizontalAlignment="Left" VerticalAlignment="Top" />

    <Rectangle Height="100" Width="100" Fill="Green"

                MouseMove="obj_MouseMove"

                HorizontalAlignment="Left" VerticalAlignment="Top" />

    <Image Height="100" Width="100"

            MouseMove="obj_MouseMove"

            HorizontalAlignment="Left" VerticalAlignment="Top"

            Source="/PhoneApp3;component/picture.png" />

</Grid>

そして、イベント処理。タップ位置を取得して、その位置にオブジェクトの中心を合わせてます。FrameworkElement として扱っているので、Ellipse であろうが、Image コントロールであろうが、この関数1つでOK。

 private void obj_MouseMove(object sender, MouseEventArgs e)

    FrameworkElement obj = sender as FrameworkElement;

    Point pos = e.GetPosition(this);

    obj.Margin = new Thickness(

        pos.X - obj.Width / 2,

        pos.Y - obj.Height / 2,

        0, 0);

結果はこんな感じ。今のままだと、オブジェクトが重なった場合は手前のものしか動かせないです。まぁ、実世界もそんなもん。

こうやって、オブジェクトを配置して、スクリーンキャプチャーを実装しちゃえば、なんかアプリになりそうです。

Additional resources