What is tihe best way to use the current version of TabView (2.0.0-preview6)?

[Tryanks]

Note: I know I may not get a good impression when I mention that I am an MVVM fan, I just want to say that I am not that pure MVVM developer either, and I am willing to embrace every solution that can improve development efficiency and elegant coding.

Hi, thank you for making this great theme. I would like to know what is the best way to use TabView in the current version?

I tried to create an ObservableCollection<VMTabViewPage> in ViewModel and then bind to TabItems property in axaml. The details are as follows:

In ViewModel.cs:

public class VMTabViewPage: ViewModelBase
{
    [Reactive] public string Title { get; set; } = "New Chat";
}

public class MainWindowViewModel : ViewModelBase
{
    [Reactive] ObservableCollection<VMTabViewPage> VMTabViewPages { get; set; } = new();

    public void AddTabViewPage()
    {
        VMTabViewPages.Add(new VMTabViewPage());
    }
}

In View.axaml:

    <ui:TabView TabItems="{Binding VMTabViewPages}" AddTabButtonCommand="{Binding AddTabViewPage}">
        <ui:TabView.TabItemTemplate>
            <DataTemplate x:DataType="vm:VMTabViewPage">
                <ui:TabViewItem Header="{Binding Title}"/>
            </DataTemplate>
        </ui:TabView.TabItemTemplate>
    </ui:TabView>

So I get a nested TabVieTabViewItemwItem.

Through this phenomenon, it can be found that by changing the ui:TabViewItem in ui:TabView.TabItemTemplate to TextBox the title can be displayed properly, but there is still an incorrect hover hint.

Also, I will not be able to bind CloseRequest for each TabViewItem (it can convert events to commands using Interaction.Behaviors) and I lose the custom Context for the TabViewItem.

I have looked at the sample code of other projects, and among them there is a TabItemTemplate bound to ui:TabViewItem, and also bound to TextBlock. They seem to be working fine, and I'm not sure what I'm doing wrong in the process.

If you @amwx , as the author, have a completely different understanding of how TabView is used than I do, please share that with me as well.

The information I've provided may not be comprehensive, so if you need more information, please let me know and I'll provide it as soon as possible. Sorry I don't have a repo available for reference, this is because I haven't protected the OpenAI API Key in it.

Thank you very much for reading this, even if you may not be able to help :)

[amwx]

Unfortunately, a side effect of the new ItemsControl design upstream meant that I can't create TabViewItems from the ItemTemplate property anymore (since container creation is handled outside of my logic). I think there is some work that might make this possible again that's open upstream, so I'll re-evaluate after that's complete. This means you can't set a TabViewItem as the ItemTemplate as in WinUI, as it just ends up getting put into a generated TabViewItem.

Instead, what I'm suggesting as an interim solution is to using the styling system to set the properties you need, which is similar to what you'd do in WPF.

<Style Selector="ui|TabViewItem">
    <Setter Property="Header" Value="{Binding DataHeader}" />
    ...
</DataTemplate>

[Tryanks]

Thanks, it worked for me. Also can you tell me how to bind commands or create event method for CloseRequest in Style mode?

Currently I have added a method for the event TabCloseRequested in ui:TabView and implemented it as follows:

    private void TabView_OnTabCloseRequested(TabView sender, TabViewTabCloseRequestedEventArgs args)
    {
        var MainVM = (MainWindowViewModel)this.DataContext;
        var vmTab = (VMTabViewPage)args.Tab.DataContext;
        MainVM.RemoveTabViewPage(vmTab);
    }