Custom accordion header highlight

[Iliya]

I am using a custom header template in SfAccordionItem. I want to highlight it (change the foreground color) when the item is expanded. How can I do that?

[Vijayalakshmi Roopkumar]

Hi  Iliya. 

 

Thank you for contacting Syncfusion Support. 

 

We could understood that you want to change the foreground color of the SfAccordionItem when it is get expanded. If it so, you need to override the template of SfAccordionButton, and need to change the forecolor of ContentControl property maintained in VisualState of Expanded as shown in following code. 

 

Code: 

 

 

<VisualState x:Name="Expanded"> 

<Storyboard> 

<DoubleAnimation 

BeginTime="00:00:00" 

Storyboard.TargetName="icon" 

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" 

To="90" 

Duration="00:00:00.3" /> 

<DoubleAnimationUsingKeyFrames 

BeginTime="00:00:00" 

Storyboard.TargetName="ExpandedBackground" 

Storyboard.TargetProperty="(UIElement.Opacity)" 

Duration="00:00:00.0010000"> 

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" /> 

</DoubleAnimationUsingKeyFrames> 

<ColorAnimation 

Storyboard.TargetName="arrow" 

Storyboard.TargetProperty="Fill.Color" 

To="{Binding Source={StaticResource ExpandedStroke}, Path=Color}" /> 

<ColorAnimation 

Storyboard.TargetName="header" 

Storyboard.TargetProperty="(ContentControl.Foreground).(SolidColorBrush.Color)" 

To="Red" /> 

</Storyboard> 

</VisualState> 

 

 

Screenshot: 

 

 

 

Sample for your reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfAccordionCustomization-615601843 

 

Please make use of this suggestion and let us know if it is helpful. 

 

Regards, 

Vijayalakshmi VR 

[Iliya]

Is there a way to do that without overwriting the whole template for SfAccordion? Just overwrite the relevant color or alternatively apply color when the item is expanded in a custom header item(as shown on the image) ?

[Vijayalakshmi Roopkumar]

Hi Iliya, 

 

Thank you for your update. 

 

We have checked the reported requirement "Want Just overwrite the relevant color or alternatively apply color when the item is expanded in a custom header item" without overriding the whole template. You can achieve it using HeaderTemplate property of Accordion. In our sample, we have changed the foreground for the header text based on the IsSelected property using DataTrigger, which will update the forecolor based on its value. Please find the code for the same below:  

 

Code:[XAML] 

 

 

<Window.Resources> 

<DataTemplate x:Key="CustomHeaderTemplate"> 

<Grid> 

<Grid.Resources> 

<Style TargetType="TextBlock"> 

<Style.Triggers> 

 

<!--Change the forecolor on expand state--> 

 

<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type syncfusion:SfAccordionItem}}}" Value="True"> 

 

<Setter Property="Foreground" Value="Red" /> 

</DataTrigger> 

 

<!--Change the forecolor on collapsed state--> 

 

<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type syncfusion:SfAccordionItem}}}" Value="False"> 

<Setter Property="Foreground" Value="Green" /> 

</DataTrigger> 

</Style.Triggers> 

</Style> 

</Grid.Resources> 

<TextBlock Text="{Binding}"/> 

</Grid> 

</DataTemplate> 

</Window.Resources> 

 

 

<!--Apply the headertemplate--> 

<syncfusion:SfAccordion 

Width="400" 

Height="300" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

HeaderTemplate="{StaticResource CustomHeaderTemplate}"> 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfAccordionCustomization_Modified1225081159 

 

Screenshot shows the expanded forecolor with Red and collapsed item with Green color: 

 

 

 

Please try this solution and let us know if it is helpful. 

 

Regards, 

Vijayalakshmi VR