MultiTouchで既存アプリケーションをタッチ対応にしてみよう

顧客と開発者の生産性を格段に向上させる、業務システムの画面UI 第4回

タッチ操作によるズームを可能にする

　ディスプレイの解像度は高解像度化が進んだため、PCの解像度の差異は大きくなってきました。前回の「高解像度ディスプレイにも対応！ 画面レイアウト自在のPlusPakでひとつ上のフォームを作ろう」でもウィンドウサイズに合わせてコントロールを大きくするGcResizeコントロールを紹介しましたが、今回は、ユーザーがタッチ操作で文字やコントロールを拡大縮小するための方法を紹介します。

GcZoom

　GcZoomはタッチ操作によるアプリケーションの拡大、縮小機能を提供します。

GcZoomによる拡大前

　アプリケーションの画面を2本指でタッチして広げる動作（ピンチアウト）することでアプリケーション全体を拡大できます。

　後述しますが、マウス操作で拡大・縮小を行うこともできます。

GcZoomによる拡大後

GcZoomの追加方法

　GcZoomを使用する方法は簡単です。

　上記「コントロールの追加」項目に従いGcZoomをツールボックスに追加します。

　フォーム上にGcZoomをドロップすることで、配置された全てのコントロールが自動でリサイズされるようになります。

GcZoomの追加

拡大倍率を設定する

　GcZoomコントロールは標準で4倍まで拡大可能ですが、アプリケーションによってはそこまでの拡大が必要ない場合もあります。

　そのような場合、MaxZoomFactorの値をプロパティウィンドウから変更することができます。

拡大倍率の変更

　このように利用頻度の高い設定は、プロパティウィンドウからGUI操作で変更することが可能です。

マウスによる拡大縮小に対応する

　GcZoomコントロールの拡大縮小はマウス操作に対応することも可能です。

　マウスによる拡大縮小に対応したい場合は、プロパティウィンドウからAllowMouseWheelZoomをTrueに設定します。

マウスによる拡大縮小に対応する

　マウスによる拡大はCtrlキーを押しながら、マウスをホイール操作します。

スムーズな拡大

　GcZoomを用いた拡大はスムーズに動作しますが、ズーム中、コントロールがぼやけた表示になることに気づかれたかと思います。

　これは、拡大（または縮小）中は表示をビットマップ画像に切り替えて拡大縮小の処理の負荷を軽減しているからです。この動作はZoomPreviewModeプロパティで設定可能です。ZoomPreviewModeプロパティをAlternativeContentに設定すると、ズーム時の表示を、画像ではなく拡大率をパーセント表示し、より負荷を軽減することができます。

拡大負荷の軽減

GcZoomPanel

　GcZoomコントロールはアプリケーションの画面全体を拡大縮小しましたが、GcZoomPanelを利用することで、GcZoomPanel内に配置したコントロールのみを拡大縮小させることが可能になります。

GcZoomPanelで部分拡大

GcZoomPanelの追加方法

　GcZoomPanelを使用するには、上記「コントロールの追加」項目に従いGcZoomPanelをツールボックスに追加します。

　デザインビューの拡大縮小を行いたいエリアにGcZoomPanelを配置し、GcZoomPanel内に拡大したいコントロールを配置します。

GcZoomPanel内に拡大しいたコントロールを配置する