Infragistics 製品とは？

Windows フォームにおけるタッチ対応

Surface をはじめ Windows タブレット デバイスの普及が進み、また、一般的なノート PC においてもタッチ対応モニターが標準的に搭載されている時代になり、Windows デスクトップ アプリケーションにおいてもタッチ対応が迫られるケースが非常に多くなってきました。その一方で、デスクトップ アプリの開発において今なお使われ続けている Windows フォームをベースとした開発では、タッチ操作に対応したアプリケーションを開発する、もしくは既存のアプリケーションをタッチに対応したものにするといったことが、非常に難しいのが実情です。

Ultimate UI for Windows Forms が提供するタッチ対応 UI

WPF など後発の開発プラットフォームでは、タッチ対応のアプリケーションを作りやすい仕組みが提供されており、例えばユーザーがタッチ操作を行った場合のハンドリングをイベント ハンドリングで処理できます。しかし Windows フォームではそのような仕組みは用意されていないためウィンドウ メッセージを直接処理しなければならず、実装がとても複雑になってしまいます。

Ultimate UI for Windows Forms で提供されている UI コントロールは、ホールドや回転、パン、慣性スクロールなどタッチ特有の操作など、さまざまなタッチ操作のハンドリングをイベント ベースで簡単に行えます。これらを利用することで、タッチ操作に特化したユーザー インターフェイスを開発することが可能になります。

グリッド コントロールを使った具体例

ここでは Ultimate UI for Windows Forms で提供されているグリッド コントロールのカスタマイズ方法を、実際のコードとともに紹介します。ここでの例ではジェスチャ イベントをハンドリングして、グリッド コントロールをカスタマイズしています。

UltraWinGrid の慣性スクロールを無効に設定する

慣性スクロールは、上下のフリック モーション後に指を離した後もある程度スクロールが維持される機能ですが、この動作をした時、Grid 内部では PanGesture イベントが呼ばれ続けます。このイベント内で IsInertial プロパティでトリガーが慣性によるものかどうかを判断し、慣性によるイベント コールであれば Handled を True に設定します。

          private void ultraGrid1_PanGesture(object sender, Infragistics.Win.Touch.PanGestureEventArgs e)
          {
              Debug.WriteLine("ultraGrid1_PanGesture: " + e.Gesture.ToString());
              //慣性ジェスチャをキャンセルする
              if (e.IsInertial == true)
              {
                e.Handled = true;
              }
          }
        

長押しタッチ (PressAndHold) されたセルに対して処理する

まずはコードをご覧ください。以下のコードでは、長押しタッチされたセルの文字色を赤色へ変更しています。

          private Point p = new Point(0, 0);      //GestureCompleted 時のタッチ位置保持用
          private Boolean isPressAndHold = false; //PressAndHold の場合のみ True に設定

          //GestureCompleted イベント
          private void ultraGrid1_GestureCompleted(object sender, Infragistics.Win.Touch.GestureCompletedEventArgs e)
          {
              //ジェスチャの種類を判定
              if (e.Gesture.Equals(Gesture.PressAndHold))
              {
                  //タッチ フラグを On に設定
                  isPressAndHold = true;
                  //タッチ位置を保持する
                  p = e.Location;
              }
          }

          //Click イベント
          private void ultraGrid1_Click(object sender, EventArgs e)
          {
              //PressAndHold 時のクリックかどうかを判定
              if (isPressAndHold)
              {
                  //タッチ座標からエレメントを取得
                  UIElement element = ultraGrid1.DisplayLayout.UIElement.ElementFromPoint(p);
                  UltraGridCell cell = element.GetContext(typeof(UltraGridCell)) as UltraGridCell;
                  //取得したエレメントがセルかどうかの判定
                  if (cell != null)
                  {
                      //長押しされた Element が Cell だった場合、文字色を赤へ変更
                      cell.Appearance.ForeColor = Color.Red;
                  }
              }
              //フラグの初期化
              isPressAndHold = false;
          }
        

