Infragistics Ultimate UI for ASP.NET で提供されているコントロールは Application Styling Framework により統一感のあるスタイルを提供しています。これらコントロールはデフォルトのままでも統一感のとれたきれいな外観ですが、部分的に色やイメージを変更する必要が生じることもあります。Application Styling Framework では CSS をベースとしたスタイリングを行なっていますので CSS 経由で柔軟な外観変更ができるようになっています。
Infragistics Ultimate UI for ASP.NET コントロールが参照する CSS と画像ファイルは ig_res フォルダに配置されており、デフォルトで "Default" スタイルが参照されています。ig_dataGrid.css や ig_dayview.css など、コントロールに対応する CSS があることがわかります。今回はこの Default スタイルを使って WebDataGrid と WebMonthView の外観を変更していきます。
例えば WebDataGrid にはヘッダやセルの背景色、フィルタのアイコンなど様々な要素が存在しますが、これら要素が参照しているスタイルや画像をソースコードから確認していくのは大変です。サポートチームではこのようなスタイルの確認作業を行う際に IEの開発者ツールや Firefox の Firebug プラグインなどを利用しています。ここではFirefox と Firebug を使ったスタイルの確認と変更の方法をご紹介します。
デフォルトの外観
左側は WebDataGrid 、右側は WebMonthView です。それぞれカスタマイズ前の外観です。
Firebug を使ってみる
１．要素の参照
Firebug をインストールし、F12 を押下するか、ブラウザ右上のアイコンをクリックして起動します。するとブラウザ下方に Firebug の画面が表示されますので、左上にあるマウスカーソルのあるアイコンをクリックして調べたい要素をクリックします。
セルをクリックしてみると・・・
Firebug の右ウィンドウに適用されているスタイルが表示されました！このウィンドウからセルが参照しているスタイルが ig_dataGrid.css 72行目の tbody.igg_Item > tr > td に定義されていることがわかります。セルのスタイルを変更するには ig_dataGrid.css を書き換える、もしくはオーバーライドすればいいことがわかります。
２．要素の書き換え
また、Firebug から簡易に CSS や HTML などの要素を書き換えることもできます。tbody.igg_Item > tr > td に color : red を追加すると、セルの色が変化します。
WebMonthView も予定の文字色を変えてみます。.igmv_Appointment に color : red を追加すると文字色が変わりました。
ただし、Firebug 上での変更はあくまでもこの画面内でのみ有効です。続いて、実際にスタイルの変更をアプリケーションに反映する方法を確認します。
スタイルの変更方法
スタイルの反映方法は主に二通りあります。
１．直接 CSS ファイルの内容を編集する。
Default フォルダ配下にある該当 CSS ファイルを直接変更することで外観を変更することができます。
２．コントロールの置かれている ASPX に CSS を再定義してオーバーライドする。
ASPX に変更内容だけを追記することも可能です。
Infragistics Ultimate UI for ASP.NET コントロールでは非常に詳細なスタイリングが行われていますので CSS ファイルからコントロールの対応位置などを覚えるのは大変ですが、Firebug を使うことで簡単にスタイルの内容を確認することができ、作業効率が格段に上がります。是非一度お試し下さい！
サンプルはこちら
ASPNET_Styling.zip
Infragistics Ultimate UI for ASP.NET のスタイル関連情報はこちらにもあります！
関連ブログ
WebDataGrid の外観変更
https://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/02/14/webdatagrid.aspx
WebDataGrid 利用方法一覧
オンラインヘルプ
CSS ディレクトリ構造
https://help.jp.infragistics.com/NetAdvantage/ASPNET/2013.1/CLR4.0/default.aspx?page=Web_CSS_Directory_Structure.html
画像
https://help.jp.infragistics.com/NetAdvantage/ASPNET/2013.1/CLR4.0/default.aspx?page=Web_Images.html
開発者ツールや Firebug に関する情報はこちら！
Internet Explorer 開発者ツール
https://msdn.microsoft.com/ja-jp/library/cc848894%28v=vs.85%29.aspx
