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.
Unfortunately, activation email could not send to your email. Please try again.

How to customize the AccordionButton?

Thread ID:

Created:

Updated:

Platform:

Replies:

129211 Mar 5,2017 05:07 AM Mar 13,2017 12:26 AM WPF 3
loading
Tags: SfAccordion
Phil Brown
Asked On March 5, 2017 05:07 AM

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 06:08 AM

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: 
   
  
Please try this solution and let us know if it helps.

Regards,
Vijayalakshmi V.R.

 


Phil Brown
Replied On March 12, 2017 11:04 AM

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 12:26 AM

Hi Phil,

Thank you for the update.

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

Regards,
Vijayalakshmi V.R.

CONFIRMATION

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.

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.

;