[AutoCompleteBox] Change RemoveButton image or set its color

[Kamil]

I have a custom class of TokenizedTextBlockElement that is displaying 3 different color 'styles' for token - green, yellow and red (backgrounds are #E3EDE1, #FCF8E3, #F2DEDE respectively), so the default RemoveButton's image is not visible enough.

I want to change the "X" image (RemoveButton) and it's states (default,  MouseOver, MouseDown, Disabled). It can be either by creating 3 different classes in Telerik's VisualStyleBuilder, or inside c# project's code but they need to be #1A3B17, #665A1F, #661F1F. How do I fix this issue?

In attachment I am presenting my current design issue (ignore the red exclamation point icon - it is a temporary icon to be replaced with more appropriate icons).

[Dess | Tech Support Engineer, Principal]

Hi, Kamil,

According to the provided information, it is not clear enough what is the exact custom implementation you have for the TokenizedTextBlockElement. However, RadAutocompleteBox offers the TextBlockFormatting event which which gives you access to the visual token element. Hence, you can customize the TokenizedTextBlockElement.RemoveButton which is represented by a RadButtonElement. This way you can change the Image/SvgImage itself.

Alternatively, you can customize a theme in Visual Style Builder and apply the desired Image/SvgImage for the available states:

The following tutorial demonstrates getting started experience how to customize one of the Telerik themes and save it as a custom theme:

https://docs.telerik.com/devtools/winforms/knowledge-base/customize-a-theme 

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

[Kamil]

Thanks a lot! In my Visual Style Builder could not find "TokenizedTextBlockElement.RemoveButton", but I just use the code based solution to this problem. Where can I find in Visual Style Builder changing visual style of the AutoCompleteBox drop down list visual style?

[Dess | Tech Support Engineer, Principal]

Kamil,

Please refer to the following screenshot illustrating better how to find the remove button in Visual Style Builder:

You can change the ForeColor from White to whatever color you need since the remove button is represented by a glyph:

[Kamil]

Thanks! I am fine with Remove Button. The issue is now updating color of the dropdown part now.

 

Edit: found it - it is in RadListControl > modify RadListElement and RadListVisualItem.

[Dess | Tech Support Engineer, Principal]

Glad to hear that you are fine with the remove button, Kamil.

Indeed, the drop down items are represented by RadListVisualItems which can be styled under RadListElement in Visual Style Builder.