WinUI3 TabView XAML does not update the data binding in the view

Question

Currently working on a simple UWP App using C#, WinUI3 and XAML. Very much like the new changes Microsoft did here. However, I got stuck on some strange bindings problem that I can not make sense of. I am using as simple ObservableCollection<ProfileTab> ProfileTabs which should get initialized with a single tab and show in a muxs.TabView . I just straight followed the example in the XAML Controls Galary ( https://github.com/microsoft/Xaml-Controls-Gallery/blob/f95e0a2003be53228030dcf72032fcb47b96060f/XamlControlsGallery/ControlPages/TabViewPage.xaml.cs & https://github.com/microsoft/Xaml-Controls-Gallery/blob/f95e0a2003be53228030dcf72032fcb47b96060f/XamlControlsGallery/ControlPages/TabViewPage.xaml )

XAML Code

<TabView Grid.Row="1" TabItemsSource="{x:Bind ProfileTabs, Mode=OneWay}" AddTabButtonClick="TabView_AddButtonClick" TabCloseRequested="TabView_TabCloseRequested">
  <TabView.TabItemTemplate>
    <DataTemplate x:DataType="local:ProfileTab">
      <muxc:TabViewItem Header="{x:Bind TabHeader}" IconSource="{x:Bind TabIconSource}" Content="{x:Bind TabContent}" />
    </DataTemplate>
  </TabView.TabItemTemplate >
</TabView>

C# Code

public class ProfileTab
{
    public string TabHeader { get; set; }
    public IconSource TabIconSource { get; set; }
    public object TabContent { get; set; }
}

public sealed partial class MainPage : Page
{
    public ObservableCollection<ProfileTab> ProfileTabs { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        InitializeSampleProfile();
    }

    private void TabView_AddButtonClick(TabView sender, object args)
    {
        var profile = new SettingsProfile("");
        ProfileTabs.Add(CreateNewTab(profile));
    }

    private void TabView_TabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
    {
        ProfileTabs.Remove(args.Item as ProfileTab);
    }

    private ProfileTab CreateNewTab(SettingsProfile profile)
    {
        var profileTab = new ProfileTab
        {
            TabHeader = $"{profile.PrettyName()}",
            TabIconSource = new SymbolIconSource() { Symbol = Symbol.Document },
        };

        // The content of the tab is a frame that contains a page, pass the profile as parameter
        Frame frame = new Frame();
        frame.Navigate(typeof(ProfilePage), profile);
        profileTab.TabContent = frame;

        return profileTab;
    }

    private void InitializeSampleProfile()
    {
        ProfileTabs = new ObservableCollection<ProfileTab>();

        // load sample data

        ProfileTabs.Add(CreateNewTab(defaultProfile));
    }
}

Now the default tab is initialized, I thought great! But whenever add or remove is clicked nothing happened. I started the Debugger, the events get triggered and the ObservableCollection seems indeed changing - adding and removing the displayed Tab. Now the problem is the view itself does not change - just the single default tab.

Anyone can point me to the bug or workaround? Thanks!

Answer 1

I have tested above code, it works well in my side, and I have make simple sample here please check that.

And please note the IconSource of TabView is under Microsoft.UI.Xaml.Controls namespace, please don't use Windows.UI.Xaml.Controls IconSource to replace, or it will type exception.