テーマ

テーマは、コントロールの外観をカスタマイズするために適用できる、カラー、フォント、画像、スキンなどのGUI要素のコレクションです。MVC は数々の組み込みテーマをサポートしており、これらをMVCアプリケーションの作成時に直接選択したり、リソースの登録時に設定することができます。MVCアプリケーションのリソースを登録するときにマテリアルテーマを設定することもできます。

デフォルトでは、MVCアプリケーションを作成するときに共通のデフォルトテーマが使用されます。外観は、「default」という固有のC1テーマを使用して実装されます。ASP.NET MVCコントロールには、多数の定義済みのビジュアルテーマがあり、WebサイトページのすべてのMVCコントロールに一貫した外観を提供できます。これらの定義済みのテーマは、C1.Web.Mvc.Themes の静的クラスで定義されています。

MVCコントロールにテーマを適用する方法は2つあります。

ComponentOneテンプレートを使用する - ComponentOne ASP.NET MVCアプリケーションウィザードを使用し、テーマオプションを使用してアプリケーションにテーマを設定します。以下の画像には、ASP.NET MVCアプリケーションで使用できるテーマのリストが表示されています。

Visual Studioテンプレートを使用する - MVCアプリケーションのリソースを登録するときにテーマを設定することもできます。MVCアプリケーションでテーマを適用するには、_Layout.cshtmlファイルに次のコードを追加する必要があります。

_Layout.cshtml	コードのコピー
//ComponentOne Themeを設定します @Html.C1().Styles().Theme("cocoa") //Theme Enumを使用して設定します @Html.C1().Styles().Theme(C1.Web.Mvc.Themes.Cocoa) //Material Themeを設定します @Html.C1().Styles().Theme("material.deep_orange-red")

_Layout.cshtml

コードのコピー

//ComponentOne Themeを設定します
@Html.C1().Styles().Theme("cocoa")

//Theme Enumを使用して設定します
@Html.C1().Styles().Theme(C1.Web.Mvc.Themes.Cocoa)

//Material Themeを設定します
@Html.C1().Styles().Theme("material.deep_orange-red")

The complete list of material themes supported with ComponentOne MVC Controls are provided below.

