How to bring the entire item to view when the Expander (SfExpander) is expanding in .NET MAUI ListView (SfListView)?

You can bring the entire ListViewItem into view when expanding the SfExpander in .NET MAUI ListView. This ensures a smooth user experience by making the expanded content fully visible.

C#

The ExtendedExpander class helps bring the entire item into view. You can obtain the index of the item from the DataSource.DisplayItems. In the Expanded event, use the ScrollToRowIndex method to make the item visible.

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);

        ListView.Dispatcher.Dispatch(async () =>
        {
            await Task.Delay(200);
            ListView.ItemsLayout.ScrollToRowIndex(itemIndex, 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://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander"   
             xmlns:sflistview="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             xmlns:local="clr-namespace:ExpanderMAUI"
             x:Class="ExpanderMAUI.MainPage">
    <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,  WinUI=0}" Margin="{OnPlatform Android=1, iOS=1,  WinUI=0}"  HasShadow="{OnPlatform Android=true, iOS=false, WinUI=true}">
                            <Grid Padding="{OnPlatform Android=2, iOS=2, WinUI=0}" Margin="{OnPlatform Android=1, iOS=1,  WinUI=0}" BackgroundColor="Red" HeightRequest="50" >
                                <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>

Download the complete sample on GitHub

Conclusion

I hope you enjoyed learning how to bring the entire item to view when the Expander expands in .NET MAUI ListView.

You can refer to our .NET MAUI Expander feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

Check out our components from the License and Downloads page for current customers. 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!