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. Image for the cookie policy date

Accordian header hover background

How can I change the background color of the accordion header when I hover over it with my mouse? Are there some resource keys I can override?

I can't find any documentation about it in the online documentation.


Also can I use these controls with Blend?

4 Replies

VV Vignesh V Syncfusion Team August 5, 2013 12:25 PM UTC

Hi Veeningen,

Query1:can I change the background color of the accordion header when I hover over it with my mouse?
We can Change the mouse hovering background for SfAccordion.We have prepared a sample to achieve your requirement of 'Changing the Header background while hovering with mouse'. In this sample we have modified the background of the SfAccorion header and defined new key 'Hovercolor' where we can change the color.

Query2:can I use these controls with Blend?

We can edit SfAccordion using blend. We had issues while editing in blend, it has been resolved and this fix will be available in our upcoming Service Pack Release.

Please find the attached sample in below link,

Please let us know if you have any queries.

Vignesh V

DB Denis Briel July 22, 2014 11:18 AM UTC

Could you please provide me with the AccordionHover sample project as well?

I am getting Access Denied when trying to download it!


TA Taher A. AlZahrani April 27, 2016 08:17 AM UTC


Could you re post the sample please.


VR Venkateshwaran Ramdoss Syncfusion Team April 28, 2016 01:34 PM UTC

Hi Taher,

We have change the MouseOver color for SfAccordionItem by customize the AccordionButtonStyle. In this style you can include the MouseHoverStroke, ExpandedStroke and CollapsedStroke VisualStateGroup to change the Background and Forground color. We have created a sample for the same, please download from below link.

Sample: AccordianHoverSample

Venkateshwaran V.R.

Live Chat Icon For mobile
Up arrow icon