How to Maintain Expanded Item in .NET MAUI Accordion?

This article illustrates use multiple controls to maintain a persistently expanded item in .Net MAUI Accordion. In this example, we will see how to use multiple controls to maintain a persistently expanded item.

Initialize the SfAccordion with the required properties. To ensure a specific item remains expanded across multiple controls in .NET MAUI Accordion, you can use the Expanding event to handle this behavior.

XAML

 <ContentPage.BindingContext>
        <local:RulebookViewModel />
    </ContentPage.BindingContext>
    <StackLayout>
        <syncfusion:SfAccordion>
            <syncfusion:SfAccordion.Items>
                <syncfusion:AccordionItem HeaderBackground="Red">
                    <syncfusion:AccordionItem.Header>
                        <Grid  HeightRequest="48">
                            <Label Text="2025"
                                   Margin="16,14,0,14"
                                   CharacterSpacing="0.25"
                                   FontFamily="Roboto-Regular"
                                   FontSize="14" />
                        </Grid>
                    </syncfusion:AccordionItem.Header>
                    <syncfusion:AccordionItem.Content>
                        <StackLayout>
                            <Label Text="Rule Book" />
                        </StackLayout>
                    </syncfusion:AccordionItem.Content>
                </syncfusion:AccordionItem>
            </syncfusion:SfAccordion.Items>
        </syncfusion:SfAccordion>
        <syncfusion:SfAccordion  x:Name="accordion" Expanding="accordion_Expanding" ExpandMode="Single"
                             BindableLayout.ItemsSource="{Binding RulebookGroups}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <syncfusion:AccordionItem IsExpanded="{Binding IsCurrent}" HeaderBackground="AntiqueWhite">
                        <syncfusion:AccordionItem.Header>
                            <Grid  HeightRequest="48">
                                <Label Text="{Binding Year}"
                                   Margin="16,14,0,14"
                                   CharacterSpacing="0.25"
                                   FontFamily="Roboto-Regular"
                                   FontSize="14" />
                            </Grid>
                        </syncfusion:AccordionItem.Header>
                        <syncfusion:AccordionItem.Content>
                            <CollectionView ItemsSource="{Binding Rulebooks}">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <StackLayout Background="Aqua">
                                            <Label Text="{Binding .}" />
                                        </StackLayout>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </syncfusion:AccordionItem.Content>
                    </syncfusion:AccordionItem>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </syncfusion:SfAccordion>
    </StackLayout>
 

XAML.CS

In the expanding event, when you try to open a section in the accordion, this code verifies if that section is flagged as the current one. If so, it stops the section from expanding.

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void accordion_Expanding(object sender, Syncfusion.Maui.Accordion.ExpandingAndCollapsingEventArgs e)
        {
            if (((sender as SfAccordion)!.BindingContext as RulebookViewModel)!.RulebookGroups[e.Index].IsCurrent)
            {
                e.Cancel = true;
            }
        }
    }

ViewModel

public class RulebookViewModel
{
    public ObservableCollection<YearGroup> RulebookGroups { get; set; }
 
    public RulebookViewModel()
    {
        var currentYear = DateTime.Now.Year;
 
        RulebookGroups = new ObservableCollection<YearGroup>
            {
                new YearGroup
                {
                    Year = currentYear - 1,
                    IsCurrent = false,
                    Rulebooks = new ObservableCollection<string> { "Rulebook v1" }
                },
                new YearGroup
                {
                    Year = currentYear - 2,
                    IsCurrent = false,
                    Rulebooks = new ObservableCollection<string> { "Rulebook v1" }
                },
                new YearGroup
                {
                    Year = currentYear - 3,
                    IsCurrent = true,
                    Rulebooks = new ObservableCollection<string> { "Rulebook v1", "Rulebook v2" }
                }
            };
    }
}

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to use multiple controls to maintain a persistently expanded item in .Net MAUI Accordion.
You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!