長押しタッチを行い、指を離した瞬間に GestureCompleted イベントが走ります。すべてのジェスチャ イベントの最後にこの GestureCompleted イベントが走るため、イベント内ではまずジェスチャの判定をしています。このコードではジェスチャが PressAndHold だった場合は、長押しタッチを判定するためのフラグ (isPressAndHold) を True に設定し、更に長押しされた Position を保持します (今回は指を離したタイミングで処理をさせるために Complete イベントを使用していますが、長押し判定の規定時間に達した時点で処理を行う場合には、上記コードではこのイベントで PressAndHoldGesture イベントを利用します)。

また、通常のタッチや長押しタッチを行った場合、GestureCompleted イベントの後に Click イベントが呼び出されます。このコードでは、Click イベント内で PressAndHold によりクリック イベントが呼び出されたかどうかを判断した後で、保存した Position から ElementFromPoint メソッドにより、グリッドの長押しタッチされたエレメントを取得しています。取得したエレメントが UltraGridCell であった場合、今回は取得したセルに対して文字色を赤にするという処理を行なっています。

タッチ対応におけるデザイン

デスクトップ アプリケーションのタッチ対応において、タッチ操作のハンドリングと並んで重要なのがタッチに適したデザインです。デスクトップ アプリとして作られた UI は、タッチで操作するには細かすぎるものとなっており、これらをタッチに適した大きさにする必要があります。

Ultimate UI for Windows Forms では、デスクトップ向けの UI をタッチしやすい大きさに変換する UltraTouchProvider というコントロールを提供しています。このコントロールをフォームに配置すると、フォーム内の各エレメントが自動的にタッチに適した大きさに変化し、またプログラムからこの On/Off を切り替えられるようになります。フォーム自体をユーザーのピンチ操作でズームイン/アウトするといったソリューションではないため、ユーザーは特にそれらの操作をすることなくタッチ デバイスから利用する場合にはタッチに適した UI を最初から使うことができます。
※UltraTouchProvider を使ったタッチ対応については Ultimate UI for Windows Forms に含まれているコントロールが対象となります。

ここで、以下のスクリーンショットをご覧ください。

左がタッチ対応前のデザインで、右がタッチ対応後のデザインです。

グリッドのフィルター、ソートのアイコンおよび各ドロップダウンのつまみなど、タッチを行うエレメントのサイズが自動で調整されていることが分かります。また、この例では検索条件の項目が大きくなったと同時に、検索条件の枠自体の高さも大きくなっていますが、これは UltraFlowLayoutManager というフロー レイアウトを実現するコントロールを利用しているためです。この UltraFlowLayoutManager を使用してエディター項目を配置しているパネルをフロー レイアウトにし、更に AutoSize で項目の高さに合わせて伸縮するように設定することで、タッチ対応により各コントロールのサイズが変わっても項目間のマージンを確保しつつデザインを保つことができるようになります。

まとめ

ご覧いただいたように、Ultimate UI for Windows Forms を利用することで、Windows フォームにおいても柔軟にタッチのハンドリングや UI のタッチ最適化を図ることができます。これからますます対応が必要となるデスクトップ アプリケーションのタッチ サポートに対して、Ultimate UI for Windows Forms を活用してみてはいかがでしょうか？

Ultimate UI for Windows Forms 製品概要
Ultimate UI for Windows Forms

【関連リンク】

Ultimate UI for Windows Forms タッチジェスチャの概要
http://help.jp.infragistics.com/Doc/Winforms/2016.1/CLR4.0/?page=Touch_Gestures_Overview.html

Ultimate UI for Windows Forms タッチ ジェスチャのイベント
http://help.jp.infragistics.com/Doc/Winforms/2016.1/CLR4.0/?page=Touch_Gestures_Events.html

次回は、Windows Forms で引き合いの多い Gantt (ガント) チャート コントロールの基本的な使い方や、カスタマイズ方法について紹介いたします。

[更新日：2016-05-18]
誠に申し訳ございませんが、次回 (第 4 回) は、PivotGrid に関する紹介記事を掲載させていただき、第 5 回に Gantt (ガント) チャート コントロールの記事を紹介いたします。

© Copyright 2016 INFRAGISTICS. All Rights Reserved