How to use IconSources

[Patrick]

Hello,

in the new features of the Q3 2015 version, it is that we can use IconSources to change the icons used for a RadRichTextBox UI.

Unfortunately, the documentation is very poor: http://docs.telerik.com/devtools/wpf/controls/radrichtextbox/how-to/switching-icons-at-runtime
1. Where do I need to put this XAML code?
2. Where do I specify the set of icons to use?

And most important:
3. How can I define my own icons for RadRichTextBox?

Thanks in advance

[Aylin]

Hi Patrick,

Thank you for contacting us.

The documentation article you mentioned in your post provides only the overview information for IconSources. Could you please check if Switching Icons at Runtime article which explains step-by-step how to use IconSources could be of any help? 

Now straight to your questions, the XAML code could be placed at different parts of the application depending on where the icons will be used. For example. if they would be used in the whole application, then the XAML code could be placed in the App.xaml file of the application.

Regarding your second question, the icons to be used are specified by setting the base path of the images (the absolute path of the image without its name and extension). The paths might be assigned to LightBasePath, DarkBasePath or ModernBasePath properties of IconSources. The default one is LightBasePath.

And regarding the last question, all you need to do is defining URI-based paths which point to the set of your icons and then set the ImageSource using IconResources.

All of these steps and explanations could be found in the before-mentioned article. The complete code of the examples could be found in our online SDK repository, IconSourcesDemo.

I hope that the provided information helps. Do not hesitate to write back if any other questions arise.

Regards,
Aylin
Telerik

[Patrick]

Hy Aylin,

[quote] All of these steps and explanations could be found in the before-mentioned article.[/quote]

This is the same article I mentioned in my post... and there is no explanation in it.

I've tried to put the code in App.xaml but the icons haven't changed...

[Patrick]

Hy Aylin,

The example indicates how to use the icons that are specified in the resource, not how to change the default icons that are used in the RichTextBox (context menu, quick toolbar, dialog boxes, ...).

[Petya]

Hello Patrick,

I'm not sure that I properly understand what you're trying to achieve, so I'll reiterate some of the things Aylin mentioned and we discussed in another thread you started on the matter here.

The functionality that was released with Q3 2015 for RadRichTextBox gives you the ability to change the icons used in the control's UI through the IconResource markup extension. To achieve this you need to do the following:
1. Define the IconsSources as a resource, for example in the view where RadRichTextBox using the code snippet from this article.
2. Invoke the ChangeIconsSet() method as demonstrated in Example 4 here.

These steps relate to the three predefined icon sets and will change the icons for the whole UI, including context menu, selection mini toolbar, etc.

If you'd like to change the icons with your own set, there is no straightforward way to achieve that. There are a couple of options, however, they would require some additional modifications from your side. You can explore the two options:

• Modify the images by overriding the context menu builder, extracting the template of the mini toolbars, etc. like I've already suggested here.
• Define the IconsSources resource in step 1. above to point to another location, where you've placed the images. Note that for the icons set change in step 2. to work, the names of the images need to be exactly the same as the ones the default UI uses.

I also wanted to mention again that the markup extension would allow you to change any set of images and would encourage you to go through the common article and SDK example related to it.

I hope this makes things clear.

Regards,
Petya
Telerik

[Patrick]

Hi Petya,

what I want to do is replace the icons for the RichTextBox control (ribbon, context menu, mini toolbar, image editor, ...) with my own icons and I though, reading the documentation, that it would be easy to do this.

You have defined a way to translate some parts of the UI, why don't you leave an easy way to change your icons?

[Patrick]

Petya,
I've tried to change your solution. I've added the IconSources definition in the App.xaml file. Now for the call to ChangeIconsSet, I've tried in the docking pane that contains the RichTextBox and it works. But, if I make the call in the main window constructor or in the application initialization, the icons are not changed.

As I have multiple main windows and multiple docking panes that contains a RichTextBox, it is possible to make a single call to ChangeIconsSet in the application?

[Patrick]

Petya,
another question: the images in the ribbon are defined with xaml code such as:

SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/list-bullets.png"

How should I change this code to use the right set of icons?​

[Tanya]

Hi Patrick,

In order to use the IconSources class, you will need to modify or generate again the XAML code for the ribbon. The snippet bellow shows how the code for a single icon of the ribbon should look like:

<telerik:RadRibbonToggleButton telerik:ScreenTip.Description="Start a bulleted list." telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding ToggleBulletsCommand}" Size="Small" SmallImage="{telerik:IconResource IconRelativePath=16/list-bullets.png,IconSources={StaticResource IconSources}}" telerik:ScreenTip.Title="Bullets"/>

Defining the image source this way, you will be able to use the ChangeIconsSet() method and change the icons used in the UI of RadRichTextBox.

Please, note that the control must be initialized before calling the above-mentioned method. When ChangeIconsSet() method is called, it will change the icon sets for all the initialized controls in the application. However, if the RadRichTextBox- in the application are created later, they will be using the default set of icons.

Hope this helps.

Regards,
Tanya
Telerik