How to set padding for accordion heading items?

User can set the gap in between of accordion heading items. It can be achieved by setting the Margin property in ItemContainerStyle. The following code demonstrates the same.

Code Example: [Xaml]

<layout:SfAccordion  x:Name="accordion" SelectionMode="OneOrMore"
VerticalAlignment="Center" >
 
<layout:SfAccordion.ItemContainerStyle>
 
<Style TargetType="layout:SfAccordionItem">
                                                             
<!-- Set Gap in between of SfAccordion Heading Item -->
 
<Setter Property="Margin" Value="5"/>
 
<!--SfAccordion Item width -->
<Setter Property="Width" Value="200"/>
 
</Style>
 
</layout:SfAccordion.ItemContainerStyle>
 
<layout:SfAccordionItem Header="WPF" Content="Essential Studio for WPF"/>
 
<layout:SfAccordionItem Header="Silverlight" Content="Essential Studio for Silverlight"/>
 
<layout:SfAccordionItem Header="WinRT" Content="Essential Studio for WinRT"/>
 
<layout:SfAccordionItem Header="Windows Phone" Content="Essential Studio for Windows Phone"/>
 
<layout:SfAccordionItem Header="Universal" Content="Essential Studio for Universal"/>
 
</layout:SfAccordion>

Screenshot

Sample: SfAccordionSample

Did you find this information helpful?

Yes

Comments (0)

How to set padding for accordion heading items?

Access denied