How to Manage Content Pages within a .NET MAUI TabView?

This article provides guidance on managing navigation and toolbar items in .NET MAUI TabView. When using the .NET MAUI TabView to display ContentPage content within each tab, it is essential to preserve the navigation context and dynamically manage toolbar items. This article provides a solution to ensure seamless navigation between pages and proper toolbar item visibility when switching between tabs.

To enable navigation from ContentPage inside a .NET MAUI TabView, implement a custom solution that retains the navigation context.

public class CustomTabItem : SfTabItem
{
    public static readonly BindableProperty PageProperty =
        BindableProperty.Create(nameof(Page), typeof(ContentPage), typeof(CustomTabItem), null, propertyChanged: OnPagePropertyChanged);

    private static INavigation? _pageNavigation;

    public ContentPage Page
    {
        get => (ContentPage)GetValue(PageProperty);
        set => SetValue(PageProperty, value);
    }

    public CustomTabItem()
    {
    }

    private static void OnPagePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var tabItem = bindable as CustomTabItem;
        if (tabItem != null)
        {
            var contentPage = newValue as ContentPage;
            tabItem.Content = contentPage?.Content;

            // Store the navigation context
            _pageNavigation = Application.Current?.MainPage?.Navigation;
            if (tabItem.Content != null && contentPage?.BindingContext != null)
            {
                tabItem.Content.BindingContext = contentPage.BindingContext;
            }
        }
    }

    public static INavigation? GetNavigation()
    {
        return _pageNavigation;
    }
}

In the above code, a static field _pageNavigation stores the navigation context from the MainPage. The GetNavigation method provides access to this context, enabling navigation actions like PushAsync to function correctly.

XAML

Create different content pages that you need to display as a Tab Item. For example like below,

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabViewMaui.TabPage1"
             Title="TabPage1">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Help"/>
    </ContentPage.ToolbarItems>
    
     <ContentPage.Content>
         <!-- Implement your content here -->
     </ContentPage.Content>
</ContentPage>

Initialize the .NET MAUI TabView control:

<tabView:SfTabView x:Name="tabView" SelectionChanged="OnSelectionChanged" >

    <tabView:SfTabView.Items>
        <local:CustomTabItem x:Name="call" Header="Call" >
            <local:CustomTabItem.Page>
                <local:TabPage1/>
            </local:CustomTabItem.Page>
        </local:CustomTabItem>

        <!-- Add more tab items as needed -->

    </tabView:SfTabView.Items>
</tabView:SfTabView>

C#

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        UpdateToolbar();
    }

    private void OnSelectionChanged(object sender, TabSelectionChangedEventArgs e)
    {
        UpdateToolbar();
    }

    private void UpdateToolbar()
    {
        // Clear existing toolbar items
        ToolbarItems.Clear();

        if (tabView is not null && tabView?.Items is not null && tabView.SelectedIndex >= 0 &&
            tabView.Items[(int)tabView.SelectedIndex] is CustomTabItem currentTab &&
            currentTab.Page is ContentPage page)
        {
            // Update title
            Title = page.Title;

            // Add toolbar items if they exist
            if (page.ToolbarItems?.Any() == true)
            {
                foreach (var item in page.ToolbarItems)
                {
                    // Detach any existing event handlers to prevent duplicate bindings
                    item.Clicked -= OnItemClicked;

                    // Attach the MainPage event handler
                    item.Clicked += OnItemClicked;

                    // Add the toolbar item to MainPage
                    ToolbarItems.Add(item);
                }
            }
        }
    }

    private void OnItemClicked(object? sender, EventArgs e)
    {
        if (sender is ToolbarItem toolbarItem)
        {
            // Handle the click event for the toolbar item
            DisplayAlert("Toolbar Clicked", $"Toolbar item '{toolbarItem.Text}' clicked in MainPage", "OK");
            
            // You can add additional navigation or logic here
            if (toolbarItem.Text == "Help")
            {
                Navigation.PushAsync(new HelpPage());
            }
        }
    }
}

Toolbar Management

OnSelectionChanged: This method triggers the UpdateToolbar method when the selected tab changes, ensuring that the toolbar items are updated based on the ContentPage of the selected tab.

UpdateToolbar: It clears any existing toolbar items in the MainPage, retrieves the toolbar items from the selected tab’s ContentPage, and updates the MainPage toolbar accordingly. Event handlers are detached from previous items to prevent duplicate events, and new items are added.

OnItemClicked: Handles toolbar item click events, allowing for additional actions such as navigation or other logic when a toolbar item is clicked.

Output

Download the complete sample from the GitHub

Conclusion

I hope you enjoyed learning how to manage content pages within a .NET MAUI TabView.

You can refer to our .NET MAUI Tab View feature tour page to know about its other groundbreaking feature representations and documentation , and how to quickly get started for configuration specifications. You can also explore our .NET MAUI TabView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Download page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!