How to load the ListView within TabView in .NET MAUI?

The .NET MAUI ListView (SfListView) can be easily integrated within the .NET MAUI TabView (SfTabView). This guide will demonstrate how to achieve this setup effectively.

XAML

Create a separate XAML file for the SfListView to encapsulate its configuration.

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiListView" 
             xmlns:sync="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             x:Class="MauiListView.BookPage">

    <sync:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="100">
        <sync:SfListView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.4*" />
                        <RowDefinition Height="0.6*" />
                    </Grid.RowDefinitions>
                    <Label x:Name="label" Text="{Binding BookName}" FontSize="21" FontAttributes="Bold" />
                    <Label Grid.Row="1" Text="{Binding BookDescription}" FontSize="15" />
                </Grid>
            </DataTemplate>
        </sync:SfListView.ItemTemplate>
    </sync:SfListView>
</ContentView>

XAML

Configure the SfTabView in your MainPage.xaml to include the ListView.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
             xmlns:local="clr-namespace:MauiListView"
             x:Class="MauiListView.MainPage">

    <tabView:SfTabView  TabBarBackground="#dddddd">
        <tabView:SfTabItem Header="Books">
            <tabView:SfTabItem.Content>
                <local:BookPage/>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <tabView:SfTabItem Header="Inbox">
            <tabView:SfTabItem.Content>
                <local:InboxPage/>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <tabView:SfTabItem Header="Contacts">
            <tabView:SfTabItem.Content>
                <local:ContactPage/>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
    </tabView:SfTabView>

</ContentPage>

Output

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to load the SfListview within SfTabview in .NET MAUI.

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

You can 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 below 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!