こんにちは！WinGridに関する連載3回目の今回はグリッドの外観の設定方法についていくつか紹介していきます。前回のバリデーションの紹介 で作成したサンプルを使って外観の変更を施していきたいと思います。
プロパティ設定による外観の設定
まずはプロパティ設定による基本的な外観の変更方法を紹介します。
WinGridの外観の変更は Appearance クラスから変更できます。この Appearance クラスは様々なエレメント（例えば、行 や セル や アイコン）や様々な状態（例えば、アクティブ状態 や ホバー状態 や 選択状態）ごとに用意されており、これらを変更することで細かな外観の制御を行うことができます。
例として、以下ではエラーのセルの背景色、編集中のセルの背景色、アクティブ状態（≒選択状態）の行の背景色および文字色、マウスホバー状態の行の背景色を設定しています。
//エラーセルの外観変更（）
Infragistics.Win.Appearance errorCell = (Infragistics.Win.Appearance)ultraGrid1.DisplayLayout.Override.DataErrorCellAppearance;
errorCell.BackGradientStyle = Infragistics.Win.GradientStyle.VerticalBump; //グラデーション設定
errorCell.BackColor = Color.FromArgb(255, 181, 193); //ピンク
errorCell.BackColor2 = Color.White; //白
//その他、行とセルのの外観変更
ultraGrid1.DisplayLayout.Override.EditCellAppearance.BackColor = Color.Yellow; //編集中のセルの背景色
ultraGrid1.DisplayLayout.Override.ActiveRowAppearance.BackColor = Color.LightYellow; //アクティブ行の行背景色
ultraGrid1.DisplayLayout.Override.ActiveRowAppearance.ForeColor = Color.Blue; //アクティブ行の文字色
ultraGrid1.DisplayLayout.Override.HotTrackRowAppearance.BackColor = Color.LightSkyBlue; //ホバー時の行背景色
このように、各エレメントの各状態ごとにAppearanceの設定を行っていくことでデザインしていくことができます。
[参考] オンラインヘルプ - WinGridのスタイル設定：
Application Styling Framwork による外観設定
上記ではプロパティを一つずつ設定する方法を紹介しましたが、この方法では以下のようなデメリットが考えられます。
・デザインの実装に時間がかかる。
・各画面間でのデザインを一定に保てない。
・デザイン担当とロジック担当を分けられない。
・後でデザインの変更を行うのが難しい。
Application Styling Framwork はこれらを解決するためのフレームワークで、Webでいうところの CSS のようなイメージでお使いいただけるものです。
仕組みとしてはデザインの定義情報の集合体であるスタイルライブラリ（*.isl）を作成し、アプリケーション内で以下のようなコードで読み込ませるだけで、画面内のすべてのInfragisticsコントロール（および.NET標準コントロールの外観の一部）の外観を設定することができます。
public Form1()
{
InitializeComponent();
//スタイルライブラリの読み込み
Infragistics.Win.AppStyling.StyleManager.Load("../../IG.isl");
}
スタイルライブラリ適用前
スタイルライブラリ適用後
スタイルライブラリ適用前後でかなりイメージが変わりましたね！
スタイルライブラリ適用後は黒を基調としたイメージとなっていますが、これは私が作ったものではなく製品をインストールすると最初から用意されている ”IG” というテンプレートを使ったものです。テンプレートは30種類近く用意されており、そのままお使いいただけますが、AppStylist という専用ツールを使って編集することができます。
テンプレートの格納場所（”全てのユーザ”に対してインストールした場合 13.1）：
C:\Users\Public\Documents\Infragistics\2013.2\Windows Forms\AppStylist for Windows Forms\Styles
以下のイメージは Metro.isl と Office2007Silver.isl をそれぞれ読み込ませたイメージです。
Metro.isl を読み込ませた状態
Office2007Silver.isl を読み込ませた状態
これらのイメージは読み込むスタイルライブラリを変えただけで、モジュール自体は同一のものです。
開発環境、テスト環境、本番環境、といった各環境ごとに一目で環境の違いが分かるようにしたい場合は、配信するスタイルライブラリを変えるだけで対応できますし、後から外観の変更を行う場合にも、画面モジュールを修正することなく対応できます。
[参考]オンラインヘルプ アプリケーションのスタイリング：
AppStylist の利用
上で紹介したスタイルライブラリの中身はXMLで構成されており、各エレメントやその状態ごとに細かくデザインが定義されています。テキストエディタでこれらを編集することも無理ではないですが、ノンコーディングでマウス操作のみで簡単にデザインを行える AppStylist というツールが用意されています。
AppStylist 利用イメージ
画面中央のプレビューキャンバスでデザインしたい部分にマウスカーソルを合わせると、そのエレメントに影響を与えているスタイル定義のロールの一覧がポップアップされるので、そこから編集するロールを選択し、背景色や前景色、画像などを設定していくのが基本的な使い方となります。※1つのエレメントに対して複数のロールが適用されており、より下位の階層で定義されているスタイルが勝ちます。
詳しい利用方法については、以下のヘルプページをご参照ください。
[参考]オンラインヘルプ - AppStylist の具体的な利用方法：
最後に
稀に「なぜ Label コントロールが製品の中に入っているのか？.NET標準のLabelコントロールとどのような違いがあるのか？」などといったご質問をいただくことがあります。実際、.NET標準で用意されている Label コントロールと機能的には変わらないのですが、Infragisticsコントロールで画面UIを統一することで上記でご紹介したような仕組みをすべてのUIに反映させる事ができデザインを統一することができるのです。
開発者からは、どうしてもコントロールの機能が注目されがちですが、利用する側のユーザは外観によってアプリケーションの受ける印象がかなり変わります。デザインの完成度、デザインコスト、画面間での統一性、メンテナンス性、様々な面で優秀でWindowsFormsアプリ作るなら是非一度はお試しいただきたいものです。AppStylist を最大限に利用してカッコいいWindowsFormsアプリを作ってみてください。
今回作成したサンプルのダウンロードは こちら から
無料トライアルダウンロードはこちら
