WinUI3 TabView XAML 不更新视图中的数据绑定答案

【问题标题】：WinUI3 TabView XAML does not update the data binding in the viewWinUI3 TabView XAML 不更新视图中的数据绑定
【发布时间】：2020-11-17 20:51:38
【问题描述】：

目前正在使用 C#、WinUI3 和 XAML 开发一个简单的 UWP 应用程序。很像微软在这里所做的新变化。但是，我陷入了一些我无法理解的奇怪绑定问题。我使用的是简单的ObservableCollection<ProfileTab> ProfileTabs，它应该使用单个选项卡进行初始化并显示在muxs.TabView 中。我只是直接按照 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 代码

<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# 代码

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

现在默认选项卡已初始化，我觉得很棒！但是，每当单击添加或删除时，什么都没有发生。我启动了调试器，事件被触发，ObservableCollection 似乎确实发生了变化——添加和删除显示的选项卡。现在的问题是视图本身没有改变 - 只是单个默认选项卡。

任何人都可以指出错误或解决方法吗？谢谢！

【问题讨论】：

我已经用 WinUI 2.4.3 进行了测试，它运行良好，我们无法重现您的问题，请分享有关您的项目目标最低版本和 WinUI 版本的更多详细信息。
@NicoZhu-MSFT - 感谢您的测试，感谢您的快速帮助和您的意见！我正在使用 VS 2019 版本 16.8.1，安装了 .NET 5 SDK，该项目设置为具有最新 WinUI3 Preview 的通用 Windows 应用程序。目标版本为 10.0.18362.0，目标最低版本为 10.0.17763.0。
我在和你一样的环境下测试过，但我无法重现你的问题，我将分享代码示例here，请尝试运行它并告诉我结果。
这个对我有用，现在的问题是出了什么问题，因为我还不能分辨出代码的任何区别。
请分享您的代码示例，我将在此基础上进行编辑。

标签： c# xaml uwp winui-3

【解决方案1】：

我已经测试了上面的代码，它在我这边运行良好，我制作了简单的示例here 请检查一下。

请注意TabView的IconSource在Microsoft.UI.Xaml.Controls命名空间下，请不要使用Windows.UI.Xaml.ControlsIconSource替换，否则会出现异常。

【讨论】：