1. Home
  2. Forum
  3. UWP
  4. Can we customize the Accordion Header Arrow Icon?

Can we customize the Accordion Header Arrow Icon?

Hi,

We'd like to customize the header icon with + & - icons instead of Arrow.

Please let me know how to do that. 

Thanks,



7 Replies
KS Kayalvizhi Sivashanmugam Syncfusion Team July 19, 2022 03:34 PM UTC

Hi Sidhartha,

We are validating your query and will update you with the details on or before July 20, 2022.

Regards,
Kayalvizhi S


KS Kayalvizhi Sivashanmugam Syncfusion Team July 21, 2022 11:29 AM UTC

Hi Sidhartha,


We prepared the simple sample based on your requirement "customize the the header icon with + & - icons instead of Arrow". Kindly get it from the attachment.


Regards,

Kayalvizhi


Attachment: AccordionButtonStyle_b15b79c7.zip

SI sidhartha July 22, 2022 08:08 AM UTC

Thank You very much. It helped me a lot. Now I can customize it as I needed.


SI sidhartha July 22, 2022 06:43 PM UTC

One more request,

I also want to hide those icons when no expandable content is not there.

Please let me know how to do that. 

Thanks,


KS Kayalvizhi Sivashanmugam Syncfusion Team July 25, 2022 07:06 AM UTC

Hi Sidhartha,

Based on your requirements, we have prepared a sample in which we have handled the visibility of the icon based on the content that is present in the accordion item. Please get it from the attachment.

Regards,
Kayalvizhi S




Attachment: AccordionButtonStyle_9e116895.zip

SI sidhartha August 10, 2022 06:48 AM UTC

Hi,

Thanks for your response.

But the sample that you provided for hiding the icons is not getting helpful for my scenario.

Here are the list of requirements [Help needed]:

  • Foreground color is not getting applied for the Header
  • When no expandable content is there, then I want to hide the expandable icons (your previous sample in the same thread is not helpful)

  • I need support for TriStateChecking with Recursive checking for the Checkbox controls similar to SfTreeGrid.
image_4.png

PFA the attached working sample and please help me out for the above mentioned scenarios.

Thanks,
K Rama Krishna Sidhartha


Attachment: Syncfusion.SfAccordion.UWP.Sample_79e64b91.zip


KS Kayalvizhi Sivashanmugam Syncfusion Team August 12, 2022 04:34 AM UTC


Hi Rama Krishna Sidhartha,

Query #1: Foreground color is not getting applied for the Header


As MS CheckBox doesn't update the Foreground color, we suggest you to use TextBlock with checkbox and set its Foreground.

Code:

<CheckBox IsThreeState="True">

<TextBlock Text="{Binding GroupName,                UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"  Foreground="Red"/>                        

</CheckBox>






Query #2 : When no expandable content is there, then I want to hide the expandable icons

We modified your sample based on your requirement. You can find the demo and screen shots below.

Screenshot:

image


Query #3:  Need support for TriStateChecking with Recursive checking for the Checkbox controls similar to SfTreeGrid.

We suggest you to use IsThreeState Property as true in UWP Checkbox and define the logic in code behind.


Regards,

Kayalvizhi S


Attachment: Syncfusion.SfAccordion.UWP.Sample_79e64b91_(2)_6247751f.zip

Loader.
Up arrow icon