Windows Phone の操作イベントを処理する方法

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

操作イベントの処理は、タッチ入力を処理するための 1 つの方法です。これらのイベントを使用すると、タッチ入力やマルチタッチ入力に応答してオブジェクトの移動や拡大縮小を行うことができます。

タッチ入力を処理するためのその他の方法については、「クイックスタート:Windows Phone のタッチ入力」を参照してください。

このトピックは、次のセクションで構成されています。

操作イベントは、UIElement から派生したオブジェクトでサポートされています。

次の操作イベントがサポートされています。

次のジェスチャ イベントがサポートされています。

次の項目は、Windows Phone プラットフォームでサポートされません。

  • IsManipulationEnabled プロパティはサポートされません。Windows Phone では、操作イベントは既定で有効です。

  • 回転変換はサポートされません。

  • 慣性イベントはサポートされません。

この例では、Canvas に青い四角形を含む簡単なアプリを作成します。このアプリは複数の操作イベントをサブスクライブします。Rectangle を操作すると、イベント ハンドラーによって移動またはサイズの変更が行われます。四角形の移動またはサイズの変更を行うと、イベント ハンドラーによって四角形の色も変更されます。

ManipulationDelta イベントは、タッチ入力の位置が変更されたときに発生します。このイベントは、1 回の操作中に複数回発生する可能性があります。たとえば、ユーザーが画面上で指をドラッグすると、ManipulationDelta イベントは指が移動するたびに複数回発生します。また、ユーザーの指が離れた後にもこのイベントが発生する可能性があります。

操作イベントを処理することでタッチ入力を処理するには

  1. Visual C# または Visual Basic で新しい Windows Phone プロジェクトを作成します。

  2. MainPage.xaml の ContentPanel という Grid 内に次の XAML を追加します。

    <Canvas>
        <Rectangle 
            x:Name="rectangle"
            Width="200" Height="200"
            Fill="Blue" Stroke="Blue" StrokeThickness="1" />
    </Canvas>
    
  3. MainPage.xaml.cs の MainPage クラスに、次の名前空間をインポートします。

    using System.Windows.Media;
    using System.Windows.Input;
    
  4. MainPage クラスで、次の変数を宣言します。

            private TranslateTransform move = new TranslateTransform();
            private ScaleTransform resize = new ScaleTransform();
            private TransformGroup rectangleTransforms = new TransformGroup();
    
            private Brush stationaryBrush;
            private Brush transformingBrush = new SolidColorBrush(Colors.Orange);
    
    
  5. MainPage クラスに、次の ManipulationStarted イベントのイベント ハンドラーを追加します。操作を開始すると、このイベント ハンドラーによって Rectangle の色が変わります。

            void Rectangle_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
            {
                // Save the original color before changing the color.
                stationaryBrush = rectangle.Fill;
                rectangle.Fill = transformingBrush;
            }
    
    
    
  6. MainPage クラスに、次の ManipulationDelta イベントのイベント ハンドラーを追加します。このイベント ハンドラーでは、RectangleRenderTransformDeltaManipulation を適用して、操作に応じて移動とサイズの変更を行います。

            void Rectangle_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
            {
                // Move the rectangle.
                move.X += e.DeltaManipulation.Translation.X;
                move.Y += e.DeltaManipulation.Translation.Y;
    
                // Resize the rectangle.
                if (e.DeltaManipulation.Scale.X > 0 && e.DeltaManipulation.Scale.Y > 0)
                {
                    // Scale the rectangle.
                    resize.ScaleX *= e.DeltaManipulation.Scale.X;
                    resize.ScaleY *= e.DeltaManipulation.Scale.Y;
                }
            }
    
    
  7. MainPage クラスに、次の ManipulationCompleted イベントのイベント ハンドラーを追加します。操作を終了すると、このイベント ハンドラーによって Rectangle の元の色が復元されます。

            void Rectangle_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
            {
                // Restore the original color.
                rectangle.Fill = stationaryBrush;
            }
    
    
    
  8. MainPage クラス コンストラクターで、2 つの変換を TransformGroup に組み合わせて、イベント ハンドラーを登録します。

            // Constructor
            public MainPage()
            {
                InitializeComponent();
    
                // Combine the moving and resizing tranforms into one TransformGroup.
                // The rectangle's RenderTransform can only contain a single transform or TransformGroup.
                rectangleTransforms.Children.Add(move);
                rectangleTransforms.Children.Add(resize);
                rectangle.RenderTransform = rectangleTransforms;
    
                // Handle manipulation events.
                rectangle.ManipulationStarted +=
                    new EventHandler<ManipulationStartedEventArgs>(Rectangle_ManipulationStarted);
                rectangle.ManipulationDelta +=
                    new EventHandler<ManipulationDeltaEventArgs>(Rectangle_ManipulationDelta);
                rectangle.ManipulationCompleted +=
                    new EventHandler<ManipulationCompletedEventArgs>(Rectangle_ManipulationCompleted);
            }
    
    
  9. プロジェクトをビルドして実行します。アプリ ウィンドウ内に青い正方形が表示されます。

  10. 次の操作でアプリをテストしてください。一度に複数の操作を試すことができます。

    • Rectangle を移動するには、Rectangle の上に 1 本の指を置き、画面上でその指を動かします。

    • Rectangle のサイズを変更するには、Rectangle の上に 2 本の指を置き、指どうしの距離を互いに近づけるか離します。

      メモメモ:

      Windows Phone エミュレーターは、マウスによるマルチタッチ入力をサポートしていません。スケール変換を使用して四角形のサイズを変更するには、実際のデバイスでアプリをテストするか、マルチタッチ入力をサポートする開発用コンピューターを用意する必要があります。

Windows Phone 8 では、UI の応答性を高めるために、PanoramaPivot、および LongListSelector コントロールの ManipulationCompleted イベントは処理済みとマークされます。

Windows Phone 8 で次のコードを使用して、指定したコントロールのいずれかについて ManipulationCompleted イベントを処理しようとしても、コードは実行されません。Windows Phone OS 7.1 では、このコードは実行します。

myPivot.ManipulationCompleted += (s, e) =>
{
    ...
}

Windows Phone 8 と Windows Phone OS 7.1 で ManipulationCompleted イベントを処理するには、AddHandler メソッドを使用します。次に例を示します。

this.myPivot.AddHandler(Pivot.ManipulationCompletedEvent,
    new EventHandler<ManipulationCompletedEventArgs>
    (MyPivot_ManipulationCompleted), true);

表示:
© 2014 Microsoft