How to load content page to tab page in .NET MAUI Tab view?

3 mins read

The Syncfusion .NET MAUI Tab View is an interface for tab page navigation where each tab contains the content of a .NET MAUI tab page or any page. This section explains how to load the .NET MAUI page to Syncfusion .NET MAUI Tab View.

Step 1: Create a .NET MAUI application project in Visual Studio 2022.

Step 2: Add the Syncfusion.Maui.TabView nuget to the project from nuget.org.

Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler as shown below.

Using C#:

using Syncfusion.Maui.Core.Hosting;
 
namespace LoadPageContentInSfTabView;
 
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore();
 
        return builder.Build();
    }
}

Step 4: Create a custom control and inherit the SfTabItem class using Syncfusion.Maui.TabView namespace, then declare the Page property as like below code snippet.

public class CustomTabItem : SfTabItem
{
    /// <summary>
    /// Identifies the <see cref="Page"/> bindable property.
    /// </summary>
    /// <value>
    /// The identifier for <see cref="Page"/> bindable property.
    /// </value>
    public static readonly BindableProperty PageProperty =
        BindableProperty.Create(nameof(Page), typeof(ContentPage), typeof(CustomTabItem), null, propertyChanged: OnPagePropertyChanged);
 
    /// <summary>
    /// Initializes a new instance of the <see cref="CustomTabItem"/> class.
    /// </summary>
    public CustomTabItem()
    {
    }
 
    /// <summary>
    /// Gets or sets the content page.
    /// </summary>
    /// <value>
    /// Specifies the content page of the custom tab item. The default value is null.
    /// </value>
    public ContentPage Page
    {
        get => (ContentPage)GetValue(PageProperty);
        set => SetValue(PageProperty, value);
    }
 
    /// <summary>
    /// Invoked when the <see cref="PageProperty"/> is set for the control.
    /// </summary>
    /// <param name="bindable">The bindable.</param>
    /// <param name="oldValue">The old value.</param>
    /// <param name="newValue">The new value.</param>
    private static void OnPagePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var page = bindable as CustomTabItem;
        if (page != null)
        {
            page.Content = (newValue as ContentPage).Content;
        }
    }
}

Step 5: Add the namespaces for the SfTabView control and created custom control to the MainPage.xaml. Then initialize the Tab view and the created custom control in the XAML page as like below code snippet.

XAML

<tabView:SfTabView>
    <tabView:SfTabView.Items>
        <control:CustomTabItem Header="Page1">
            <control:CustomTabItem.Page>
                <page:TabViewItemPage1 />
            </control:CustomTabItem.Page>
        </control:CustomTabItem>
 
        <control:CustomTabItem Header="Page2">
            <control:CustomTabItem.Page>
                <page:TabViewItemPage2 />
            </control:CustomTabItem.Page>
        </control:CustomTabItem>
 
        <control:CustomTabItem Header="Page3">
            <control:CustomTabItem.Page>
                <page:TabViewItemPage3 />
            </control:CustomTabItem.Page>
        </control:CustomTabItem>
 
        <control:CustomTabItem Header="Page4">
            <control:CustomTabItem.Page>
                <page:TabViewItemPage4 />
            </control:CustomTabItem.Page>
        </control:CustomTabItem>
    </tabView:SfTabView.Items>
</tabView:SfTabView>

You can explore the runnable demo from this Github location.

Output:

loaded content page to a tab page in .NET MAUI Tab View

Check the below links for more features in Syncfusion MAUI Tab View,

Did you find this information helpful?

Yes

Comments

How to load content page to tab page in .NET MAUI Tab view?

Access denied