テーマ形式でコントロールの配色を一括管理できる.NETアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

2014/09/29 14:00

ダウンロードサンプルファイル（バイナリ） (4.5 MB)
ダウンロードサンプルコード（C#） (66.6 KB)
ダウンロードサンプルコード（VB） (67.5 KB)

　「ComponentOne Studio」に含まれるC1ThemeControllerコンポーネントを使って、コントロールの配色を一括して管理するアプリケーションを作成してみます。

はじめに

　アプリケーション作成で悩むのがフォームとコントロールの配色。特に複数のフォームを使用したアプリケーションでは、テーマに沿って配色を統一するのは、かなり手のかかる作業です。この配色設定を一括して簡単に行えれば、開発工数の削減が見込めます。

　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」の「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

作成したサンプルアプリケーション（Form1）

Form2

C1MainMenu
Button
Label
C1Chart3D
C1ThemeController

作成したサンプルアプリケーション（Form2）

テーマの適用

　では、作成したアプリケーションに組み込みのテーマを選んで配色してみましょう。

　（1）フォームにC1ThemeControllerコンポーネントをドラッグ＆ドロップします。「C1ThemeControllerの編集」ダイアログボックスが表示されます。

「C1ThemeControllerの編集」ダイアログボックスが表示

　（2）「アプリケーションテーマ」リストから「VS2013Purple」を選びます。

「VS2013Purple」を選ぶ

　（3）ダイアログボックスにある「すべてデフォルト」ボタンをクリックします。コンポーネントリストの「テーマ」がすべて「（default）」に代わります。

「すべてデフォルト」ボタンをクリック

「テーマ」がすべて「（default）」に代わる

　（4）ダイアログボックスのOKボタンをクリックします。「プロジェクトにApp.configを追加しますか」と聞いてくるので、「Yes」ボタンをクリックします。これで、テーマがWindowsフォームとそのコントロールに適用されます。

「Yes」ボタンをクリック

　（5）フォームとコントロールがテーマの色に変更されます。

フォームとコントロールがテーマの色に変更

　（6）配色が気に入らなくて変えたい、という場合はC1ThemeControllerコンポーネントのタスクトレイから「テーマの設定」を選びます。

タスクトレイから「テーマの設定」を選択

　（7）もう一度「C1ThemeControllerの編集」ダイアログボックスが表示されますので、「アプリケーションテーマ」リストから違うテーマを選べば、そのテーマに配色が変更されます。

配色の変更はテーマを選びなおすだけ

　（8）フォーム「Form2」にも同じテーマを適用しましょう。フォーム「Form2」にC1ThemeControllerコンポーネントをドラッグ＆ドロップします。「C1ThemeControllerの編集」ダイアログボックスが表示されますが、「アプリケーションテーマ」にはすでに「VS2013Purple」が選択されています。後は、「すべてデフォルト」ボタンをクリックすれば、Form1と同じテーマがForm2にも適用されます。

「すべてデフォルト」ボタンをクリックすれば、