WinUI3 TabView XAML не обновляет привязку данных в представлении

В настоящее время работает над простым приложением UWP с использованием C#, WinUI3 и XAML. Очень похоже на новые изменения, которые Microsoft сделала здесь. Однако я застрял на какой-то странной проблеме привязки, которую я не могу понять. Я использую просто ObservableCollection<ProfileTab> ProfileTabs который должен быть инициализирован с помощью одной вкладки и отображаться в muxs.TabView. Я просто последовал примеру в Галерее элементов управления XAML ( 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 & 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кажется, действительно меняется - добавление и удаление отображаемой вкладки. Теперь проблема в том, что само представление не меняется - только одна вкладка по умолчанию.

Кто-нибудь может указать мне на ошибку или обходной путь? Благодаря!

1 ответ

Я протестировал приведенный выше код, он хорошо работает на моей стороне, и я сделал простой образец здесь, пожалуйста, проверьте это.

И обратите внимание на IconSource из TabView находится под Microsoft.UI.Xaml.Controls пространство имен, пожалуйста, не используйте Windows.UI.Xaml.Controls IconSource заменить, или он наберет исключение.

Другие вопросы по тегам