Skip to main content
All docs
V24.1

How to: Customize the AccordionControl Appearance

This example demonstrates how to use standard properties BorderBrush, BorderThickness, Background, and Foreground to customize AccordionControl and AccordionItem appearance.

You can use standard appearance properties to colorize the AccordionControl elements in versions 21.1 or newer.

Use either of the following techniques to apply appearance properties to the AccordionControl:

  • Specify properties directly

    <dxa:AccordionControl x:Name="accordion" 
                            Background="#fdfdfd"
                            BorderBrush="#51555f"
                            BorderThickness="1" >
                            <!---->
    </dxa:AccordionControl>
    
  • Define a style

    <dx:ThemedWindow.Resources>
        <Style TargetType="dxa:AccordionControl">
            <Setter Property="Background" Value="#fdfdfd"/>
            <Setter Property="BorderBrush" Value="#51555f"/>
            <Setter Property="BorderThickness" Value="1"/>
        </Style>
    </dx:ThemedWindow.Resources>
    

You can customize specific elements in a similar manner:

<dxa:AccordionControl.HeaderStyle>
    <Style TargetType="dxa:HeaderPresenter" >
        <Setter Property="Background" Value="#e6f2fa"/>
        <Setter Property="Foreground" Value="Brown"/>
        <Setter Property="BorderBrush" Value="#51555f"/>
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
    </Style>
</dxa:AccordionControl.HeaderStyle>

View Example