デフォルトのテーマに加え、すべての Ultimate UI for WPF コントロールにカスタム テーマが提供されます。このトピックは、WPF アプリケーションのすべてのコントロールまたは個別にカスタム テーマを適用する方法を説明します。
Ultimate UI for WPF コントロール スイートには 4 つのテーマが含まれます。
Office 2010 Blue テーマ - Ultimate UI for WPF コントロールは、新しいカラフルな外観を作成できます。このスタイルは、Microsoft Office® 2010 アプリケーション スイートのインターフェイスをモデルにしています。
Office 2013 テーマ - MS Office 2013 のルック アンド フィール。
Royal Dark テーマ - 視覚状態が追加された統一感のあるシンプルなテーマで UX を向上する暗い色のテーマです。
Royal Light テーマ - 視覚状態が追加された統一感のあるシンプルなテーマで UX を向上する明るい色のテーマです。
IG テーマ - 黒、白、強調表示とアクセント カラーとして青、およびいくつかのグレーを使用したモノクロ。
Metro テーマ - タッチ フレンドリーのテーマです。白、グレー、黒色を使用しています。このコントロールは、簡単に使用できるようにタッチ領域が大きくなっています。
Metro ダーク テーマ - タッチ フレンドリーのテーマです。ダークグレー、青色、黒色を使用しています。このコントロールは、簡単に使用できるようにタッチ領域が大きくなっています。
インフラジスティックス テーマは、物理的なファイルのセットにラップされたリソース ディクショナリです。 すべてのコントロールには、外部ファイルとして出荷される固有の Office 2010 Blue テーマ、IG テーマ、および Metro テーマのリソースファイルがあります。 各リソース ディクショナリには、Ultimate UI for WPF コントロールのすべてのコンポーネントをターゲットとするスタイルのコレクションが含まれます。(xamMap コントロールの MapNavigationPane 要素など)。XAML とコード ビハインドの両方でテーマ リソースを操作できます。
Ultimate UI for WPF 製品のインストールが成功すると、Windows のスタート メニューが変更され、項目のグループが含まれます。「Themes」という名前のフォルダーとハードドライブ上のテーマ リソース ファイルの場所にナビゲートする「テーマ フォルダーを開く」のショートカットリンクがあります。
C:\Program Files (x86)\Infragistics\2020.1\WPF\Themes
現在、Office 2010 Blue テーマ、IG テーマ、および Metro テーマパックが提供されており、テーマのリソース ファイルが対応するフォルダにそれぞれ置かれています。
テーマ リソース ディクショナリ ファイル名は以下の通りです。
この例は、Metro テーマを xamRadialGauge コントロールに適用する方法を示します。ただし、同じ手順に従って、Ultimate UI for WPF 製品のその他のコントロールにテーマを適用することができます。 同様に、IG または Office 2010 Blue テーマを xamRadialGauge またはその他のコントロールに適用できます。
プロジェクトに新しいフォルダーを追加して Themes という名前をつけます。
以下の場所から IG Theme フォルダーを Themes フォルダーにドラッグ アンド ドロップします。これで、Metro テーマのすべてのテーマ リソース ファイルがプロジェクトに追加されますが、アプリケーションで使用されないリソース ディクショナリを削除できます。
C:\Program Files (x86)\Infragistics\2020.1\WPF\Themes
テーマのリソース ファイルが Content として組み込まれる場合、それはアプリケーション パッケージに含まれ、テーマ フォルダーへの相対パスを設定する必要があります。
テーマ リソース ファイルが Resource としてアプリケーション アセンブリに組み込まれる場合、Source プロパティはアプリケーションのアセンブリ名を前に付ける必要があります。
以下の表は、テーマ リソース ファイルを組み込むために選択されたさまざまなビルド アクションに基づいたソース パスの例を示します。
アプリケーションに xamRadialGauge コントロールの Metro テーマを適用します。
XAML の場合:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes/MetroTheme/Metro.xamGauges.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>Visual Basic の場合:
Dim resource As New ResourceDictionary()
resource.Source = New Uri("/Themes/MetroTheme/Metro.xamGauges.xaml", UriKind.Relative)
Application.Current.Resources.MergedDictionaries.Add(resource)C# の場合:
ResourceDictionary resource = new ResourceDictionary();
resource.Source = new Uri("/Themes/MetroTheme/Metro.xamGauges.xaml", UriKind.Relative);
Application.Current.Resources.MergedDictionaries.Add(resource);プロジェクトを保存して実行します。以下の画像は、Metro テーマが適用された xamRadialGauge コントロールを示しています。
xamGeographicMap コントロールは複合コントロールです。テーマを適用するには、アプリケーションおよび MergedDictionaries コレクションに以下のファイルを含める必要があります。
[テーマ名].xamGeographicMap.xaml
[テーマ名].DataVisualization.xaml
XAML の場合:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes/IgTheme/IG.DataVisualization.xaml"/>
<ResourceDictionary Source="/Themes/IgTheme/IG.xamGeographicMap.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>xamDataChart コントロールもまた複合コントロールです。以下のテーマ リソースファイルをアプリケーションに含み結合する必要があります。
[テーマ名].xamDataChart.xaml
[テーマ名].DataVisualization.xaml
XAML の場合:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes/IgTheme/IG.DataVisualization.xaml"/>
<ResourceDictionary Source="/Themes/IgTheme/IG.xamDataChart.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>