Infragistics 製品とは？

Windows フォームにおけるアプリケーション デザインの難しさ

Windows フォームは歴史が長くテクノロジーとして成熟しており、またこのスキル セットを持った開発者も多数存在していますので、今もなお、多くの開発現場で利用されています。しかし、その一方で Windows フォームが苦手とするアプリケーションのビジュアル デザインに対するニーズも高まりつつあります。業務アプリケーションを利用するユーザーも、日常的にスマート フォンや Web などでさまざまな UIを目にする機会が増えたことで、業務アプリケーションについてもその UI に対する要求が増え、またそのビジュアル デザインに対する期待も高まっています。Web アプリケーション開発や WPF、UWP 開発においては、CSS や XAML といったデザインを行うための機能が用意されていますので、下記を容易に実現できますが、Windows フォームでは簡単ではありません。

1. UI エレメント単位での詳細なデザイン設定
2. デザインとコードの分離
3. アプリケーションの統一的なデザインの適用

Windows フォームでは「テキストボックスの背景色を変える」などの簡単な外観設定はプロパティとして用意されていますが、プロパティとして公開されていない部分を変更する際は UI エレメント自体を操作しなければならないため大変です。また、デザイン部分のみを切り出すこともできませんし、アプリケーションに統一的なデザインを適用する仕組みがないため、画面によっては (あるいは開発者によっては) デザインが少し異なってしまうといった事態は往々にして起こります。

前置きが長くなってしまいましたが、上記の「1」～「3」の問題を解消できるツールがあります。

AppStylist の概要

AppStylist は一言でいうと「アプリケーションの外観デザインを一元的に設定、管理できるツール」です。しかもデザイン変更に関してはコードを一切記述することなく、市販のデザイン ツールを使う感覚で利用できます。

AppStylist のデザイン画面

このツールは Windows フォーム開発で利用できるデザイン ツールとして、Ultimate UI for Windows Forms に含まれています。Ultimate UI for Windows Forms 自体が UI コントロール ライブラリであるため、基本的にはそれらのコントロールのデザインを目的としていますが、Microsoft が提供している Windows フォームの標準コントロールに対してもデザインが可能です。上記の図にあるように、UI のエレメント単位でかなり詳細なデザインができます (配色や画像だけでなく、マウス ホバー時の状態や Disable 状態などの外観も管理できます)。操作方法は非常にシンプルで、デザインする UI エレメントを選択し、それぞれの状態毎に外観を設定していくだけで、さらに、すぐにその結果をプレビュー画面で確認できるため、開発者ではなくデザイン担当者がこれらのビジュアル デザインを全て行うことができます。

作成されたデザインの定義体は、コード 1 行を読み込むことでアプリケーション全体に適用することができます。これにより、個々の開発者がデザインを特に意識することなく、アプリケーションに統一的な外観を提供することができるようになります。

図：同一モジュールに異なるスタイル定義を適用した例

また、しっかりとデザインされたデフォルトのテーマ ファイルも 40 種類ほど用意されています。イメージにあるテーマを一つ選択してベースのデザインとし、そこから要件に合うようにカスタマイズしていくことができます。このツールを使うことで Windows フォームのアプリとは思えないような精彩な外観を、かなり容易に実現することができます。ぜひお試しください。

AppStylist の利用方法

1. まず、Ultimate UI for Windows Forms をインストールすると (体験版であっても)、AppStylist も自動的にインストールされ [全てのアプリ] から起動することができます。[Infragistics] - [AppStylist for Windows Forms 20xx.x (バージョン名)] と進んでいただくと起動できます。

   

   
   

2. 起動すると、以下の図の画面が開きますので [新しいライブラリの作成] をクリックしてください。

   

   
   

3. ダイアログが出てきますので、ここでベースとするデザインを決定します。まっさらな状態からデザインしていくこともできますが、デフォルトのデザインをベースに進めた方が早いため、ここでは [既存のライブラリから開始] を選択します。

   

   
   

4. インフラジスティックスのデザイン チームが既にデザインした 40 種類ほどのスタイル ライブラリの中から好みのデザインを選択できます。

   
   
   
   [クリックで拡大]

   [クリックで拡大]

   
   

5. ここでは「Office 2007 Blue」スタイルを選択することにします。選択後は下記のように、Infragistics の全てのコントロールが Office 2007 Blue スタイルで統一されています。

   
   

   図：Office 2007 Blue スタイルで統一されたグリッド、スケジュール、ナビゲーション、リボン コントロールなど

   [クリックで拡大]

   [クリックで拡大]
   
   
   [クリックで拡大]

   
   

デフォルトのスタイルを適用しただけで、かなり見た目がきれいになりました。このスタイル ライブラリをそのまま使用していただいても全く問題ないレベルですが、ここからはグリッドのヘッダーの色だけをちょっと変更してみましょう。

1. グリッド スタイルの編集画面で変更したいヘッダー部分にマウス オーバーします。

   

   
   

2. ヘッダー部分にマウス オーバーすると、下記のようにツール チップが表示されます。ツール チップには現在マウス オーバーしている部分で変更できる要素が表示されます。

   

   
   

3. ここではカラム ヘッダー部分の色を変更したいので、キーボードの 1 を押します。キーボードの 1 を押すと、画面下側にスタイル変更のためのプロパティが表示されます。ここで色やフォントを変更することができます。

   

   
   

4. カラ― パレットでオレンジを選択します。

   

   
   

   グリッド ヘッダーがオレンジに変更されました。

   

   
   

   この例では、シンプルにオレンジ色に変更しましたが「もっと凝った外観にしたい」との希望があればグラデーションを付けたり、グリッドの状態ごとの外観設定を行ったりすることも可能です (例えば固定された列のヘッダーだけはオレンジではなくグレーにする、など)。

   

   
   

   折角なので上記の「固定された列のヘッダーだけはオレンジではなくグレー」を設定してみます。

   

   
   

5. 最後に、画面左上のファイルメニューから [スタイル ライブラリの保存] を選択し、作成または変更した外観設定をファイルの形式で保存します。

   

   
   

   あとは Visual Studio 上でこのファイルを読み込むだけで「Office 2007 Blue スタイル、グリッドヘッダーはオレンジ、固定された列のヘッダーはグレー」のスタイルを全コントロールに適用することができます。

   
   

作成したデザインの適用方法

基本的には、プロジェクトにデザインの定義体 (スタイル ライブラリ) を追加し、1 行のコードでそれを読み込ませるだけの非常にシンプルなものです。

1. まずは Visual Studio を開いて、Windows フォーム アプリケーションのプロジェクトを作成し、Infragistics コントロールを配置します (この例では、デザイン変更が分かりやすい Infragistics コントロールを適当に配置しただけですが、ツールボックスにもともと用意されている標準コントロールにもスタイルは適用可能です)。

   この時点では、まだスタイルは適用されていない状態です。

   

   
   

   この例では UltraTileView というコントロールを使って複数のタイルの中にコントロールを配置しています (例では 4 つのタイルを使用)。UltraTileView はタイルを拡大、縮小することで、エンドユーザーによる自由自在なレイアウト変更を可能にする UI コントロールです。

   
   

2. 作成したスタイル ライブラリ (office2007customize.isl) をプロジェクトに追加します。プロジェクト上で右クリックし [追加] - [既存の項目] より、作成したスタイル ライブラリを選択します。

   

   
   

3. スタイル ライブラリが追加されたら、次にそのスタイル ライブラリのプロパティから [出力ディレクトリにコピー] - [常にコピーする] を選択します。

   

   
   

4. 次に、追加したスタイル ライブラリを読み込むために下記のコードを 1 行だけ記述します。

   Infragistics.Win.AppStyling.StyleManager.Load("office2007customize.isl");

   
   
   

   
   

以上です。

ビルドするとデザイン変更が適用されたアプリケーションが起動します。以下はスタイルの適用前後のデザインですが、きれいで統一感のあるスタイルが適用されていることが分かります。

比較すると、AppStylist を利用して作成したスタイルを適用している画面の方が、見栄えが断然良いですよね。

まとめ

AppStylist を利用することで、Windows フォームでは難しいきめ細かいデザインを簡単なツール操作で実現でき、さらにアプリケーション全体に一括適用できます。デザインにかかる工数の大幅削減にも繋がりますし、デザインの定義が一括管理の外部ファイル化されるため、後からアプリケーションの外観を変更したい場合のメンテナンス工数も殆どかかりません。AppStylist を利用して、コスト削減を実現しつつ最終的によりよいアプリケーションをユーザーへ提供しましょう。

次回は、Windows フォームでは対応が難しいタッチ操作を実現する Infragistics のコントロールを紹介します。

© Copyright 2016 INFRAGISTICS. All Rights Reserved