Switching Icons at Runtime
By utilizing the implicit styling approach you have the ability to switch the theme of Telerik WPF controls at run-time. With the large set of themes available in the suite this can drastically change the look and feel of your application.
To help you achieve a consistent look we also provide a way for you to dynamically change the images in your application through the IconResource markup extension. The extension allows you to define three different URI-based paths which point to set of icons and then easily swap one set with another.
How To Use IconSources
To take advantage of the extension you need to define a resource of type IconSources holding the paths to the sets of icons. Example 1 demonstrates how to define a resource in XAML.
Example 1: Creating IconSources
<telerik:IconSources x:Key="IconSources" />
IconsSources resides in the Telerik.Windows.Controls.dll, so you need to add a reference to the assembly to your project first.
IconSources has three distinct properties to which you can assign base paths for your images.
- LightBasePath
- DarkBasePath
- ModernBasePath
The LightBasePath property represents a path to the default icon set destination, so setting it is mandatory.
Example 2 shows an example on how to define IconSources and set two of its path properties.
Example 2: Setting Paths to IconSources
<telerik:IconSources x:Key="IconPaths" LightBasePath="/IconSourceDemo;component/Icons/Light/" DarkBasePath="/IconSourceDemo;component/Icons/Dark/" />
Once the paths are set, the IconResource extension can be used to set the source of objects of type ImageSource. Example 3 shows how to define an Image object in XAML pointing to the background.png image in the folder paths from Example 2.
Example 3: Setting ImageSource Using IconResource
<Image Source="{telerik:IconResource IconRelativePath=background.png, IconSources={StaticResource IconPaths}}" Stretch="None" />
Presuming there is an image with file name background.png in the Icons/Light/ folder of your application, Figure 1 shows the result of Examples 1 – 3.
Figure 1: ImageSource Set by IconResource
Changing the image is achieved by calling the static ChangeIconsSet() method of IconSources.
Example 4: Changing Icon Set
IconSources.ChangeIconsSet(IconsSet.Dark);
This will trigger a change in the source of the Image and will show the background.png image located in the Icons/Dark folder of your application.
Because the relative path to the icon is defined for each image source, for the switch to work the images in the separate folders need to be with the same names.
Figure 2 shows the result after the code in Example 4 is executed.
Figure 2: Image After Changing the IconSet
You can find the complete code of the previous example in our online SDK repository here.
Available Icon Sets
Several of the controls in the Telerik UI for WPF suite come with sets of icons that can be used with them. The paths to all such images are consistent with the requirements imposed by the IconResource extension, so you can use it to switch those icons run-time.
RadPdfViewer, for example, comes with two distinct sets of icons located in the Telerik.Windows.Controls.FixedDocumentViewers assembly. Defining an IconSources resource for the viewer is shown on Example 5.
Example 5: Creating IconSources for RadPdfViewer
<telerik:IconSources x:Key="PdfViewerIconPaths" LightBasePath="/Telerik.Windows.Controls.FixedDocumentViewers;component/Images/Modern/"
DarkBasePath="/Telerik.Windows.Controls.FixedDocumentViewers;component/Images/" />
And you can use this resource to define images pointing to one of the base paths location.
Example 6: ImageSource Set to RadPdfViewer Icon
<Image Source="{telerik:IconResource IconRelativePath=open.png,IconSources={StaticResource PdfViewerIconPaths}}" Stretch="None" />
Both IconSource resources defined in the article are in the same view pointing to different base paths for images. The result of Example 6 is shown on Figure 3.
Figure 3: ImageSource Set to RadPdfViewer Icon
Changing the icon set used in the application with the code from Example 4 will change it for both images, regardless of the fact that they use separate base paths. The result is demonstrated on Figure 4.
Figure 4: Images After Changing the IconSet
You can find the complete code of the previous example in our online SDK repository here.