はじめに
アプリケーション作成で悩むのがフォームとコントロールの配色。特に複数のフォームを使用したアプリケーションでは、テーマに沿って配色を統一するのは、かなり手のかかる作業です。この配色設定を一括して簡単に行えれば、開発工数の削減が見込めます。
ComponentOne StudioのC1ThemeControllerコンポーネントは、アプリケーションの配色設定を一括して行ってくれる、夢のようなコンポーネントです。あらかじめ組み込まれている数十個のテーマを使って配色を設定できるほか、同じテーマを選択するだけで複数のフォームの配色を統一できます。
また、組み込みテーマをカスタマイズしたり、独自のテーマを作成することも可能です。作成したテーマはファイルに保存し、他のアプリケーションで使うことができるので、同じシリーズのアプリケーションの配色を簡単に統一することもできます。
今回は、このC1ThemeControllerコンポーネントを使って、テーマを用いたアプリケーションの配色設定を行ってみます。
対象読者
Visual Basic 2010／2012／2013、またはVisual C# 2010／2012／2013を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010／2012／2013、Visual C# 2010／2012／2013、Visual Studio 2010／2012／2013でプログラムが作れる環境。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4
プログラム実行時の注意事項
本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4でのみご使用いただけます）。
| ファイル名 | 説明 |
|---|---|
| C1.Win.C1Themes.4.dll | 本体アセンブリ |
これらのファイルを、実行プログラムと同じフォルダに格納します。サンプルアプリケーションを動作させるには、サンプルに同梱してあるフォームに組み込んだコントロールのdllファイルも必要になります。
コンポーネントのインストール
トライアル版は、グレープシティのWebページから申し込みできます。
トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
ComponentOne Studioをインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Win.C1Themes」の「C1ThemeController」コンポーネントです。
これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.Win.C1Themes.4.dll | 本体アセンブリ |
C1ThemeControllerコンポーネントの概要
Themes for WinFormsのC1ThemeControllerコンポーネントは、Windowsフォームとその上に配置したComponentOneコントロールの配色を、簡単にかつ一括して設定できるコンポーネントです。
デザインには、あらかじめ用意された組み込みテーマを使用でき、また使いやすいテーマデザイナを使用して独自のテーマを作成したり、既存のテーマを変更したりすることもできます。
そのため、複数のフォームを使用するアプリケーションでは、フォームを一つ一つ配色する必要がなく、アプリケーションに1つのテーマを設定すればすべてのフォームの配色を統一できます。
また、一度設定した配色を変更する場合でも、アプリケーションのテーマを修正するだけで、一括して配色の変更を適用できます。
もちろん、フォーム単体ごとにテーマを適用させることもできます。
C1ThemeControllerコンポーネントの主な特徴
このC1ThemeControllerコンポーネントは、次のような特徴があります。
- アプリケーション内のサポートしているComponentOneコントロールすべてに同じテーマを適用できる
- フォーム内のサポートしているComponentOneコントロールすべてに同じテーマを適用できる
- フォーム内のサポートしているComponentOneコントロールすべてに異なるテーマを適用できる
- 設計時または実行時に、1回のクリックでアプリケーションの外観を変更できる
- 使いやすいテーマデザイナを使用して、実際のコーディングとは別に、（プログラマではなく）ビジュアルデザイナがアプリケーションの外観を設計／変更できる
- 組み込みテーマを使用することも、一から独自のテーマを作成することも、組み込みテーマを変更することもできる
- 独自に作成したテーマを配布することができるので、C1 WinFormsコントロールを使用して構築されているアプリケーションであれば、企業内の他のアプリケーションでそのテーマを使用できる
- テーマの内部では、テーマ全体で1つの共通プロパティリポジトリ（基本テーマプロパティ）を参照できるため、簡単に変更できるテーマを統一的に作成できる
テーマ適用可能な ComponentOne WinForms コントロール
C1ThemeControllerコンポーネントは、以下の ComponentOne WinForms コントロールをサポートします。
| ComponentOne WinForms製品 | コントロール名 |
|---|---|
| Chart for WinForms | C1Chart and C1Chart3D |
| FlexGrid for WinForms | C1FlexGrid |
| GannttView for WinForms | C1GanttView |
| Input for WinForms | C1Textbox, C1DateEdit, C1NumericEdit, C1DropDownControl, C1DbNavigator, C1CheckBox, C1Button, C1Label, C1PictureBox, C1SplitButton, C1ComboBox |
| InputPanel for WinForms | C1InputPanel |
| Menus and ToolBars for WinForms | C1DockingTab, C1MainMenu, C1ContextMenu, C1ToolBar, C1TopicBar, C1NavBar, C1OutBar, C1RadialMenu |
| Report for WinForms | C1Report, C1PrintPreview, C1PreviewPane, C1PreviewThumbnailView, C1PreviewOutlineView, C1PreviewTextSearchPanel, C1PrintPreviewDialog, C1ReportDesigner |
| Ribbon for WinForms | C1Ribbon and C1StatusBar |
| Scheduler for WinForms | C1Schedule and C1Calendar |
| SplitContainer for WinForms | C1SplitContainer |
| SuperToolTip for WinForms | C1SuperToolTip, C1SuperErrorProvider C1SuperLabel |
| TileControl for WinForms | C1TileControl |
| TrueDBGrid for WinForms | C1TrueDBGrid |
テーマの概念と組み込みのテーマ
テーマは、サポートしているコントロールの外観を決定するプロパティに対して、統一的に値を設定するためのXMLドキュメントです。ファイルに保存すると.c1theme拡張子が付きます。
C1ThemeControllerコンポーネントを使用して、実行時や設計時にアプリケーション内のフォームにテーマを適用すると、そのフォーム内のすべてのコントロールの外観がテーマに従って変更されます。
テーマはさまざまなComponentOneコントロールに対し、細かな部位で配色の設定が行えます。テーマが適用されると、各コントロールは設定した配色だけが変更されます。これにより、どれほど小さくて特殊なコントロールの細部にも、カスタマイズした「テーマ付きの」外観を適用できます。
テーマの統一感は参照メカニズムによって実現されます。これは、個々のコントロールの色やフォントといったプロパティが、テーマの他のすべてのセクションからアクセス可能な共通のリポジトリを参照できるようにします。この共通リポジトリを「基本テーマプロパティ」と呼びます。
この基本テーマプロパティは、コントロールのプロパティに直接適用されませんが、コントロールで使用される実際のプロパティの指定時に、テーマの作成者がそれらのプロパティを参照できます。
さらに、テーマは標準のWindowsフォームやボタン、ラベルなどのコントロールに対しても一部適用することができます。
C1ThemeControllerコンポーネントにあらかじめ組み込まれているテーマは次のとおりです。
- BeigeOne.c1theme
- ExpressionDark.c1theme
- ExpressionLight.c1theme
- GreenHouse.c1theme
- MacBlue.c1theme
- MacSilver.c1theme
- Office2007Black.c1theme
- Office2007Blue.c1theme
- Office2007Silver.c1theme
- Office2010Barbie.c1theme
- Office2010Black.c1theme
- Office2010Blue.c1theme
- Office2010Green.c1theme
- Office2010Red.c1theme
- Office2010Silver.c1theme
- Office2013DarkGray.c1theme
- Office2013Green.c1theme
- Office2013Grey.c1theme
- Office2013HighContrast.c1theme
- Office2013LightGray.c1theme
- Office2013Red.c1theme
- Office2013White.c1theme
- RanierOrange.c1theme
- ShinyBlue.c1theme
- Violette.c1theme
- VisualStyleOffice2010Black.c1theme
- VisualStyleOffice2010Blue.c1theme
- VisualStyleOffice2010Silver.c1theme
- VS2013Blue.c1theme
- VS2013Dark.c1theme
- VS2013DarkSolar.c1theme
- VS2013Green.c1theme
- VS2013Light.c1theme
- VS2013Purple.c1theme
- VS2013Red.c1theme
- VS2013Tan.c1theme
- Windows8Blue.c1theme
- Windows8Brown.c1theme
- Windows8Gray.c1theme
- Windows8Green.c1theme
- Windows8Red.c1theme
- デフォルト（現在のコンテキストのデフォルトテーマを指定）
- なし（テーマを適用しないことを指定）
C1ThemeControllerダイアログボックス
テーマを適用する際は、専用のダイアログボックスを使用します。
［アプリケーションテーマ］ドロップダウンリストボックス
アプリケーション全体の（デフォルト）テーマを指定するために使用されます。このテーマの名前は、App.configファイルに保存されます。
［C1ThemeController1 テーマ］ドロップダウンリストボックス
現在のC1ThemeControllerのデフォルトテーマを指定します。値 "(デフォルト)" は、ApplicationThemeで指定されるアプリケーション全体のテーマが使用されることを示します。
［選択されたテーマ］ドロップダウンリストボックス
フォーム内のサポートされているすべてのコントロールには、「c1ThemeController1のテーマ」拡張プロパティが追加されます。
このプロパティを特定のテーマ名に設定すると、テーマコントローラのデフォルトテーマに関係なく、そのテーマが現在のコントロールに適用されます。
これにより、必要に応じて、同じフォーム内の異なるコントロールに異なるテーマを適用できます。このプロパティは、「デフォルト」と「なし」の2つの特別な値をサポートします。デフォルト値は、コントロールに現在のフォームのC1ThemeControllerに指定されたデフォルトテーマが使用されることを意味します。「なし」は、コントロールにテーマが適用されないことを意味します。
［すべてを（デフォルト）に設定］ボタン
フォームのすべてのコントロールにデフォルトテーマを設定します。
［すべてを（なし）に設定］ボタン
テーマを「なし」に設定します。フォーム内のコントロールにはテーマが適用されません。
テーマデザイナ（C1ThemeDesigner）について
テーマデザイナを使用することで、組み込みテーマの配色の変更やオリジナルのテーマの作成が行えます。
テーマデザイナは単独のアプリケーションとしてインストールされ、スタートメニューから起動します。
デザイナを起動すると、下図の状態で表示されます。新しくテーマを作成することも、すでにあるテーマを修正することも可能で、作成・修正したテーマをファイルに保存することができます。
デザイナは単独のアプリケーションなので、Visual Studioと並行して使用することができ、作成したテーマやテーマの修正をすぐに作成中のアプリケーションに反映させることができます。
新規作成を選ぶと、デザイン画面に移行します。「テーマツリー」で操作対象のコントロールを選び、それぞれの色のプロパティを変更します。
変更結果は隣のペインにある「テーマのプレビュー」に反映され、設定結果を確認しながらデザインを進めることができます。
テーマの設定（1）
では、実際にアプリケーションを作成し、テーマを設定してみましょう。
アプリケーションは2つのフォームを持ち、次のコントロールを配置しています（コントロールはあくまでもサンプルアプリケーション用です）。
Form1
- C1MainMenu
- C1ToolBar
- RichTextBox
- C1StatusBar
- C1ThemeController
Form2
- C1MainMenu
- Button
- Label
- C1Chart3D
- C1ThemeController
テーマの適用
では、作成したアプリケーションに組み込みのテーマを選んで配色してみましょう。
（1）フォームにC1ThemeControllerコンポーネントをドラッグ＆ドロップします。「C1ThemeControllerの編集」ダイアログボックスが表示されます。
（2）「アプリケーションテーマ」リストから「VS2013Purple」を選びます。
（3）ダイアログボックスにある「すべてデフォルト」ボタンをクリックします。コンポーネントリストの「テーマ」がすべて「（default）」に代わります。
（4）ダイアログボックスのOKボタンをクリックします。「プロジェクトにApp.configを追加しますか」と聞いてくるので、「Yes」ボタンをクリックします。これで、テーマがWindowsフォームとそのコントロールに適用されます。
（5）フォームとコントロールがテーマの色に変更されます。
（6）配色が気に入らなくて変えたい、という場合はC1ThemeControllerコンポーネントのタスクトレイから「テーマの設定」を選びます。
（7）もう一度「C1ThemeControllerの編集」ダイアログボックスが表示されますので、「アプリケーションテーマ」リストから違うテーマを選べば、そのテーマに配色が変更されます。
（8）フォーム「Form2」にも同じテーマを適用しましょう。フォーム「Form2」にC1ThemeControllerコンポーネントをドラッグ＆ドロップします。「C1ThemeControllerの編集」ダイアログボックスが表示されますが、「アプリケーションテーマ」にはすでに「VS2013Purple」が選択されています。後は、「すべてデフォルト」ボタンをクリックすれば、Form1と同じテーマがForm2にも適用されます。
このように、リストから組み込みのテーマを選ぶだけで、複数のフォームの配色作業がとても簡単に済みます。
テーマの設定（2）
テーマの修正
今度は、このテーマの配色を少し修正してみましょう。この作業は、テーマデザイナを使用します。
（1）Windowsのスタートメニューから、「C1Themeデザイナ」をクリックします。
（2）テーマデザイナが起動しますので、ナビゲーションバーから「新しいテーマの作成」をクリックします。
（3）「新しいテーマ」ダイアログが表示されますので、テーマ名を「MyTheme」に変え、「基本テーマ」にある「標準の組み込みテーマテンプレート」をクリックし、リストから「VS2013Purple」を選び、OKボタンをクリックします。
（4）テーマ「VS2013Purple」が読み込まれ、プレビューに表示されます。今回は、フォームとコントロールの文字入りを変更してみます。
まず、テーマツリーにある「BaseThemeProperties」をクリックして展開します。
（5）「Control Text」のプロパティにある▼ボタンをクリックし、「Web」タブをクリックして「Deep Pink」をクリックします。
続いて、「Window Text」のカラーも同様の操作で「Deep Pink」に設定します。
（6）今度は、メニューの背景色を変えます。「テーマツリー」から「C1Command－C1MainMenu－Bar－BackColor」を展開し、「Royal Blue」を選びます。また、「Item－Default－ForeColor」を展開し「White」を選びます。
結果がプレビューに表示されます。
（7）ここで、修正したテーマを別の名前で保存します。「ファイル」メニューから「保存」を選び、任意のフォルダを選びます。ファイル名は、先ほど付けたテーマ名になっています。
修正したテーマをフォルダとコントロールに適用する
これで、組み込みのテーマ「VS2013Purple」をもとにカスタマイズしたテーマを作成し保存しましたので、このテーマをアプリケーションに適用します。
（1）Visual Studioに戻り、C1ThemeControllerコンポーネントのタスクトレイから「テーマの追加」を選びます。そして、作成したテーマファイルを選びます。
（2）C1ThemeControllerコンポーネントのタスクトレイから「テーマの設定」を選びます。「アプリケーションテーマ」のリストに、作成したテーマ名が表示されていますので、これを選びます。
（3）アプリケーションに、読み込んだテーマの配色が適用されます。
また、フォーム「Form2」も自動的に読み込んだテーマが適用されています。
まとめ
アプリケーションの配色デザインは、色の選択や細部の設定に時間がかかる作業ですが、C1ThemeControllerコンポーネントを使えば、この作業にかかる工数を相当削減できるのではないでしょうか。
また、ビジュアライズされたデザイナを使用することで、プログラミングに疎いグラフィックデザイナーの方でも配色設定に参加できますので、アプリケーションの仕上がりに違いが出るのではないでしょうか。
