Skip to content

This repository contains sample about how to work with Accordion with SfListView in Xamarin.Forms (SfAccordion)

Notifications You must be signed in to change notification settings

SyncfusionExamples/accordion-with-listview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to work with Accordion with SfListView in Xamarin.Forms (SfAccordion)

You can add SfListView as the Content of SfAccordion in Xamarin.Forms.

You can also refer the following article.

https://www.syncfusion.com/kb/11448/how-to-work-with-accordion-with-sflistview-in-xamarin-forms-sfaccordion

XAML

Adding SfListView as Content to SfAccordion.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AccordionXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms"
             xmlns:sfListView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:converter="clr-namespace:AccordionXamarin.Converter"
             x:Class="AccordionXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}">

    <ContentPage.BindingContext>
        <local:ItemInfoRepository/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <converter:HeightConverter x:Key="HeightConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <ContentPage.Content>
        <syncfusion:SfAccordion x:Name="OuterAccordion" ExpandMode="SingleOrNone" Margin="5" BindableLayout.ItemsSource="{Binding Info}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <syncfusion:AccordionItem x:Name="AccordionItem">
                        <syncfusion:AccordionItem.Header>
                            <Grid HeightRequest="50" RowSpacing="0">
                                <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                            </Grid>
                        </syncfusion:AccordionItem.Header>
                        <syncfusion:AccordionItem.Content>
                            <sfListView:SfListView x:Name="listView" HeightRequest="{Binding Varieties, Converter={StaticResource HeightConverter}, ConverterParameter={x:Reference listView}}" ItemSize="50" ItemsSource="{Binding Varieties}" ItemSpacing="1">
                                <sfListView:SfListView.ItemTemplate>
                                    <DataTemplate>
                                       ...
                                    </DataTemplate>
                                </sfListView:SfListView.ItemTemplate>
                            </sfListView:SfListView>
                        </syncfusion:AccordionItem.Content>
                    </syncfusion:AccordionItem>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </syncfusion:SfAccordion>
    </ContentPage.Content>
</ContentPage>

C#

Converter class to return height based on items and SfListView.ItemsSize.

namespace AccordionXamarin.Converter
{
    public class HeightConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var listView = parameter as SfListView;
            var items = value as ObservableCollection<Variety>;
            return items.Count * listView.ItemSize;
        }
    }
}

Output

AccordionWithListView

About

This repository contains sample about how to work with Accordion with SfListView in Xamarin.Forms (SfAccordion)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages