タッチで領域指定した時のエリア選択枠を描く（XAML 1行、C#6行）

#wp7dev_jp #wpdev_jp

画像などの特定エリアを矩形で指定する場合、ある1点からドラッグして矩形のエリアを作成します。

UIで見るとこんな感じ。よく見る感じですよね。

さて、これをどう実装しましょうか？ Windows Phone なら簡単です。この矩形最初から書いちゃえばいいんです。

XAML

矩形はもう、Visual Studio や Blend を使ってXAML側で定義してしまいます。

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"

        ManipulationStarted="ContentPanel_ManipulationStarted"

        ManipulationDelta="ContentPanel_ManipulationDelta"

        Background="Transparent">

    <Image Stretch="Uniform" Source="/PhoneApp29;component/cat.jpg" />

    <Rectangle Name="rectangle1"

        HorizontalAlignment="Left" VerticalAlignment="Top"

        StrokeDashArray="2,2" Stroke="Yellow" StrokeThickness="3"

        Visibility="Collapsed" />

</Grid>

イベントは親のGrid である ContentPanel で拾います。ManipulationStarted と ManipulationDelta のイベントをハンドリングします。

この際に大事なのは、ContentPanel のBackgroundです。実は、Background が null だとタッチのイベントが拾えません。そのため、ここではTransparent を設定しています。

さて、コード側です。実質は6行だけの追加です。

まず、ManipulationStarted でタッチを開始した時の処理を記述します。

 private void ContentPanel_ManipulationStarted(

    object sender, ManipulationStartedEventArgs e)

    rectangle1.Margin = new Thickness(

      e.ManipulationOrigin.X, e.ManipulationOrigin.Y, 0, 0);

    rectangle1.Width = 0;

    rectangle1.Height = 0;

    rectangle1.Visibility = System.Windows.Visibility.Visible;

続けて、ドラッグした際の処理です。Rectangle の大きさ（Width, Height）を設定します。

 private void ContentPanel_ManipulationDelta(

    object sender, ManipulationDeltaEventArgs e)

    rectangle1.Width = e.CumulativeManipulation.Translation.X;

    rectangle1.Height = e.CumulativeManipulation.Translation.Y;

実行

実行すれば、こんな感じで矩形選択ができます。応用すれば、円形選択もできますね。

マウスとエミュレーターでやるとちょっと動かしても初めは、少しイベントが発生しません。これはタッチ用の調整がManipulationDelta のイベント処理に加わっているためです。ただその分、タッチ操作の場合は、うまく矩形が見えるのでちょうどいいはずです。

関連情報

Zusätzliche Ressourcen