How to change the foreground of SAccordion Item header?

We can change the foreground of SfAccordion item header by modifying the HeaderTemplate of SfAccordion. The following code demonstrates the same.

Code Example: [Xaml]

<layout:SfAccordion x:Name="accordion"  Foreground="Green" SelectionMode="OneOrMore" VerticalAlignment="Center" Width="450" >
 
<!-- Header Text Foreground -->
 
<layout:SfAccordion.HeaderTemplate>
 
<DataTemplate>
 
<TextBlock Text="{Binding}" Foreground="Red" Opacity="1" FontFamily="Calibri" FontWeight="Bold" FontSize="20"/>
 
</DataTemplate>
 
</layout:SfAccordion.HeaderTemplate>
 
 
<!-- SfAccordion Backcolor -->
 
<layout:SfAccordion.ItemContainerStyle>
 
<Style TargetType="layout:SfAccordionItem">
 
<Setter Property="Background" Value="LightYellow"/>
 
</Style>
 
</layout:SfAccordion.ItemContainerStyle>
 
 
<!-- SfAccordion Items -->
<layout:SfAccordionItem Header="Winrt" Content="Essential Studio for WinRT"/>
<layout:SfAccordionItem Header="Windows Phone" Content="Essential Studio for Windows Phone"/>
<layout:SfAccordionItem Header="WPF" Content="Essential Studio for WPF"/>
<layout:SfAccordionItem Header="Universal" Content="Essential Studio for Universal"/>
 
</layout:SfAccordion>

Screenshot

SfAccordionSample

Sample: SfAccordionSample

Did you find this information helpful?

Yes

Comments (0)

How to change the foreground of SAccordion Item header?

Access denied