header-button-style.md

title	page_title	description	slug	tags	published	position
Customizing Header Button	Header Button Style	This article will show you how to customize the header button style of the RadExpander control.	radexpander-features-header-button-style	button style, header button, expander, expander button	true	2

HeaderButtonStyle

The RadExpander control allows you to customize the style of its header, which is represented by a RadToggleButton element.

To change the header button style, assign a new Style with TargetType="RadToggleButton" to the HeaderButtonStyle property of RadExpander. This action will override the default style of the RadToggleButton element. You can base the custom style on the ExpanderHeaderButtonStyle style, to keep the default look of the RadToggleButton while applying the needed customizations. To do so, set the BasedOn property. Different logic would have to be introduced depending on the used theming approach.

If the [Implicit Styles]({%slug styling-apperance-implicit-styles-overview%}#setting-a-theme-using-implicit-styles) theming approach is used, you can directly base the custom Style on the ExpanderHeaderButtonStyle style via the BasedOn property.

[XAML] Approach when applying a theme via Implicit Styles

{{region radexpander-features-header-button-style-1}} <telerik:RadExpander Header="My Expander"> telerik:RadExpander.HeaderButtonStyle <Style TargetType="telerik:RadToggleButton" BasedOn="{StaticResource ExpanderHeaderButtonStyle}"> </Style> </telerik:RadExpander.HeaderButtonStyle> </telerik:RadExpander> {{endregion}}

If the [StyleManager]({%slug styling-apperance-implicit-styles-overview%}#setting-a-theme-using-stylemanager) theming approach is used, merge the resource dictionary for the used theme, which is contained in the Telerik.Windows.Controls assembly. In the following example, the GenericFluent.xaml dictionary is merged, because the Fluent theme is used.

tip If another theme is used, for example, Office_Black, change the GenericFluent.xaml to GenericOfficeBlack.xaml.

[XAML] Approach when applying a theme via StyleManager

{{region radexpander-features-header-button-style-2}} <telerik:RadExpander Header="My Expander"> telerik:RadExpander.Resources <ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries> </telerik:RadExpander.Resources> telerik:RadExpander.HeaderButtonStyle <Style TargetType="telerik:RadToggleButton" BasedOn="{StaticResource ExpanderHeaderButtonStyle}"> </Style> </telerik:RadExpander.HeaderButtonStyle> </telerik:RadExpander> {{endregion}}

Both of these approaches produce the following result: