SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

画面解像度の異なる端末での運用をサポートする(1)

 PC用のディスプレイの高解像度化、タブレット端末の普及に合わせて、アプリケーションにも複数の解像度への対応が求められるようになっていきました。新しい開発プラットフォームのUniversal Windows Platform(UWP)などであれば、解像度の変化に合わせたレイアウト用のコントロールや仕掛けが用意されていますが、Windowsフォームアプリケーションでは通常、手間をかけた作りこみが必要になります。

 PlusPakを用いれば、レイアウトの自動拡大や、タブやアコーディオンを用いた表示情報の整理が簡単に行なえます。

GcResize

 GcResizeはウィンドウ幅に合わせたリサイズを提供します。

 通常、Windowsフォームアプリケーションのウィンドウ幅を変更しても配置されたコントロールは変化しません(親コンテナとドッキングさせている場合を除いて)。

ウィンドウ拡大前
ウィンドウ拡大前
標準だとウィンドウサイズを変更してもコントロールはリサイズされない
標準だとウィンドウサイズを変更してもコントロールはリサイズされない

 GcResizeを利用すると、ウィンドウサイズの変更に合わせて配置されたコントロールも拡大されます。

GcResizeを利用した場合コントロールも拡大される
GcResizeを利用した場合コントロールも拡大される

 画面上に複数のコントロールを配置した場合も、バランスを維持したまま拡大されます。

複数のコントロールが配置されている場合も、バランスを維持して拡大される
複数のコントロールが配置されている場合も、バランスを維持して拡大される

GcResizeの追加方法

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

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

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

レイアウトだけリサイズする

 標準の設定では、GcResizeを適用することで、レイアウトとフォントサイズがリサイズされるようになります。

 フォントサイズを変更したくない場合は、設定したいコントロールを選択、「gcResize1のResizeMode」プロパティをLayoutに変更します。

フォントはリサイズしない場合
フォントはリサイズしない場合

リサイズポリシーの追加

 GcResizeを利用しても正しいリサイズ結果が得られないコントロールは、リサイズポリシーを追加することで適切なリサイズが行えるようになります。

 今回はGcMultiRowのリサイズポリシーを利用します。リサイズポリシーを利用しない場合、アプリケーションを横に拡大しても1番右端の列が拡大されるだけですが、GcMultiRowのリサイズポリシーを適用すると全体が均等に拡大されます。

リサイズポリシーを適用しない場合
リサイズポリシーを適用しない場合
リサイズポリシーを適用した場合
リサイズポリシーを適用した場合

 リサイズポリシーは以下の方法で追加できます。

 ソリューションエクスプローラ上で右クリックから「追加」→「新しい項目」をクリックします。

新しい項目の追加
新しい項目の追加

 左ナビの「PlusPack for Windows Forms 8.0」をクリックします。

「PlusPack for Windows Forms 8.0」をクリック
「PlusPack for Windows Forms 8.0」をクリック

 GcMultiRowRisizePolicy8.0を選択して「追加」をクリックします。

GcMultiRowRisizePolicy8.0を追加
GcMultiRowRisizePolicy8.0を追加

 追加されたリサイズポリシーをGcResizeコントロールに適用します。

 Form1.cs上に配置したGcResizeをクリックします(表示名はgcResize1)。

 右上の三角マーク(スマートタグ)をクリックし「リサイズポリシーの編集」をクリックします。

リサイズポリシーの編集
リサイズポリシーの編集

 左下の「カスタムポリシーの追加」をクリックします。

カスタムポリシーの追加
カスタムポリシーの追加

 リストの1番下にGcMuliRowResizePolicyが追加されました(もし追加されない場合はプロジェクトをビルドした後、「リサイズポリシーの編集」をクリックしてください)。

リサイズポリシーが追加された
リサイズポリシーが追加された

GcTableLayoutContainer

 GcResizeはフォームにドロップするだけで簡単に配置されたコントロールのリサイズを可能にしました。しかし、アプリケーションによっては、メインの情報はリサイズしたいが、左側のナビゲーションはリサイズしても幅を変えたくない場合があります。そのようなケースでは、GcTableLayoutContainerが柔軟なテーブル形式のレイアウトを提供します。

GcTableLayoutContainerでテーブル形式のレイアウトを行う
GcTableLayoutContainerでテーブル形式のレイアウトを行う

GcTableLayoutContainerの追加方法

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

 フォーム上にGcTableLayoutContainerをドロップすると「テーブルレイアウトのパターン」ポップアップウィンドウが起動します。

テーブルレイアウトのパターン
テーブルレイアウトのパターン

 パターン1を選択して、右下の「OK」ボタンをクリックします。

パターン1を選択
パターン1を選択

 フォーム上にGcTableLayoutContainerが配置されました。

GcTableLayoutContainerを配置
GcTableLayoutContainerを配置

 コントロール右上の三角マーク(スマートタグ)をクリックし「親コンテナーにドッキングする」をクリックします。

親コンテナーとドッキングする
親コンテナーとドッキングする

 これで親コンテナー(今回の場合はフォーム)にあわせてレイアウトが変更されるようになります。

GcTableLayoutContainerの区切りを調整

 配置したGcTableLayoutContainerのレイアウトを調整します。

 今回は左側に固定幅のナビゲーションを配置して、右側にメインのコンテンツを配置し、こちらは画面幅に合わせて拡大するようにします。

 GcTableLayoutContainerの左上の50と書かれた数字をクリックします。

一行目を選択
一行目を選択

 これで横の一行目を選択した状態になります。今回は、横行は不要なので、右クリックから「削除」を選択します。

横行を削除
横行を削除

 画面上部の列の分割は、左側が100という値、右側が100%という割合になっていることに注目してください。これは左側の幅が100という固定の値で、右側が残り100%という、アプリケーションのウィンドウサイズによって変化する可変の値という意味です。

コントロールの配置

 左列にListViewを、右列にGcMultiRowコントロールを配置します。

 GcMultiRow側は自動で幅が変わるようにAllowAutoExtendをTrueに設定します。

 アプリケーションをデバッグ実行して、ウィンドウサイズを変更すると、右列に配置したGcMultiRowだけが拡大されることが確認できます。

 このようにGcResizeやGcTableLayoutContainerを利用することで、異なる画面サイズの環境に合わせた表示を行うことが可能になります。

次のページ
画面解像度の異なる端末での運用をサポートする(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
顧客と開発者の生産性を格段に向上させる、業務システムの画面UI連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9667 2016/10/14 17:11

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング