How to change the foreground of SAccordion Item header?

1 min read

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