高橋 忍のブログ

UX & モバイル、全ては心でエバンジェリズム♪

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

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

  • Comments 1

#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);
}

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

image

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

Comments
  • すばらしいです~

    コントロールの表示位置の変更の仕方がわかりました~

Page 1 of 1 (1 items)
Leave a Comment
  • Please add 6 and 4 and type the answer here:
  • Post