Icon in Accordion Header

1 Answer 135 Views
Accordion
Josh
Top achievements
Rank 1
Josh asked on 18 Oct 2023, 08:15 PM

Is it possible to add an icon or any other controls (like a second label perhaps) to the Header of an Accordion? Or are they limited to only have a single label and the arrow symbol?

Thanks,

-Josh

1 Answer, 1 is accepted

Sort by
1
Accepted
Yana
Telerik team
answered on 19 Oct 2023, 02:15 PM

Hi Josh,

Instead of using the HeaderText property of the AccordionItem you can use Header and assign an AccordionItemHeader to it. Inside the AccordioItemHeader you can add any content of your choice.

Check below a simple example:

 <telerik:RadAccordion x:Name="accordion" Grid.Row="5">
     <telerik:AccordionItem IsExpanded="True"
                          BorderColor="LightBlue"
                          BorderThickness="2">
         <telerik:AccordionItem.Header>
             <telerik:AccordionItemHeader                                              
                         IndicatorColor="Blue"                                         
                         IndicatorFontSize="16"
                         IndicatorLocation="End"                                           
                         BorderColor="LightBlue"
                         BorderThickness="2">
                 <HorizontalStackLayout>
                     <Label Text="Settings" Margin="8" />
                     <telerik:RadCheckBox />
                 </HorizontalStackLayout>
             </telerik:AccordionItemHeader>
         </telerik:AccordionItem.Header>
         <telerik:AccordionItem.Content>
             <StackLayout Margin="10, 20, 10, 20">
                
             </StackLayout>
         </telerik:AccordionItem.Content>
     </telerik:AccordionItem>
 </telerik:RadAccordion>

Please give it a try and let me know if you have any additional questions on this.

Regards,
Yana
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Josh
Top achievements
Rank 1
commented on 23 Oct 2023, 10:35 PM

Thank you. That is exactly what I was looking for. Adding any arbitrary controls inside the header section. Perfect.
Tags
Accordion
Asked by
Josh
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or