Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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