[Windowsストアアプリ開発]タッチパネルで使えるジェスチャー

特集

T君

2012.11.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

目次に移動

Windowsストアアプリで使えるジェスチャーにはどんなものがあるのか調べました。
以下の6つのジェスチャを使ったサンプルを作ってみたいと思います。

  • タップ：画面をタッチして離します。
  • ダブルタップ：画面をすばやく2回タップします。
  • 長押し：画面をタッチし続けます。
  • ドラッグ：画面をタッチしたままスライドさせます。
  • ピンチ(ストレッチ)：2本の指で画面をタッチし、それらの指を近づけます(離します)。
  • 回転：2本の指で画面をタッチし、時計回りまたは反時計回りに回転させます。

タップ、ダブルタップ、長押し

まずはタップ、ダブルタップ、長押しの3種類を試します。この3つは専用のイベントがあるので簡単です。
新しいプロジェクトを作成します。Visula C#で「新しいアプリケーション」を選択しました。
MainPage.xamlを開いてButtonとTextBlockを以下のように配置します。


追加したTextBlockを選択してプロパティウインドウを開きます。
名前を入力して、テキストのサイズを20pxにしました。名前はMyTextです。

次に追加したButtonを選択してプロパティウインドウを開きます。
以下のアイコンをクリックします。この画面でイベントハンドラを定義します。
Tapped、DoubleTapped、Holding、Clickという種類のイベントがあると思います。Holdingは長押しした際に発生するイベントです。
テキストボックス上でダブルクリックするとイベントハンドラが追加されます。

あと、RightTappedって何？と思う人がいるかもしれないので一応説明しておくとマウスモードで右クリックした際のイベントです。
タッチパネルの場合では長押しして離したときにイベントが発生します。


タップ、ダブルタップ、長押し、クリックにイベントハンドラを追加します。
何のイベントが呼び出されたのかをTextBlockに表示しているだけです。

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            MyText.Text += "Click \n";
        }

        private void Button_Tapped_1(object sender, TappedRoutedEventArgs e)
        {
            MyText.Text += "Tapped \n";
        }

        private void Button_DoubleTapped_1(object sender, DoubleTappedRoutedEventArgs e)
        {
            MyText.Text += "DoubleTapped \n";
        }

        private void Button_Holding_1(object sender, HoldingRoutedEventArgs e)
        {
            // タッチのみ
            MyText.Text += "Holding \n";
        }

それではシミュレーターで実行してみましょう。
ボタンをタップしたりするとTextBlockに文字列が表示されると思います。

シミュレーターで動作確認しましたが、いくつか気づいたことがありました。
Holdingイベントはマウスモードの場合はイベントが発生しませんでした。ClickイベントとTapイベントはマウスモードでも基本タッチモードでも使えました。これはどちらかでいいと思います。ちなみに順番はClickの方が先にイベントが発生しているようです。Clickイベントはダブルタップした時やホールドした時にも発生してしまうので、これらを使うときはTapイベントがよさそうです。Holdingイベントは長押し中と指を離したとき2回イベントが発生していました。

これらのイベントを発生させたくない場合は以下のプロパティをfalseにします。
IsTapEnabled、IsRightTapEnabled、IsDoubleTapEnabled、IsHoldingEnabled

ドラッグ、ピンチ(ストレッチ)、回転

新しいプロジェクトを作成します。Visula C#で「新しいアプリケーション」を選択しました。
MainPage.xamlを開いてButtonを以下のように配置します。配置後にButtonに名前をつけます。ここではMyButtonにしました。


先ほどと同じようにボタンにイベントハンドラを追加します。プロパティウインドウからManipulationDeltaというイベントです。

イベントハンドラに処理を追加します。コンストラクタに変数の初期化処理を追加しています。

public sealed partial class MainPage : Page
{
    private TransformGroup MyTransformGroup;
    private MatrixTransform MyMatrixTransform;
    private CompositeTransform MyCompositeTransform;

    public MainPage()
    {
        this.InitializeComponent();

        MyButton.ManipulationMode = ManipulationModes.All;
        MyMatrixTransform = new MatrixTransform { Matrix = Matrix.Identity };
        MyCompositeTransform = new CompositeTransform();

        MyTransformGroup = new TransformGroup();
        MyTransformGroup.Children.Add(MyMatrixTransform);
        MyTransformGroup.Children.Add(MyCompositeTransform);

        MyButton.RenderTransform = MyTransformGroup;
    }

    private void MyButton_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        MyMatrixTransform.Matrix = MyTransformGroup.Value;
        
        // ドラッグ(移動)
        MyCompositeTransform.TranslateX = e.Delta.Translation.X;
        MyCompositeTransform.TranslateY = e.Delta.Translation.Y;
        
        // ピンチ・ストレッチ(拡大・縮小)
        MyCompositeTransform.ScaleX = e.Delta.Scale;
        MyCompositeTransform.ScaleY = e.Delta.Scale;

        //回転
        MyCompositeTransform.Rotation = e.Delta.Rotation;
    }
}

11行目でMyButton.ManipulationModeにManipulationModes.Allを追加していますが、
どのイベントを受け取るかを設定できます。

移動：ManipulationModes.TranslateX | ManipulationModes.TranslateY
拡大縮小：ManipulationModes.Scale
回転：ManipulationModes.Rotate
を指定します。移動は縦と横で区別されているのでどちらか一方でもOKです。

それでは実行しましょう。ドラッグに関してはマウスモード、基本タッチモードのどちらでも行えます。

拡大縮小は「拡大・縮小タッチモード」、回転は「回転タッチモード」に切り替えてから行ってください。
2本指の操作はマウスホイールを使ってシミュレートできます。

目次に移動

customer-story-analytics