Remove or change mouse over/ hover color of SfAccordion

[Dodzi]

Hello, how do i change or remove the color of the accordion item? Also, is it possible to move the arrow to the left side instead?

Regards

[Vijayalakshmi Roopkumar]

Hi Dodzi, 

 

Thank you for contacting Syncfusion Support 

 

Query : Hello, how do i change or remove the color of the accordion item? Also, is it possible to move the arrow to the left side instead? 

 

From your update, we could understand that you want to change the background, MouseOverColor for SfAccordionItem and also want to move the arrow to the left side of control.  To change the background for the SfAccordionItem, the AccentBrush property will be used. However to change the Mouseover color and position of arrow,  we need to override the SfAccordion Template. In our SfAccordion, we are maintaining the Grid for setting the Background for each state in SfAccordionButton. To customize the Background of SfAccordionButton on MouseHover, edit the Background property of the MouseOverBackground Grid to apply desired Hover Color and change the column value for the Grid which contained the arrow path for changing the position. Please find the code for the same from following: 

 

App.xaml 

 

 

<!--  Changing background for SfAccordionItem  --> 

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

<Border 

VerticalAlignment="Stretch" 

Background="Yellow" 

BorderBrush="{TemplateBinding BorderBrush}" 

BorderThickness="{TemplateBinding BorderThickness}" /> 

</Grid> 

 

 

 

Also the path has been maintained in Grid, so changing the column definition will change the position of Arrow in SfAccordionItems. 

 

App.xaml 

 

 

<!--  Changed the Column Value,before the Grid.Column value is 1  --> 

<Grid 

x:Name="icon" 

Grid.Row="0" 

Grid.Column="0" 

Width="19" 

Height="19" 

Margin="-10,0,0,0"   

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Background="Transparent" 

RenderTransformOrigin="0.5,0.5"> 

<Grid.RenderTransform> 

<TransformGroup> 

<ScaleTransform /> 

<SkewTransform /> 

<RotateTransform Angle="-90" /> 

<TranslateTransform /> 

</TransformGroup> 

</Grid.RenderTransform> 

<Path 

x:Name="arrow" 

Width="12" 

Height="12" 

HorizontalAlignment="Center" 

VerticalAlignment="Center" 

Data="F1M568.254,-7.43524L568.159,-7.34277 567.977,-7.52246 546.559,-28.9417 525.484,-28.9417 549.787,-4.63446 557.439,3.01532 557.619,3.19629 550.067,10.7549 525.758,35.0583 546.834,35.0583 568.254,13.6429 578.792,3.10254 568.254,-7.43524z" 

Fill="{StaticResource ExpandedStroke}" 

RenderTransformOrigin="0.5,0.5" 

Stretch="Uniform" /> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/158218/ze/SfAccordionCustomization1466539681 

 

Before Customization 

 

 

 

After  customization 

 

 

 

 

Please try this solution and let us know if it is helpful. 

 

Regards, 

Vijayalakshmi VR