In addition to the default theme, Infragistics provides custom themes for all Ultimate UI for WPF controls. This topic introduces these custom themes and explains how to apply them to all or individual controls in the WPF application.
The Ultimate UI for WPF suite of controls is shipped with the following professionally created themes:
Office 2010 Blue Theme - Applies a new colorful look to your Ultimate UI for WPF controls. The style is inspired by the Microsoft Office® 2010 suite of applications interface.
Office 2013 Theme - nice and clean MS Office 2013 inspired look and feel.
Royal Dark Theme - consistent and simplified theme enriched with more visual states, improved UX and dark colors.
Royal Light Theme - consistent and simplified theme enriched with more visual states, improved UX and light colors.
IG Theme - Predominantly monochromatic with the use of blacks, whites, and some grays, and uses blue as the highlight and accent color.
Metro Theme - Touch friendly theme. It is using white, light gray and blue colors. The controls have larger touch area for easier use.
Metro Dark Theme - Touch friendly theme. It is using dark gray, blue and black colors. The controls have larger touch area for easier use.
Infragistics themes are resource dictionaries wrapped into a set of physical files. Every control has its own theme resource files, which are shipped as external files. Each resource dictionary contains a collection of Styles that target all components of Ultimate UI for WPF control (e.g. MapNavigationPane element of the xamMap control). You can interact with the theme resources in both XAML and in code-behind.
The theme files are available publicly in our WPF Resources GitHub repository.
The themes packs and resource files are placed in their corresponding folders, named below:
This example will show you how to apply Metro Theme to the xamRadialGauge control. However, you can follow the same steps to apply themes to other controls in the Ultimate UI for WPF product. In the same way, you can apply the IG or Office 2010 Blue Theme to the xamRadialGauge or other controls.
Add a new folder to your project and name it "Themes".
Drag-and-drop the Metro Theme folder to your Themes folder. This will add all theme resource files for the Metro Theme to your project; but you can remove the resource dictionaries that you will not be using in your application. The Metro Theme folder can be found in the aforementioned repository under the Themes folder. In that folder will be a Metro folder containing all of the theme files for the Metro theme.
If the theme resource file is embedded as Content, it will be included in the application package, and you have to set the relative path to the Theme folder.
If the theme resource file is embedded as Resource into the application assembly, the Source property will need to be prepended with assembly name of your application.
The following table shows examples of a source path based on different build actions selected for embedding the theme resource file.
Apply the Metro theme for the xamRadialGauge control in your application:
In XAML:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes/MetroTheme/Metro.xamGauges.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
In Visual Basic:
Dim resource As New ResourceDictionary()
resource.Source = New Uri("/Themes/MetroTheme/Metro.xamGauges.xaml", UriKind.Relative)
Application.Current.Resources.MergedDictionaries.Add(resource)
In C#:
ResourceDictionary resource = new ResourceDictionary();
resource.Source = new Uri("/Themes/MetroTheme/Metro.xamGauges.xaml", UriKind.Relative);
Application.Current.Resources.MergedDictionaries.Add(resource);
Save and run your project. The following image shows the xamRadialGauge control with applied Metro Theme.
The xamGeographicMap control is a composite control. In order to apply themes, you have to include the following files in your application and in the MergedDictionaries collection:
[NAME OF THEME].xamGeographicMap.xaml
[NAME OF THEME].DataVisualization.xaml"
In 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>
The xamDataChart control is also a composite control and it requires the following theme resource files to be included and merged in your application:
[NAME OF THEME].xamDataChart.xaml
[NAME OF THEME].DataVisualization.xaml
In 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>