How To Expand Or Collapse Accordion Programmatically In Xamarin.Forms (Sfaccordion)

Sample date Updated on Sep 13, 2025
accordion expand-collapse manual xamarin xamarin-forms

You can programmatically expand or collapse the AccordionItem in Xamarin.Forms SfAccordion by binding the model property to AccordionItem.IsExpanded property.

You can also refer the following article.

https://www.syncfusion.com/kb/11314/how-to-expand-or-collapse-accordion-programmatically-in-xamarin-forms-sfaccordion

XAML

IsExpanded model property is bound to IsExpanded property of AccordionItem to expand or collapse when update property value programmatically.

<DataTemplate>
    <syncfusion:AccordionItem IsExpanded="{Binding IsExpand}">
        <syncfusion:AccordionItem.Header>
            <Grid HeightRequest="60">
                <Label Text="{Binding Name}" FontSize="Medium"/>
            </Grid>
        </syncfusion:AccordionItem.Header>
        <syncfusion:AccordionItem.Content>
            <Grid>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Label Text="{Binding Description}"/>
                    <Button x:Name="btn" Grid.Row="1" Text="{Binding Name}" Command="{Binding Path=BindingContext.ButtonCommand, Source={x:Reference Accordion}}" CommandParameter="{x:Reference btn}"/>
                </Grid>
            </Grid>
        </syncfusion:AccordionItem.Content>
    </syncfusion:AccordionItem>
</DataTemplate>

C#

OnExpandCollapse is used to change the IsExpand property to expand or collapse the item.

public class ItemInfoRepository
{
    public Command<object> ExpandCollapse{ get; set; }

    public ItemInfoRepository()
    {
        ExpandCollapse= new Command<object>(OnExpandCollapse);
    }

    private void OnExpandCollapse (object obj)
    {
        var item = (obj as Button).BindingContext as ItemInfo;
        item.IsExpand = !item.IsExpand;
    }
}
Up arrow