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.
After successful installation of the Ultimate UI for WPF product, the Windows start menu will be modified and it will include groups of items. There should be a folder named “Themes” and a shortcut link “Open Themes Folder” that will navigate you to the location of the theme resource files on your hard drive.
C:\Program Files (x86)\Infragistics\2020.1\WPF\Themes
The themes packs and resource files are placed in the corresponding folders.
The theme resource dictionaries files are named as follows:
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 IG Theme folder from the following location 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.
C:\Program Files (x86)\Infragistics\2020.1\WPF\Themes
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>