Hatena::ブログ(Diary)

Yuya Yamaki’s blog このページをアンテナに追加 RSSフィード Twitter

2013年03月19日(火曜日)

Windowsフォームにおけるディスプレイ解像度多様化時代への対応

 下のグラフは、このblogの閲覧者のディスプレイの解像度(画素数)トップ10を、2007年2月と2013年2月で比較したものです。


f:id:Yamaki:20130319132445p:image


 6年前の時点では、「1280×1024」と「1024×768」という2つの解像度をサポートできれば、世の中の三分の二の環境で使用することができました。そして「1024×768」サイズの画面は、「1280×1024」のディスプレイに表示させてもさほど違和感はありません。


f:id:Yamaki:20130319152032p:image


 そのため、以前はウィンドウの最小化/最大化ボタンを非表示にしたうえで、ウィンドウサイズを「1024×768」(実際にはタスクバー部分を考慮するため縦方向はもう少し短い)に固定し、画面のレイアウトを固定的に作りこんだWindowsフォームアプリケーションが少なくありませんでした。


f:id:Yamaki:20130319152557p:image


 様々な解像度に対応するコストを考えると、2種類の解像度で三分の二の環境をサポートできる状況ではこの方法は妥当な方法だったと思います。使用する環境がある程度固定される業務アプリケーションともなればなおのことです。


 ところが、現在はトップ10すべてを足してやっと三分の二をカバーすることができる状況となっています。トップ10以外の部分である「その他」の割合を見れば、この6年間でいかに画面解像度の種類が増えたかがよくわかります。


 仮に、現在最も多い「1920×1080」(それでも全体の22%)のディスプレイに「1024×768」サイズの画面を表示させてみると、下の図のようになります。


f:id:Yamaki:20130319154029p:image


 このような状況で、ウィンドウサイズを固定化することは、あまり賢い選択とは言えないでしょう。


 では、様々な解像度に対応できる画面レイアウトにはどのようなものがあるのでしょうか。以下のページは、Windowsストアプリ開発のためのドキュメントですが、この資料の中に出てくる2つのレイアウト方式は、そのままデスクトップのWindowsアプリケーションにも当てはまるものです。


画面に合わせたスケーリングのガイドライン (Windows ストア アプリ) (Windows)


 画面のレイアウトを保持したままで画面全体を拡大/縮小できるのが固定レイアウト方式です。この方法は、WPFSilverlightなどのベクターベースのXAML UIプラットフォームでは簡単に実現できますが、Windowsフォームではそれを実現する直接的な機能は用意されていません。


 画面を複数のエリアに分割しエリアごとに拡縮の方法を設定するのが、アダプティブレイアウト方式です。この方法はWindowsフォーム2.0で追加されたTableLayoutPanelやFlowLayoutPanelを使用することになりますが、これらのコントロールはXAML UIプラットフォームのGridやStackPanel、WrapPanelと比べると、機能的に不足している部分があったり、デザイナーの操作性が劣っていたりといった問題があります。


f:id:Yamaki:20130319170742j:image


 このような問題に対応できるよう、PlusPak for Windows Formsには固定レイアウト方式とアダプティブレイアウト方式に対応した画面リサイズを可能にするための2つのソリューションが新たに追加されています。


固定レイアウト方式のためのソリューション


 固定レイアウト方式のためのソリューションとして、以下の2つのコントロールが追加されました。


コントロール名機能概要
f:id:Yamaki:20130319171223p:image"GcResize リサイズコンポーネント"フォームのリサイズにあわせたコントロールの拡大/縮小、コントロールごとのリサイズ設定、リサイズポリシーの追加
f:id:Yamaki:20130319171232p:image"GcResizePanel リサイズパネルコントロール"パネルのリサイズにあわせたコントロールの拡大/縮小、コントロールごとのリサイズ設定、リサイズポリシーの追加


 既存のフォームにGcResizeコントロールをドラッグ&ドロップするだけで、簡単に固定レイアウトへの対応を行うことができます。


f:id:Yamaki:20130319171836j:image


 GcResizeは特定のコントロールをリサイズしないといった細かな制御もできるようになっています。言葉で説明するよりも実際の動作を見ていただいたほうが理解しやすいと思いますので、下記のClickOnceデモを是非ご覧ください。


no title


アダプティブレイアウト方式のためのソリューション


 アダプティブレイアウト方式のためのソリューションとして、これまであったGcFlowLayoutContainerに加えて、GcTableLayoutContainerが追加されました。


コントロール名機能概要
f:id:Yamaki:20130319172550p:imageGcTableLayoutContainer テーブルレイアウトコンテナコントロールレイアウトの基準となる行・列の追加や削除、行または列ごとのサイズ定義(固定、比率、自動)、セルのマージ、罫線の指定、背景色の指定、背景画像、テンプレートからのレイアウトパターンの選択
f:id:Yamaki:20130319172616p:imageGcFlowLayoutContainer フローレイアウトコンテナコントロールレイアウトの方向、折り返し、子コントロールへのキャプションの追加・立体表示、背景のグラデーション、パターン効果


 GcTableLayoutContainerでは、WPFやSilverlightなどのGridにおいてサポートされるVisual StudioのXAMLデザイナーライクな操作をサポートしており、簡単に列や行をデザインしていけるようになっています。また、行や列の最大値や最小値を設定する機能、セパレーターによるユーザーリサイズ機能など、Windowsフォーム標準のTableLayoutPanelでは実現できなかったレイアウトが可能となっています。


f:id:Yamaki:20130319172841j:image


 PlusPak for Windows Formsは、業務システムに求められる機能の実現を広範囲に支援する .NET Frameworkコンポーネントセットです。製品は「レイアウト」「UIコントロール」「情報表示」「データ出力」「設計支援」の5つのカテゴリから構成されます。


スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/Yamaki/20130319/1363682409