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
close icon

How to customize the AccordionButton?

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.

3 Replies

VR Vijayalakshmi Roopkumar Syncfusion Team 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.


PB Phil Brown 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.

VR Vijayalakshmi Roopkumar Syncfusion Team 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.

Live Chat Icon For mobile
Up arrow icon