How to bind ViewModel data to Accordion in Xamarin.Forms (SfAccordion)

1 min read

You can populate the Xamarin.Forms Accordion from ViewModel by using BindableLayout.ItemSource property.

Refer to the online user guide documentation for creating Accordion.

Creating the ViewModel to populate the Contacts property.

public class ViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ContactInfo> Contacts { get; set; }
    public Command<object> TapCommand { get; set; }
 
    public ViewModel()
    {
        Contacts = new ObservableCollection<ContactInfo>();
        TapCommand = new Command<object>(OnTapped);
        Contacts.Add(new ContactInfo() { Type = "A", Contacts = new ObservableCollection<Contact>() { new Contact() { ContactName = "Adam" }, new Contact { ContactName = "Aaron" } } });
        Contacts.Add(new ContactInfo() { Type = "B", Contacts = new ObservableCollection<Contact>() { new Contact() { ContactName = "Bolt" }, new Contact { ContactName = "Bush" } } });
        Contacts.Add(new ContactInfo() { Type = "C", Contacts = new ObservableCollection<Contact>() { new Contact() { ContactName = "Clark" }, new Contact { ContactName = "Clara" } } });
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    public void OnPropertyChanged(string name)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
}

XAML

Binding the ViewModel Contacts property to ItemSource for Accordion

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout>
        <syncfusion:SfAccordion x:Name="Accordion" BindableLayout.ItemsSource="{Binding Contacts}" ExpandMode="SingleOrNone" >
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <syncfusion:AccordionItem  >
                        <syncfusion:AccordionItem.Header >
                            <Grid HeightRequest="60">
                                <Label Text="{Binding Type}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                            </Grid>
                        </syncfusion:AccordionItem.Header>
                        <syncfusion:AccordionItem.Content>
                            <Grid x:Name="mainGrid" Padding="4" HeightRequest="135" >
                                <sflistview:SfListView AllowGroupExpandCollapse="True" IsScrollingEnabled="False" x:Name="listView" IsScrollBarVisible="False" AutoFitMode="DynamicHeight"
                                ItemSpacing="3" ItemsSource="{Binding Contacts}" >
                                    <sflistview:SfListView.ItemTemplate>
                                        <DataTemplate>
                                            <Grid HeightRequest="60" >
                                                <Label Text="{Binding ContactName}"/>
                                                <Grid.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Accordion}}" CommandParameter="{Binding .}" />
                                                </Grid.GestureRecognizers>
                                            </Grid>
                                        </DataTemplate>
                                    </sflistview:SfListView.ItemTemplate>
                                </sflistview:SfListView>
                            </Grid>
                        </syncfusion:AccordionItem.Content>
                    </syncfusion:AccordionItem>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </syncfusion:SfAccordion>
    </StackLayout>
</ContentPage.Content>

View sample in GitHub

Did you find this information helpful?

Yes

Comments (0)

How to bind ViewModel data to Accordion in Xamarin.Forms (SfAccordion)

Access denied