Is there a way to change the icon for the rad expander from the circle with a '<' or '>' to an icon and shape that I define?
Thanks
Tony
Stenly
Telerik team
commented on 14 Oct 2024, 05:52 PM
Hello Tony,
Before continuing, could you share the theme that is used on your end? This way, I can review the default Style and ControlTemplate of the RadExpander control for the theme that is used and provide suggestions for achieving this requirement.
Additionally, which version of the assemblies is used on your side (Xaml or NoXaml)?
For the Green theme, the expand/collapse icons are represented by Path elements inside a RadToggleButton, which is part of the default ControlTemplate of RadExpander.
To achieve this requirement, extract the ControlTemplate from the Style with x:Key="ExpanderHeaderButtonStyle" and modify/remove the Path elements with x:Name="arrowDown" and x:Name="arrowUp". Additionally, modify the default Triggers for these elements. Then, create a new Style that targets the RadToggleButton element and is based on (via the BasedOn property) the above-mentioned Style. Finally, create a new Style that targets the RadExpander control and set the new Style to the HeaderButtonStyle property.
With this being said, I have attached a sample project for you to test, which contains the above suggestion. It uses RadGlyph instances as substitutes for the Path elements.
Hello Tony,
Before continuing, could you share the theme that is used on your end? This way, I can review the default Style and ControlTemplate of the RadExpander control for the theme that is used and provide suggestions for achieving this requirement.
Additionally, which version of the assemblies is used on your side (Xaml or NoXaml)?
Hello Tony,
Thank you for the provided information.
For the Green theme, the expand/collapse icons are represented by Path elements inside a RadToggleButton, which is part of the default ControlTemplate of RadExpander.
To achieve this requirement, extract the ControlTemplate from the Style with x:Key="ExpanderHeaderButtonStyle" and modify/remove the Path elements with x:Name="arrowDown" and x:Name="arrowUp". Additionally, modify the default Triggers for these elements. Then, create a new Style that targets the RadToggleButton element and is based on (via the BasedOn property) the above-mentioned Style. Finally, create a new Style that targets the RadExpander control and set the new Style to the HeaderButtonStyle property.
With this being said, I have attached a sample project for you to test, which contains the above suggestion. It uses RadGlyph instances as substitutes for the Path elements.