Using TabControl to display tabbed panels with varying content

[ortwinrose]

I am new to Avalonia, having trouble to write a simple application that displays 3 tabbed panels in its MainView. I defined the TabControl in MainView as you can see below:

<TabControl ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">
   <TabItem Header="Coordinate" Content="{Binding CoordinatesTab}" />
   <TabItem Header="Satellites" Content="{Binding SatellitesTab}" Background="BlanchedAlmond"/>
   <TabItem Header="Diagnosis" Content="{Binding DiagnosisTab}" />
</TabControl>```
The MainViewModel contains an ObservableCollection Tabs, filled with 3 ViewModels (all derived from ReactiveObject). The three ViewModels are also kept within Properties, as can be seen in the Binding part above. The design view looks like this:
![grafik](https://github.com/user-attachments/assets/91a8cd50-7282-4851-b812-daf64c0a4061)
I can see the titles, but no content is displayed. I assume I am missing to define the Views associated with each ViewModel, or maybe I do not need the TabItems at all (since the ViewModels are already found in the Tabs Property of MainViewModel). Any hints how to proceed (or maybe a link to some example / application that is using TabControl the way I want to)?
By the way: When I start the application, I get an error message in the Debug window like this (no idea how to figure out what this problem means):
[Binding]An error occurred binding 'ItemsSource' to 'Tabs' at 'Tabs': 'Items collection must be empty before using ItemsSource.' (TabControl #16090703)

[LaurentInSeattle]

I think that the TabControl ItemsSource should be a collection of TabItem.

See this page on SO for more:
https://stackoverflow.com/questions/5650812/how-do-i-bind-a-tabcontrol-to-a-collection-of-viewmodels

This above is for WPF but it should be the same in Avalonia.

[thevortexcloud]

Most items controls will automatically place things inside a container control when binding. Not sure if tab control does.

[ortwinrose]

Making Tabs a collection of TabItem means the contained ViewModels would have to derive from TabItem? Is this really what you meant? I do not believe this works (and actually, it did not compile this way, either).
I've seen the example given in SO already before, but could not get it work. The example is too simplistic, when the "ViewModel" actually is just a string.

and using TabItem as a container whose content are different ViewModels also did not work. I think the missing link is to provide the ItemsSource with the Views associated with the ViewModels (the models are contained in the TabControl). But I do not know how to do that...

[thevortexcloud]

Making Tabs a collection of TabItem means the contained ViewModels would have to derive from TabItem?

Nope. In fact, doing that would be a major MVVM violation. When binding to an items control from a view model, you generally don't have to worry about the container control. The control will set it up for you.

I think the missing link is to provide the ItemsSource with the Views associated with the ViewModels (the models are contained in the TabControl). But I do not know how to do that...

You can either use a ViewLocator, or you need to specify a DataTemplate.

https://docs.avaloniaui.net/docs/concepts/view-locator
https://docs.avaloniaui.net/docs/basics/data/data-templates

I would suggest avoiding a view locator unless you need it. It's not trim safe.

There is also a fairly in depth tutorial for DataTemplates here:

https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/DataTemplates/BasicDataTemplateSample

[thevortexcloud]

This is odd. You have defined a items source and a content for the tab control. Normally you do one or the other. Which is also probably why you have an error.

[ortwinrose]

If I remove the content within xaml, things get even worse (looks like this):

So just removing the content is not the solution.

[thevortexcloud]

This is correct and expected. You need to define a template for the header. Avalonia has no idea how to present your content without one. There is a sample on the old docs site:

https://docs.avaloniaui.net/docs/0.10.x/controls/tabcontrol#binding-support

Not sure why it was removed, as far as I am aware nothing about TabControl has really changed. With the exception of Items now being ItemsSource

[ortwinrose]

I finally ended up with this solution, which works for me (thanks a lot for your suggestions!):

   <TabControl SelectedItem="{Binding SelectedTab}">
      <TabControl.DataTemplates>
         <DataTemplate DataType="models:CoordinatesTabViewModel">
            <views:CoordinatesTabView/>
         </DataTemplate>
         <DataTemplate DataType="models:DiagTabViewModel">
            <views:DiagTabView/>
         </DataTemplate>
         <DataTemplate DataType="models:SatellitesTabViewModel">
            <views:SatellitesTabView/>
         </DataTemplate>
      </TabControl.DataTemplates>
      <TabItem Header="Coordinate" Content="{Binding CoordinatesTab}" />
      <TabItem Header="Satellites" Content="{Binding SatellitesTab}" />
      <TabItem Header="Diagnosis" Content="{Binding DiagnosisTab}" />
   </TabControl>

I only wonder if this could not also be achieved with a shorter syntax, specifying the View to be used directly within the TabItem entry, instead of the lengthy DataTemplate stories.

Any further suggestions what should be improved to get a more Avalonia-like solution?

[thevortexcloud]

I only wonder if this could not also be achieved with a shorter syntax, specifying the View to be used directly within the TabItem entry, instead of the lengthy DataTemplate stories.

You need a template. But where you put it, and how it functions is up to you. Avalonia searches up the tree until it finds a matching template. If you put it at the Application level, it basically becomes the default template for everything unless a more specific template is provided. I personally prefer to keep them where I use them unless they are shared. That said, templates themselves don't actually have to reference another view. Something like this is just as valid:

<DataTemplate DataType="myDataType">
    <StackPanel>
         <Button />
    </StackPanel>
</DataTemplate>

Which I am guessing is closer to how you want to use it? A lot of (but not all) controls also let you specify a data template directly. TabItem looks like it should let you do that by doing something like:

<TabItem>
    <TabItem.ContentTemplate>
         <DataTemplate>
             ....
         </DataTemplate>
     </TabItem.ContentTemplate>
</TabItem

But I have not tested it. That syntax basically sets the value of the ContentTemplate property on the TabItem to the given content. It works pretty much every public property on any control.

You also write your own IDataTemplate if you need some fancy logic. EG

https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/DataTemplates/IDataTemplateSample

A common pattern in WPF was to define templates in resource dictionaries, which kept them away from the main view files. You can also do similar things in Avalonia if you don't want to look at them very often.

If you want to be especially lazy, you can use a ViewLocator with convention naming. Which will automatically find a view that matches a view model's name based on some convention (generally MyView vs MyViewModel). But as I said before, it's not trim safe which means you can't use AOT with it.

if you have never used a XAML framework before, there is a fairly steep learning curve to a lot of this stuff.

[ortwinrose]

Thanks a lot for your explanation! Since each tabbed panel has a fairly complex structure, I decided to create a dedicated view for each. I now create the ViewModels for each panel in the code-behind of the MainViewModel, and define the DataTemplates within the UserControl of the MainView (see below). Like you, I prefer to keep these definitions as close as possible to the place I use them. Currently, I do not see an advantage keeping them in a separate resource dictionary.

   <UserControl.DataTemplates>
      <DataTemplate DataType="models:CoordinatesTabViewModel">
         <views:CoordinatesTabView/>
      </DataTemplate>
      <DataTemplate DataType="models:DiagTabViewModel">
         <views:DiagTabView/>
      </DataTemplate>
      <DataTemplate DataType="models:SatellitesTabViewModel">
         <views:SatellitesTabView/>
      </DataTemplate>
   </UserControl.DataTemplates>

   <TabControl ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">
      <TabControl.ItemTemplate>
         <DataTemplate>
            <TextBlock Text="{Binding Header}" />
         </DataTemplate>
      </TabControl.ItemTemplate>
   </TabControl>

I now derive all ViewModels from a ViewModelBase class, which only contains the Header attribute used as a title of the tabbed panel (a bit unfortunate; maybe I should call this class ViewModelTabbedPanel, to avoid that each ViewModel finally ends up with a Header).
And indeed, I never used a XAML framework before. However, I would like to get it right from the beginning, that's why I asked these questions. And again, many thanks for your help! It provided the ideas I needed to come to a solution.

[thevortexcloud]

I now create the ViewModels for each panel in the code-behind of the MainViewModel,

While there is nothing wrong with this, there are a few other approaches worth considering. The first is to use Dependency Injection to inject the child view models. There is a fairly simple guide which I helped write here about how to do that:

https://docs.avaloniaui.net/docs/guides/implementation-guides/how-to-implement-dependency-injection

The second is to actually have the view itself create the view model and then assign it to itself. I am personally not a fan of this as it's fairly inflexible and can cause weird side effects when using the previewer.

I normally use the DI approach when it makes sense to do so, as it makes writing unit tests much easier, as well as making the code more modular. But the way you have done things is also perfectly acceptable and is more in line with the "traditional" way of doing it.

maybe I should call this class ViewModelTabbedPanel

If you are interested in maximum MVVM correctness, then this is not a good name. In MVVM the view model has no visibility or control over the view. Therefore it has no way to guarantee it will be used in a tabbed panel. Most people however are not that strict. I personally do get annoyed by it sometimes though.

And indeed, I never used a XAML framework before. However, I would like to get it right from the beginning, that's why I asked these questions. And again, many thanks for your help! It provided the ideas I needed to come to a solution.

Glad I could help. The good news is most XAML frameworks are similar enough to each other that if you learn one, you can learn another very quickly.