This article guides managing navigation and toolbar items in .NET MAUI Tab View. When using the .NET MAUI Tab View 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 Tab View, 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 Tab View 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 GitHub. Conclusion I hope you enjoyed learning how to manage content pages within a .NET MAUI Tab View. 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 with configuration specifications. Explore our .NET MAUI Tab View example to understand how to create and manipulate data. For current customers, our components are available on the License and Download page. If you are new to Syncfusion®, try our 30-day free trial to try our other controls. Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
To load different content pages as Tab items content in the .NET MAUI TabView, follow the given steps: Step 1: Create a new sample in the .NET MAUI and initialize TabView within the page with BindingContext. Step 2: Create a ViewModel class for assigning created content pages in the observable collection. Give the proper name for the observable collection and add the content pages to that collection. XAML <ContentPage.BindingContext> <local:ViewModel/> </ContentPage.BindingContext> <tabView:SfTabView Items="{Binding Items}"/> C# public class ViewModel : INotifyPropertyChanged { private TabItemCollection items; public event PropertyChangedEventHandler PropertyChanged; public TabItemCollection Items { get { return items; } set { items = value; OnPropertyChanged("Items"); } } protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } public ViewModel() { SetItems(); } internal void SetItems() { Items = new TabItemCollection(); TabViewPage1 page1 = new TabViewPage1(); TabViewPage2 page2 = new TabViewPage2(); TabViewPage3 page3 = new TabViewPage3(); TabViewPage4 page4 = new TabViewPage4(); Items.Add(new SfTabItem { Content = page1.Content, Header = "Page1" }); Items.Add(new SfTabItem { Content = page2.Content, Header = "Page2" }); Items.Add(new SfTabItem { Content = page3.Content, Header = "Page3" }); Items.Add(new SfTabItem { Content = page4.Content, Header = "Page4" }); } } Output Download the complete sample in GitHub Conclusion Hope you enjoyed learning about how to load different content page as Tab items content in the .NET MAUI TabView (SfTabView). You can refer to our .NET MAUI Tab View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components. 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!
