How to: Customize the AccordionControl Appearance

• Jul 14, 2021

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

  XAML

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

• Define a style

  XAML

  <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:

XAML

<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