How to work with ListView (SfListView) and Expander (SfExpander) in Xamarin.Forms

1 min read

You can load the SfListView with SfExpander in Xamarin.Forms.

Extend the SfListView to load the ListView based on the items height. Trigger the PropertyChanged event for VisualContainer and set HeightRequest for ListView using the TotalExtent value.

public class ExtendedListView : SfListView
{
    VisualContainer container;
 
    public ExtendedListView()
    {
        container = this.GetVisualContainer();
        container.PropertyChanged += Container_PropertyChanged;
    }
 
    private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        Device.BeginInvokeOnMainThread(async () =>
        {
            var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container);
            await Task.Delay(250); 
            if (e.PropertyName == "Height")
                this.HeightRequest = extent;
        });
    }
}

XAML

Load the ExtendedListView inside the Expander.Content.

<ScrollView>
    <StackLayout>
        <expander:SfExpander DynamicSizeMode="Content" HeaderIconPosition="End" IconColor="WhiteSmoke" HeaderBackgroundColor="#03506f" >
            <expander:SfExpander.Header>
                <Grid HeightRequest="50">
                    <Label Text="InBox" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                </Grid>
            </expander:SfExpander.Header>
            <expander:SfExpander.Content>
                <extListView:ExtendedListView x:Name="listView" ItemsSource="{Binding InboxInfo}" ItemSpacing="1" AutoFitMode="DynamicHeight">
                    <extListView:ExtendedListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="10,0,0,0" HeightRequest="70" BackgroundColor="White">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="100"/>
                                </Grid.ColumnDefinitions>
                                <Grid HorizontalOptions="StartAndExpand">
                                    <Label LineBreakMode="NoWrap" TextColor="#474747" FontSize="18" Text="{Binding Title}" VerticalOptions="Center"/>
                                    <Label LineBreakMode="NoWrap" TextColor="#474747" Grid.Row="1" Text="{Binding Subject}" FontSize="16" VerticalOptions="Center"/>
                                </Grid>
                                <Label TextColor="#474747" HorizontalOptions="EndAndExpand" Padding="5,10,5,10" Grid.Column="1" LineBreakMode="NoWrap" Text="{Binding Date}" FontSize="12"/>
                            </Grid>
                        </DataTemplate>
                    </extListView:ExtendedListView.ItemTemplate>
                </extListView:ExtendedListView>
            </expander:SfExpander.Content>
        </expander:SfExpander>
    </StackLayout>
</ScrollView>

View sample in GitHub

Demo image to load SfListView inside SfExpander in Xamarin.Forms

Did you find this information helpful?

Yes

How to work with ListView (SfListView) and Expander (SfExpander) in Xamarin.Forms

Access denied