How dynamically add tabs in code behind to Maui Shell TabBar?

Question

I'm new to desktop development and I'm trying to implement an application where it's possible to dynamically create tabs with content based on an selected item from a list. Items are added to the TabBar.Items collection, however I can't see them on the app window (~~UWP~~ WinUI 3 Windows machine)

As you can see, the Count property on Sessions.Items points to 4, however only one tab is visually displayed [BrowserSession].

Tabs are displayed in the second application window [BrowserPage] when the list of available "tabs" is in the first window [AppShell]. Also both windows are shell based.

View

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Browser.Views.BrowserPage"
         Title="Browser"
   xmlns:views="clr-namespace:Browser.Views">

    <TabBar x:Name="Sessions">
    </TabBar>
</Shell>

and code behind

public partial class BrowserPage : Shell
{
    public BrowserPage(ObservableCollection<BrowserSessionData> sessions)
    {
        InitializeComponent();

        BrowserSessions = sessions;

        for (int i = 0; i < BrowserSessions.Count; i++)
        {
            var browserSession = BrowserSessions[i];
            Sessions.Items.Add(new Tab
            {
                Title = browserSession.DisplayName,
                Items = { 
                    new ShellContent() {
                        Title = browserSession.DisplayName,
                        Route = browserSession.DisplayName,
                        ContentTemplate = new DataTemplate(() => new BrowserSession(browserSession))
                    }
                }
            });
        }

        BrowserSessions.CollectionChanged += OnCollectionChanged;
    }

    private ObservableCollection<BrowserSessionData> BrowserSessions { get; }

    private void OnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
    {
        if(e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
        {
            for (int i = 0; i < e.NewItems.Count; i++)
            {
                var browserSession = e.NewItems[i] as BrowserSessionData;
                Sessions.Items.Add(new Tab
                {
                    Title = browserSession.DisplayName,
                    Items = {
                        new ShellContent() {
                            Title = browserSession.DisplayName,
                            Route = browserSession.DisplayName,
                            ContentTemplate = new DataTemplate(() => new BrowserSession(browserSession))
                        }
                    }
                });
            }
        }
    }
}

I would be grateful for any hints

FYI: Maui doesn't support UWP. Do you mean "Local Machine (Windows)"? That is WINUI 3. Another small tech detail: "bind" would refer to "binding", e.g. `SomeProperty={Binding ...}` or `SetBinding(...)`. You aren't doing binding. You want to know how to dynamically create/add tabs in code behind. — ToolmakerSteve, Jul 30 '22 at 19:22
Yes, sorry for the confusion, I mean WinUI 3 Windows machine UPD: Yes, in my example I did it without binding. But if it's possible, it will make possible to bind the BrowserSessions property and dynamically add/remove elements from this collection, which will result in the creation/deletion of the tab. — Bagroy, Jul 30 '22 at 19:23
What's the code of `BrowserSessionData`? If it is convinient for you,could you please post a basic demo so that we can test on our side? — Jessie Zhang -MSFT, Aug 01 '22 at 06:41

James · Accepted Answer · 2022-08-09T02:31:37.213

With the current release (8-8-22) there seem to be tab painting issues in Maui until navigation occurs. Calling "GoToAsync" can force this programatically.

Additionally, removing an unnecessary layer of tab objects might help the rendering situation. That is, you can simplify your structure to generate something like this:

<Shell ...>
  <TabBar x:Name="Sessions">
     <!-- tabs generated by the code... -->
     <ShellContent Title="Tab1" Route="TabRoute" ContentTemplate="..." />
  </TabBar>
</Shell>

Putting it all together: Make sure the "Route" name is unique, make your handler async, call GoToAsync(), and remove the extra "Tab" object:

private async void OnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
{
    ...
    for (int i = 0; i < BrowserSessions.Count; i++)
    {
        var browserSession = BrowserSessions[i];
        Sessions.Items.Add(new ShellContent()
        {
            Title = browserSession.DisplayName,
            Route = browserSession.DisplayName,
            ContentTemplate = new DataTemplate(() => new BrowserSession(browserSession))
        });
    }

    await GoToAsync($"//{browserSession.DisplayName}");

If you want to stay on the current tab, you could navigate back after the first call to "GoToAsync" with another call to GoToAsync("..") using the backwards navigation double-dots "..").

Thanks for the workaround! Is there an issue for the track of this problem? I created a bug on maui github, but I still haven't received a response https://github.com/dotnet/maui/issues/9093 — Bagroy, Aug 10 '22 at 10:07

How dynamically add tabs in code behind to Maui Shell TabBar?

1 Answers1

Linked