#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行)