Freigeben über

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

#wp7dev_jp #wpdev_jp

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

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

image

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

XAML

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

  1. Rectangle を描く
  2. 線の色、太さ、破線 (StrokeDashArray) を設定する
  3. Visibility を Collapsed にして隠す
 <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 を設定しています。

 

C#

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

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

  • タッチした位置に合わせてRectangle を移動（Margin）
  • Rectangle の大きさを初期化（0に）
  • Rectangle を表示
 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;

}

 

実行

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

image

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

関連情報

  1. タッチで領域指定した時のエリア選択枠を描く （XAML 1行、C#6行）
  2. タッチで領域指定した時のエリア選択枠を動かす (C#+3行）
  3. タッチで領域指定したエリア選択枠で写真を切り出す（XAML2行+C#6行）