Articles in this section
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

Using ClassId in AccordionItem

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied