WPF-マルチタッチ

Windows 7以降のバージョンには、複数のタッチセンシティブデバイスから入力を受信する機能があります。 WPFアプリケーションは、タッチが発生したときにイベントを発生させることにより、タッチ入力をマウスやキーボードなどの他の入力として処理することもできます。

WPFは、タッチが発生すると、*タッチイベント*と*操作イベント*の2種類のイベントを公開します。タッチイベントは、タッチスクリーン上の各指とその動きに関する生データを提供します。操作イベントは、入力を特定のアクションとして解釈します。このセクションでは、両方のタイプのイベントについて説明します。

タッチに応答できるアプリケーションを開発するには、次のコンポーネントが必要です。

Microsoft Visual Studio 2010以降のバージョン。
Windows 7以降のバージョン。
Windows Touchをサポートするタッチスクリーンなどのデバイス。

以下の用語は、タッチ入力について説明するときに一般的に使用されます-

タッチ-Windows 7以降で認識できるユーザー入力のタイプ。タッチ入力は、タッチセンサー式画面から開始されます。
マルチタッチ-複数のポイントから同時に発生する入力のタイプ。 WPFでは、タッチについて説明する場合、通常はマルチタッチを意味します。
操作-タッチがオブジェクトに適用される物理的アクションとして推測されると発生します。 WPFでは、操作イベントは、入力を変換、展開、または回転操作として解釈します。
タッチデバイス-タッチスクリーン上の1本の指など、タッチ入力を生成するデバイスを表します。

例

これらすべての概念を理解するために、WPFTouchInputという名前の新しいWPFプロジェクトを作成しましょう。

ツールボックスからデザインウィンドウに四角形をドラッグし、四角形を画像または任意の色で塗りつぶします。画像を使用する場合は、ソリューションに画像を含めることを忘れないでください。そうしないと、プログラムは実行されません。 *次のXAMLコードは、さまざまなプロパティとイベントで四角形を初期化します。

<Window x:Class = "WPFMultiTouchInput.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:WPFMultiTouchInput"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Window.Resources>
      <MatrixTransform x:Key = "InitialMatrixTransform">
         <MatrixTransform.Matrix>
            <Matrix OffsetX = "200" OffsetY = "200"/>
         </MatrixTransform.Matrix>
      </MatrixTransform>
   </Window.Resources>

   <Canvas>
      <Rectangle Name = "manRect" Width = "321" Height = "241"
         RenderTransform = "{StaticResource InitialMatrixTransform}"
         IsManipulationEnabled = "true" Canvas.Left = "-70" Canvas.Top = "-170">
         <Rectangle.Fill>
            <ImageBrush ImageSource = "Images/DSC_0076.JPG"/>
         </Rectangle.Fill>
      </Rectangle>
   </Canvas>

</Window>

ここに異なる操作イベントの実装があります-

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WPFMultiTouchInput {

   public partial class MainWindow : Window {

      public MainWindow() {
         InitializeComponent();
      }

      void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e) {
         e.ManipulationContainer = this;
         e.Handled = true;
      }

      void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) {
         Rectangle rectToMove = e.OriginalSource as Rectangle;
         Matrix rectsMatrix = ((MatrixTransform)rectToMove.RenderTransform).Matrix;

         rectsMatrix.RotateAt(e.DeltaManipulation.Rotation, e.ManipulationOrigin.X, e.ManipulationOrigin.Y);

         rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.X,
            e.ManipulationOrigin.X, e.ManipulationOrigin.Y);

         rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
            e.DeltaManipulation.Translation.Y);

         rectToMove.RenderTransform = new MatrixTransform(rectsMatrix);
         Rect containingRect = new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize);

         Rect shapeBounds = rectToMove.RenderTransform.TransformBounds(new Rect(rectToMove.RenderSize));

         if (e.IsInertial && !containingRect.Contains(shapeBounds)) {
            e.Complete();
         }

         e.Handled = true;
      }

      void Window_InertiaStarting(object sender, ManipulationInertiaStartingEventArgs e) {
         e.TranslationBehavior.DesiredDeceleration = 10.0* 96.0/(1000.0 *1000.0);
         e.ExpansionBehavior.DesiredDeceleration = 0.1* 96/(1000.0 *1000.0);
         e.RotationBehavior.DesiredDeceleration = 720/(1000.0* 1000.0);
         e.Handled = true;
      }

   }
}

上記のコードをコンパイルして実行すると、次のwidnowが生成されます。

マルチタッチの出力

これで、タッチスクリーン上で指でこの画像を回転、ズームイン、ズームアウトできます。

Wpf-multi-touch

WPF-マルチタッチ

例