how-to-customize-accordion-appearance's Introduction

WPF Accordion - Appearance Customization

This example demonstrates how to customize appearance settings (foreground and background colors, border color and thickness) of the following accordion UI elements:

Accordion Header
Accordion Item

<dxa:AccordionControl x:Name="accordion">
    <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>
    <dxa:AccordionControl.ItemContainerStyle>
        <Style TargetType="dxa:AccordionItem">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="ShowInCollapsedMode" Value="{Binding ShowInCollapsedMode}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsCustomView}" Value="True">
                    <Setter Property="Background" Value="#e6f2fa" />
                    <Setter Property="BorderBrush" Value="#0072c6"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="Foreground" Value="Orange"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </dxa:AccordionControl.ItemContainerStyle>
</dxa:AccordionControl>