This is a migrated thread and some comments may be shown as answers.

How to use IconSources

8 Answers 664 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
Patrick asked on 02 Oct 2015, 12:01 PM

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

8 Answers, 1 is accepted

Sort by
0
Aylin
Telerik team
answered on 06 Oct 2015, 02:22 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Oct 2015, 02:45 PM

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...

0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Oct 2015, 02:48 PM

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, ...).

0
Petya
Telerik team
answered on 08 Oct 2015, 01:40 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Nov 2015, 05:46 AM

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?

0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Nov 2015, 06:20 AM

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?

0
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
answered on 06 Nov 2015, 06:23 AM

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?​

0
Tanya
Telerik team
answered on 10 Nov 2015, 04:21 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
RichTextBox
Asked by
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Aylin
Telerik team
Patrick
Top achievements
Rank 2
Iron
Iron
Iron
Petya
Telerik team
Tanya
Telerik team
Share this question
or