How to customize the AccordionButton?

[Phil Brown]

Is it possible to change the style of the AccordionButton when I hover over it?

I would like to change the background and foreground colours so that they play nicely with the Blend Theme.

[Vijayalakshmi Roopkumar]

Hi Phil,

Thank you for contacting Syncfusion Support.

Yes it is possible to achieve your requirement. In SfAccordion, we are maintaining the Grid for setting the Background for each VisualState in SfAccordionButton. To customize the Background of SfAccordionButton on MouseHover, edit the Background property of the MouseOverBackground Grid to apply desired Hover Color. Similarly to customize the foreground for the SfAccordion, edit the ColorAnimation in the given Storyboard for the VisualState MouseOver, and applied this style for the SfAccordion using ItemContainerStyle property. You can use this template in desired format. Please find the code snippet for the same. 

  

CodeSnippet:[XAML] 

  

<!--Code used to define the hover color--> 

  

<SolidColorBrush x:Key="MouseHovercolor">Green</SolidColorBrush> 

  

<!--Code used to change the hover color when using mouse--> 

  

<Grid x:Name="MouseOverBackground"  Opacity="0" > 

<Border 

VerticalAlignment="Stretch" Background="{StaticResource MouseHovercolor}" 

BorderBrush="{TemplateBinding BorderBrush}" 

BorderThickness="{TemplateBinding BorderThickness}"/> 

</Grid> 

  

 

<!--Code used to changed the foreground color on MouseHover--> 

<ColorAnimation To="{Binding Source={StaticResource ExpandedStroke},Path=Color}" 

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

Storyboard.TargetName="header" /> 

 

<!--Code shows how the edited template applied using ItemContainerStyle--> 

  

<syncfusion:SfAccordion x:Name="accordion" 

VerticalAlignment="Center" Width="450" ItemContainerStyle="{StaticResource Accordionitems}"  > 

 

<syncfusion:SfAccordionItem Header="Winrt" AccordionButtonStyle="{StaticResource accordionButtonStyle}"/> 

<syncfusion:SfAccordionItem Header="Windows Phone" AccordionButtonStyle="{StaticResource accordionButtonStyle}"/> 

<syncfusion:SfAccordionItem Header="WPF" AccordionButtonStyle="{StaticResource accordionButtonStyle}"/> 

<syncfusion:SfAccordionItem Header="Universal" AccordionButtonStyle="{StaticResource accordionButtonStyle}"/> 

</syncfusion:SfAccordion> 

 

  

Screenshot: 

   

Sample: http://www.syncfusion.com/downloads/support/forum/129211/ze/SfAccordion_themecustomization-381253291 

  

Please try this solution and let us know if it helps.

Regards,
Vijayalakshmi V.R.

 

[Phil Brown]

Hi Vijayalakshmi,

That's just what I was looking for and does the job.

Thanks for your swift reply.

[Vijayalakshmi Roopkumar]

Hi Phil,

Thank you for the update.

Please let us know if you need any further assistance on this.

Regards,
Vijayalakshmi V.R.