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>
(you will be redirected to DevExpress.com to submit your response)