本格派エンジニアの工具箱

第13回 Silverlight業務アプリケーションの画面遷移と画面レイアウト

この記事を読むのに必要な時間:およそ 4 分

特定領域を全画面表示

ヘッダーやメニューなどは常に表示されていなければならない領域ではありません。このような領域を一時的に非表示にできれば,その分主たる作業領域広く使うことができ,ディスプレイサイズの小さい環境でも快適な操作性を実現できます。

このような動作も,実はGridを使用していれば行や列を非表示にすることができるためとても簡単に実現できます。具体例では,画面右上の「全画面」というリンクボタンをクリックすると,図7のように(1)(2)の領域が非表示となりその分だけ(3⁠⁠,⁠4⁠⁠,⁠5)の領域が広がるようになっています。

図7 Gridで特定の行や列を非表示にして作業領域を広げる動作

図7 Gridで特定の行や列を非表示にして作業領域を広げる動作

ユーザー操作による領域のサイズ調整

一つの画面でも,作業内容によっては大きく表示してほしい場所が異なってくるケースがあります。SilverlightにはGridの行や列の比率をユーザーがドラッグ操作で変更できるGridSplitterが用意されており,GridSplitterをGridの可変にしたい行や列に配置するだけで,図8のような動作が可能になります。

図8 ⁠3)の領域と(4⁠⁠,⁠5)の領域の高さの比率をドラッグ操作で変更する動作

図8 (3)の領域と(4),(5)の領域の高さの比率をドラッグ操作で変更する動作

使用頻度の低い領域を展開/格納

画面の中には,必要な項目ではあるがごく稀にしか使用しないという項目が存在することがあります。このような項目は,普段は非表示としておき必要なときだけ表示させるのが望ましいと言えます。

ComponentOne StudioのC1Expanderコントロールを使用すると,このような動作を簡単に実装することができます。具体例では(4)の領域にC1Expanderを使用しており,左端にある山括弧の記号部分をクリックすることで,図9のような領域の展開/格納を実現できます。

図9 C1Expanderで領域を展開/格納する動作

図9 C1Expanderで領域を展開/格納する動作

C1Expanderの動作は,下記のオンラインデモで実際に確認することができます。

C1Expanderのオンラインデモ:
http://www.grapecity.com/tools/jp/?componentonesl/expander/demo/

ComponentOne Studioを試してみる

今回ご紹介したComponentOne Studioの機能はほんの一部にすぎません。このほかにも多種多様な開発要件に応える幅広い分野のコンポーネントがComponentOne Studioには用意されています。その詳細は下記のオンラインデモで確認できます。

ComponentOne Studio for Silverlightオンラインデモ:
http://www.grapecity.com/tools/jp/?componentonesl/demo/

図10 ComponentOne Studio for Silverlightのオンラインデモ

図10 ComponentOne Studio for Silverlightのオンラインデモ

実際に試してみたいという方は,無償で全ての機能を試すことができるトライアル版をダウンロードしてください。

ComponentOne Studio for Silverlightトライアル版:
http://www.grapecity.com/tools/jp/?componentonesl/trial/

著者プロフィール

八巻雄哉(やまきゆうや)

グレープシティ株式会社 テクニカルエバンジェリスト