material.amber-blue	material.cyan-pink	material.indigo-light_blue	material.pink-deep_orange
material.amber-cyan	material.cyan-purple	material.indigo-light_green	material.pink-deep_purple
material.amber-deep_orange	material.cyan-red	material.indigo-lime	material.pink-green
material.amber-deep_purple	material.cyan-teal	material.indigo-orange	material.pink-indigo
material.amber-green	material.cyan-yellow	material.indigo-pink	material.pink-light_blue
material.amber-indigo	material.deep_orange-amber	material.indigo-purple	material.pink-light_green
material.amber-light_blue	material.deep_orange-blue	material.indigo-red	material.pink-lime
material.amber-light_green	material.deep_orange-cyan	material.indigo-teal	material.pink-orange
material.amber-lime	material.deep_orange-deep_purple	material.indigo-yellow	material.pink-purple
material.amber-orange	material.deep_orange-green	material.light_blue-amber	material.pink-red
material.amber-pink	material.deep_orange-indigo	material.light_blue-blue	material.pink-teal
material.amber-purple	material.deep_orange-light_blue	material.light_blue-cyan	material.pink-yellow
material.amber-red	material.deep_orange-light_green	material.light_blue-deep_orange	material.purple-amber
material.amber-teal	material.deep_orange-lime	material.light_blue-deep_purple	material.purple-blue
material.amber-yellow	material.deep_orange-orange	material.light_blue-green	material.purple-cyan
material.blue_grey-amber	material.deep_orange-pink	material.light_blue-indigo	material.purple-deep_orange
material.blue_grey-blue	material.deep_orange-purple	material.light_blue-light_green	material.purple-deep_purple
material.blue_grey-cyan	material.deep_orange-red	material.light_blue-lime	material.purple-green
material.blue_grey-deep_orange	material.deep_orange-teal	material.light_blue-orange	material.purple-indigo
material.blue_grey-deep_purple	material.deep_orange-yellow	material.light_blue-pink	material.purple-light_blue
material.blue_grey-green	material.deep_purple-amber	material.light_blue-purple	material.purple-light_green
material.blue_grey-indigo	material.deep_purple-blue	material.light_blue-red	material.purple-lime
material.blue_grey-light_blue	material.deep_purple-cyan	material.light_blue-teal	material.purple-orange
material.blue_grey-light_green	material.deep_purple-deep_orange	material.light_blue-yellow	material.purple-pink
material.blue_grey-lime	material.deep_purple-green	material.light_green-amber	material.purple-red
material.blue_grey-orange	material.deep_purple-indigo	material.light_green-blue	material.purple-teal
material.blue_grey-pink	material.deep_purple-light_blue	material.light_green-cyan	material.purple-yellow
material.blue_grey-purple	material.deep_purple-light_green	material.light_green-deep_orange	material.red-amber
material.blue_grey-red	material.deep_purple-lime	material.light_green-deep_purple	material.red-blue
material.blue_grey-teal	material.deep_purple-orange	material.light_green-green	material.red-cyan
material.blue_grey-yellow	material.deep_purple-pink	material.light_green-indigo	material.red-deep_orange
material.blue-amber	material.deep_purple-purple	material.light_green-light_blue	material.red-deep_purple
material.blue-cyan	material.deep_purple-red	material.light_green-lime	material.red-green
material.blue-deep_orange	material.deep_purple-teal	material.light_green-orange	material.red-indigo
material.blue-deep_purple	material.deep_purple-yellow	material.light_green-pink	material.red-light_blue
material.blue-green	material.green-amber	material.light_green-purple	material.red-light_green
material.blue-indigo	material.green-blue	material.light_green-red	material.red-lime
material.blue-light_blue	material.green-cyan	material.light_green-teal	material.red-orange
material.blue-light_green	material.green-deep_orange	material.light_green-yellow	material.red-pink
material.blue-lime	material.green-deep_purple	material.lime-amber	material.red-purple
material.blue-orange	material.green-indigo	material.lime-blue	material.red-teal
material.blue-pink	material.green-light_blue	material.lime-cyan	material.red-yellow
material.blue-purple	material.green-light_green	material.lime-deep_orange	material.teal-amber
material.blue-red	material.green-lime	material.lime-deep_purple	material.teal-blue
material.blue-teal	material.green-orange	material.lime-green	material.teal-cyan
material.blue-yellow	material.green-pink	material.lime-indigo	material.teal-deep_orange
material.brown-amber	material.green-purple	material.lime-light_blue	material.teal-deep_purple
material.brown-blue	material.green-red	material.lime-light_green	material.teal-green
material.brown-cyan	material.green-teal	material.lime-orange	material.teal-indigo
material.brown-deep_orange	material.green-yellow	material.lime-pink	material.teal-light_blue
material.brown-deep_purple	material.grey-amber	material.lime-purple	material.teal-light_green
material.brown-green	material.grey-blue	material.lime-red	material.teal-lime
material.brown-indigo	material.grey-cyan	material.lime-teal	material.teal-orange
material.brown-light_blue	material.grey-deep_orange	material.lime-yellow	material.teal-pink
material.brown-light_green	material.grey-deep_purple	material.orange-amber	material.teal-purple
material.brown-lime	material.grey-green	material.orange-blue	material.teal-red
material.brown-orange	material.grey-indigo	material.orange-cyan	material.teal-yellow
material.brown-pink	material.grey-light_blue	material.orange-deep_orange	material.yellow-amber
material.brown-purple	material.grey-light_green	material.orange-deep_purple	material.yellow-blue
material.brown-red	material.grey-lime	material.orange-green	material.yellow-cyan
material.brown-teal	material.grey-orange	material.orange-indigo	material.yellow-deep_orange
material.brown-yellow	material.grey-pink	material.orange-light_blue	material.yellow-deep_purple
material.cyan-amber	material.grey-purple	material.orange-light_green	material.yellow-green
material.cyan-blue	material.grey-red	material.orange-lime	material.yellow-indigo
material.cyan-deep_orange	material.grey-teal	material.orange-pink	material.yellow-light_blue
material.cyan-deep_purple	material.grey-yellow	material.orange-purple	material.yellow-light_green
material.cyan-green	material.indigo-amber	material.orange-red	material.yellow-lime
material.cyan-indigo	material.indigo-blue	material.orange-teal	material.yellow-orange
material.cyan-light_blue	material.indigo-cyan	material.orange-yellow	material.yellow-pink
material.cyan-light_green	material.indigo-deep_orange	material.pink-amber	material.yellow-purple
material.cyan-lime	material.indigo-deep_purple	material.pink-blue	material.yellow-red
material.cyan-orange	material.indigo-green	material.pink-cyan	material.yellow-teal