maui - 如何动态地将代码隐藏的选项卡添加到 Maui Shell TabBar？

Question

我是桌面开发的新手，我正在尝试实现一个应用程序，它可以根据列表中的选定项目动态创建包含内容的选项卡。项目已添加到 TabBar.Items 集合，但我无法在应用程序窗口中看到它们(UWP WinUI 3 Windows 机器)

如您所见，Sessions.Items 上的Count 属性指向4，但是只有一个选项卡在视觉上显示 [浏览器 session ]。

当可用“选项卡”列表位于第一个窗口 [AppShell] 中时，选项卡将显示在第二个应用程序窗口 [BrowserPage] 中。此外，这两个窗口都是基于 shell 的。

查看

<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>

和代码隐藏

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))
                        }
                    }
                });
            }
        }
    }
}

如有任何提示，我将不胜感激

Answer 1

在当前版本 (8-8-22) 中，毛伊岛似乎存在标签绘制问题，直到出现导航为止。调用“GoToAsync”可以以编程方式强制执行此操作。

此外，删除不必要的选项卡对象层可能有助于渲染情况。也就是说，您可以简化结构以生成如下内容:

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

将它们放在一起:确保“Route”名称是唯一的，使您的处理程序异步，调用GoToAsync()，并删除额外的“Tab”对象:

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}");

如果您想留在当前选项卡上，您可以在第一次调用“GoToAsync”后导航回来，然后使用 backwards navigation 再次调用 GoToAsync("..")双点 "..").