Unable to create .net maui AppShell ShellItem and TabBar using C# markup

Question

I have an app in .NET MAUI with XAML for the UI. I converted all the XAML to C# markup except for the AppShell. A sample of what I want to convert is below:

<ShellItem Route="LoginPage">
        <ShellContent ContentTemplate="{DataTemplate authentication:LoginPage}"/>
    </ShellItem>

    <TabBar >
        <Tab
            Title="{Binding TitleFeed}"
            >
            <ShellContent
                Title="{Binding TitleFeed}"
                ContentTemplate="{DataTemplate feed:FeedPage}"
                Route="FeedPage" />
        </Tab>
        <Tab
            Title="{Binding TitleSettings}"
            >
            <ShellContent
                Title="{Binding TitleSettings}"
                ContentTemplate="{DataTemplate settings:SettingsPage}"
                Route="SettingsPage" />
        </Tab>
    </TabBar>
 

I am expecting to define the ShellItem (default page) and the TabBar in C# markup and remove the use of XAML.

In particular, I am struggling to define this in C# markup for the ContentTemplate binding to one of the Content Pages. e.g. The ContentTemplate definition below does not work:

ShellContent shellContentFeedPage = new()
        {
            Title = AppShellViewModel.TitleFeed,
            ContentTemplate = (DataTemplate)FeedPage,
            Route = "FeedPage"
        };

I can't find any examples of how to do this online... Can anyone advise please?

Answer 1

I created a new project to achieve your request. Use the Items.Add(ShellItem) in the AppShell can do that.

In the code behind:

public AppShell()
 {
     InitializeComponent();
     Items.Add(new ShellContent()
     {
         Title = "MainPage",
         ContentTemplate = new DataTemplate(() => new MainPage()),
         Route = "MainPage"
     });
     var tab = new Tab()
     {
         Items = {
             new ShellContent()
             {
                 Title = "Page1",
                 ContentTemplate = new DataTemplate(() => new NewPage1()),
                 Route = "Page1"
             },
             new ShellContent()
             {
                 Title = "Page2",
                 ContentTemplate = new DataTemplate(() => new NewPage2()),
                 Route = "Page2"
             }
         },
     };
     var tabbar = new FlyoutItem() { Title = "Tabbar" , Route = "Tab"};
     tabbar.Items.Add(tab);
     Items.Add(tabbar);
 }

And the result image:

Update:

Regiter the AppShell DI and the LoginPage:

Services.AddTransient(typeof(AppShell)).AddTransient(typeof(LoginPage));

And then in the App.cs:

public App(AppShell appShell)
{
    InitializeComponent();

    MainPage = appShell;
}

And in the AppShell.cs:

public AppShell(IServiceProvider serviceProvider)
{
    InitializeComponent();
    Items.Add(new ShellContent()
    {
        Title = "LoginPage",
        ContentTemplate = new DataTemplate(() => serviceProvider.GetService<LoginPage>()),
        Route = "LoginPage"
    });