高解像度ディスプレイにも対応！ 画面レイアウト自在のPlusPakでひとつ上のフォームを作ろう

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

画面解像度の異なる端末での運用をサポートする（2）

　続いて、タブやアコーディオンを用いて、1つの画面に表示する情報を切り替える方法を紹介します。

GcTabControl

　Windowsフォームには標準でTabControlが存在し、簡単なタブ機能を実装することはできますが、デザインや動作をカスタマイズするにはそれなりの工数が必要になります。GcTabControlは標準のTabControlにはない柔軟なカスタマイズ性を提供してくれます。

　以下の画像は初期状態のTabControlとGcTabControlです。

　タブの文字が異なるものの、それ以外はほぼおなじ見た目です。

TabControlとGcTabControl

　違いがわかるのは、コントロール右上のスマートタグをクリックした際です。それぞれの表示項目を見てみましょう。

TabControlのスマートタグ

GcTabControlのスマートタグ

デザイナからのカスタマイズ

　スタイルの変更や、タブの配置位置、複数段表示などスマートタグからさまざまな項目を変更できることが確認できます。画面のカスタマイズがコードを書かずにデザイナから行えるというのは便利なポイントです。

　カスタマイズについてもう少し具体的に見ていきます。スマートタグの「デザイナ」をクリックしてエディタを開きます。

GcTabcontrolのデザイナ

　左側のメニューの「表示」では、タブの見た目を選択できます。豊富に用意されたパターンから選択することでタブの見た目を変更することができます。

タブの見た目を変更する

　「配置」はタブの表示位置や、テキストの方向を指定できます。

タブの配置

　「閉じるボタン」からは、タブを閉じるためのアイコンを、「レイアウト」からは、タブの複数段表示などが設定でき、多くの情報を表示、整理する必要があるアプリケーションの作成を可能にします。

GcAccordionContainer

　GcAccordionContainerは展開可能なアコーディオンメニューを実現できるコントロールです。

GcAccordionContainer

　先述のGcTabControl同様、1つの画面に表示する情報を整理することが可能なコントロールです。

GcAccordionContainerの構成

　GcAccordionContainerはコンテナーという名前から分かる通り、複数のアイテムを内包します。

　上の画像では色分けされたそれぞれの長方形がGcAccordionItemというアイテムに相当し、独立して展開、折りたたみを行うことも、連携して1つのアイテムだけが展開する構成にもできます。

　展開しているアイテムを1つに制限したい場合は、スマートタグの展開方法をSingleに設定します。

展開するアイテムを1つに制限する

まとめ

　PlusPakのレイアウト系コントロールの中から、4つ紹介しました。

　これらのコントロールはMultiRowを利用するような、情報量の多い画面を整理して使いやすくする場合などに、より有効に活用できるでしょう。