CODEWITHSUNDEEP
.netxamarinxamarin.formsmaui
IbranKhan
IbranKhan

Reputation: 15

Tabs in not appearing in MainPage .net maui

Here's my AppShell.xaml

    <?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="DemoApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:DemoApp"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage"/>

    <TabBar Route="MainPage">
        <Tab Title="Dashboard">
            <ShellContent Icon="DashboardTabIcon.png" ContentTemplate="{DataTemplate local:tab1}"/>
        </Tab>
        <Tab Title="SecondTab">
            <ShellContent Icon="SecondTabIcon.png" ContentTemplate="{DataTemplate local:tab1}"/>
        </Tab>
    </TabBar>
</Shell>

I am expecting that bottom tabbar should appear on my MainPage but it is not happening. What should i do ? Any .Net Maui Developer here. Kindly guide me.

Upvotes: 1

Views: 1379

Answers (1)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13899

but When i navigate MainPage to HomePage (HomePage tabs not appearing)

I created a demo and achieved this function, you can refer to the following code.

1.Define your pages in AppShell.xaml and add Route for your pages(for example, add Route="home" for the TabBar), just as follows:

<?xml version="1.0" encoding="UTF-8" ?> 
<Shell
    x:Class="MauiApp820.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp820"
    xmlns:views="clr-namespace:MauiApp820.Views"
    Shell.FlyoutBehavior="Disabled">

    <ShellItem Route="main">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </ShellItem>

    <TabBar  Title="home"
             Route="home"
            >

        <Tab Title="Dashboard" Icon="cat.png">
            <ShellContent 
                ContentTemplate="{DataTemplate views:TabPage1}" />
        </Tab>
        <Tab Title="SecondTab" Icon="dog.png">
            <ShellContent 
                ContentTemplate="{DataTemplate views:TabPage2}" />
        </Tab>
    </TabBar>

</Shell>

2.add a Button on page MainPage and add a click event, if we click the button, then it will navigate to the HomePage tabs.

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

      private async void Button_Clicked(object sender, EventArgs e)
      {  
          // naviagte to Home Tabbar
            await Shell.Current.GoToAsync("//home");

      }
}

3.App.xaml.cs

public partial class App : Application 
{
      public App()
      {
            InitializeComponent();

            MainPage = new AppShell();

      }
}

Note:

This is similar to the often discussed Login problem in the shell, you can refer to thread: whats-the-correct-way-to-implement-login-page-in-shell. Although this is based on Xamarin, the same applies to MAUI.

Upvotes: 2

Related Questions