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>

Files to Review

• MainWindow.xaml (VB: MainWindow.xaml)
• MainViewModel.cs (VB: MainViewModel.vb)

Documentation

• Accordion Control
• Getting Started (Accordion Control)

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)