How to bring the entire item to view when the Expander (SfExpander) is expanding in Xamarin.Forms ListView (SfListView)

1 min read

You can bring the entire ListViewItem to the view when expanding the SfExpander in Xamarin.Forms SfListView. You can refer to the documentation without the expander from here.

The ExtendedExpander is used to bring the entire item to the View. You can get the index of the item from the DataSource.DisplayItems. In the Expanded event, you can bring the item to view using the ScrollToRowIndex method.

namespace ExpanderXamarin
{
    public class ExtendedExpander: SfExpander
    {
        public SfListView ListView { get; set; }
 
        public ExtendedExpander()
        {
            this.Expanded += ExtendedExpander_Expanded;
        }
 
        private void ExtendedExpander_Expanded(object sender, ExpandedAndCollapsedEventArgs e)
        {
            var item = (sender as SfExpander).BindingContext as Contact;
            var itemIndex = ListView.DataSource.DisplayItems.IndexOf(item);
 
            Device.BeginInvokeOnMainThread(async () =>
            {
                await Task.Delay(200);
                ListView.LayoutManager.ScrollToRowIndex(itemIndex, Syncfusion.ListView.XForms.ScrollToPosition.MakeVisible, false);
            });
        }
    }
}

XAML

The ExtendedExpander is loaded in the SfListView.ItemTemplate. Also, set the ListView reference to the Expander to perform scrolling.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ExpanderXamarin"
             x:Class="ExpanderXamarin.ExpandableListView"
             xmlns:sflistview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
 
    <ContentPage.BindingContext>
        <local:ViewModel />
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <Grid x:Name="mainGrid" BackgroundColor="#F0F0F0" Padding="4">
            <sflistview:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemsSource="{Binding ContactsInfo}">
                <sflistview:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Frame x:Name="frame" CornerRadius="2" Padding="{OnPlatform Android=1, iOS=1,  UWP=0}" Margin="{OnPlatform Android=1, iOS=1,  UWP=0}" OutlineColor="White" HasShadow="{OnPlatform Android=true, iOS=false, UWP=true}">
                            <Grid Padding="{OnPlatform Android=2, iOS=2, UWP=0}" Margin="{OnPlatform Android=1, iOS=1,  UWP=0}" BackgroundColor="White" >
                                <local:ExtendedExpander x:Name="expander" ListView="{x:Reference listView}" HeaderIconPosition="None" IsExpanded="{Binding IsExpanded, Mode=TwoWay}">
                                    <local:ExtendedExpander.Header>
                                        ...
                                    </local:ExtendedExpander.Header>
                                    <local:ExtendedExpander.Content>
                                        ...
                                    </local:ExtendedExpander.Content>
                                </local:ExtendedExpander>
                            </Grid>
                        </Frame>
                    </DataTemplate>
                </sflistview:SfListView.ItemTemplate>
            </sflistview:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

View sample in GitHub

Demo to bring the item when expanding the expander in Xamarin.Forms.

Did you find this information helpful?

Yes

Comments

How to bring the entire item to view when the Expander (SfExpander) is expanding in Xamarin.Forms ListView (SfListView)

Access denied