Category / Section
How to get an AccordionItem in Xamarin.Forms (SfAccordion)
1 min read
You can get which AccordionItem is expanded or collapsed using ClassId in Xamarin.Forms.
XAML
Binding ClassId in AccordionItem
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms" x:Class="AccordionXamarin.MainPage”> <ContentPage.Content> <syncfusion:SfAccordion x:Name="Accordion" ExpandMode="SingleOrNone" Margin="5" BindableLayout.ItemsSource="{Binding Info}"> <syncfusion:SfAccordion.Behaviors> <local:Behavior/> </syncfusion:SfAccordion.Behaviors> <BindableLayout.ItemTemplate> <DataTemplate> <syncfusion:AccordionItem x:Name="AccordionItem" ClassId="{Binding ClassID}"> <syncfusion:AccordionItem.Header> <Grid HeightRequest="50"> <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/> </Grid> </syncfusion:AccordionItem.Header> <syncfusion:AccordionItem.Content> <Grid Padding="5" BackgroundColor="NavajoWhite"> <Label Text="{Binding Description}"/> </Grid> </syncfusion:AccordionItem.Content> </syncfusion:AccordionItem> </DataTemplate> </BindableLayout.ItemTemplate> </syncfusion:SfAccordion> </ContentPage.Content> </ContentPage>
C#
Perform operation based on ClassId
namespace AccordionXamarin { public class Behavior : Behavior<SfAccordion> { SfAccordion Accordion; protected override void OnAttachedTo(SfAccordion bindable) { Accordion = bindable; Accordion.Expanded += Bindable_Expanded; Accordion.Collapsed += Bindable_Collapsed; base.OnAttachedTo(bindable); } private void Bindable_Expanded(object sender, ExpandedAndCollapsedEventArgs e) { var index = e.Index; var item = Accordion.Items[index]; if (item.ClassId =="Item1") { App.Current.MainPage.DisplayAlert("Informtion", "Accordion Item1 Expanded", "Ok"); } else if (item.ClassId == "Item2") { App.Current.MainPage.DisplayAlert("Informtion", "Accordion Item2 Expanded", "Ok"); } else if (item.ClassId == "Item3") { App.Current.MainPage.DisplayAlert("Informtion", "Accordion Item3 Expanded", "Ok"); } else if (item.ClassId == "Item4") { App.Current.MainPage.DisplayAlert("Informtion", "Accordion Item4 Expanded", "Ok"); } } private void Bindable_Collapsed(object sender, ExpandedAndCollapsedEventArgs e) { } protected override void OnDetachingFrom(SfAccordion bindable) { Accordion.Expanded -= Bindable_Expanded; Accordion.Collapsed -= Bindable_Collapsed; Accordion = null; base.OnDetachingFrom(bindable); } } }
Output