How to load a content page into a Tab Page in .NET MAUI Tab View?
The Syncfusion® .NET MAUI Tab View control provides a simple interface for tab page navigation, where each tab can contain the content of a .NET MAUI content page or any other page. This guide explains how to load a .NET MAUI page into the .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.
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 that inherits from the SfTabItem class within the Syncfusion.Maui.TabView namespace and declare the Page property.
C#
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: In MainPage.xaml, add the namespaces for the SfTabView control and the custom control you've created. Initialize the Tab View and add the custom controls.
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>
Output:
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to load a content page into a tab page within .NET MAUI Tab View.
You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data. You can check out our .NET MAUI 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 .NET MAUI Tab View and other .NET MAUI components. Please let us know in the comments if you've any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
