Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/12/02 14:00

目次

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

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

GcZoom

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

GcZoomによる拡大前
GcZoomによる拡大前

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

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

GcZoomによる拡大後
GcZoomによる拡大後

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内に拡大したいコントロールを配置します。

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

バックナンバー

連載:顧客と開発者の生産性を格段に向上させる、業務システムの画面UI
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5