We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the AccordionButton?

Thread ID:





129211 Mar 5,2017 10:07 AM UTC Mar 13,2017 04:26 AM UTC WPF 3
Tags: SfAccordion
Phil Brown
Asked On March 5, 2017 10:07 AM UTC

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 [Syncfusion]
Replied On March 6, 2017 11:08 AM UTC

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. 
<!--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" > 
VerticalAlignment="Stretch" Background="{StaticResource MouseHovercolor}" 
BorderBrush="{TemplateBinding BorderBrush}" 
BorderThickness="{TemplateBinding BorderThickness}"/> 
<!--Code used to changed the foreground color on MouseHover--> 
<ColorAnimation To="{Binding Source={StaticResource ExpandedStroke},Path=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}"/> 
Please try this solution and let us know if it helps.

Vijayalakshmi V.R.


Phil Brown
Replied On March 12, 2017 03:04 PM UTC

Hi Vijayalakshmi,

That's just what I was looking for and does the job.
Thanks for your swift reply.

Vijayalakshmi Roopkumar [Syncfusion]
Replied On March 13, 2017 04:26 AM UTC

Hi Phil,

Thank you for the update.

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

Vijayalakshmi V.R.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon