ManipulationDelta を知ろう

#wp7dev_jp

タッチ操作なら、mouseMoveよりも、ManipulationDeltaのほうがおすすめ。さっそく見てみましょう。また、Rectangle をタッチで動かします。

 <Grid x:Name="LayoutRoot" Background="Transparent">
    <Rectangle Name="Item"  Fill="Red"
                Height="100" Width="100" 
                HorizontalAlignment="Left" VerticalAlignment="Top" 
                ManipulationDelta="Item_ManipulationDelta" />
</Grid>

そしてコーディング。結局1行で終わっちゃいました。

 private void Item_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    Item.Margin = new Thickness(
        Item.Margin.Left + e.DeltaManipulation.Translation.X,
        Item.Margin.Top + e.DeltaManipulation.Translation.Y, 
        0, 0);
}

DeltaManipulation には、タッチの移動分(Translation)やピンチ操作での操作量(Scale)などが取れます。前回移動した分からの今回までの差分をもらえるので、それを現在のMarginに足すだけです。ですから、タッチしたところが Rectangle の中心になってしまうこともありません。

a

そして、エミュレーターや実機で試すとわかりますが、指が先行しても外れないですし、エミュレーターでの反応もいいです。アプリとしては Mouse Move よりもお勧めです。

では、次はこれを使ったアプリサンプルをご紹介します。