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 theming approach is used, you can directly base the custom Style on the ExpanderHeaderButtonStyle style via the BasedOn property.

Approach when applying a theme via Implicit Styles

• XAML

<telerik:RadExpander Header="My Expander"> 
    <telerik:RadExpander.HeaderButtonStyle> 
        <Style TargetType="telerik:RadToggleButton" BasedOn="{StaticResource ExpanderHeaderButtonStyle}"> 
            <Setter Property="Foreground" Value="Red"/> 
            <Setter Property="FontWeight" Value="SemiBold"/> 
            <Setter Property="Margin" Value="5 5 0 0"/> 
        </Style> 
    </telerik:RadExpander.HeaderButtonStyle> 
</telerik:RadExpander> 

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

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

Approach when applying a theme via StyleManager

• XAML

<telerik:RadExpander Header="My Expander"> 
    <telerik:RadExpander.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericFluent.xaml"/> 
            </ResourceDictionary.MergedDictionaries> 
        </ResourceDictionary> 
    </telerik:RadExpander.Resources> 
    <telerik:RadExpander.HeaderButtonStyle> 
        <Style TargetType="telerik:RadToggleButton" BasedOn="{StaticResource ExpanderHeaderButtonStyle}"> 
            <Setter Property="Foreground" Value="Red"/> 
            <Setter Property="FontWeight" Value="SemiBold"/> 
            <Setter Property="Margin" Value="5 5 0 0"/> 
        </Style> 
    </telerik:RadExpander.HeaderButtonStyle> 
</telerik:RadExpander> 

Both of these approaches produce the following result: