.NET Maui View Change With Radio Control

Question

Situation:

• I already have a TabBar as menu (at the bottom).
• I want another TabView for each tabpage at the top.

Problem:

• I cannot use TabView from DevExpress as this is only for iOS and Android (but I would like to use the app on android and windows).
• I cannot use SfTabView from Syncfusion as currently I do not have the community licence approved.

I found a great example how I can use radio buttons to accomplish this. However I do not have any idea how I get the following accomplished:

I would like to change the datatemplate and datasource of a contentpage based on the selected radio button value.

What I have in mind would be something like this:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Demo"
             xmlns:controls="clr-namespace:Demo.Controls"
             ...>

    <ContentPage.BindingContext>
        <local:PeopleViewModel x:Key="PeopleView" />
        <local:AnimalViewModel x:Key="AnimalView" />
        <local:PlantViewModel x:Key="PlantView" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <DataTemplate x:Key="PeopleTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PeopleCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="AnimalTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource AnimalCardView}" />
        </DataTemplate>
        <DataTemplate x:Key="PlantTemplate">
            <controls:CardView BorderColor="DarkGray"
                               CardTitle="{Binding Name}"
                               CardDescription="{Binding Description}"
                               ControlTemplate="{StaticResource PlantCardView}" />
        </DataTemplate>
    </ContentPage.Resources>

    ...

    <StackLayout Margin="10"
                 BindableLayout.ItemsSource="{Binding People}"
                 BindableLayout.ItemTemplate="{StaticResource PeopleTemplate}" />



</ContentPage>

Now I would like to replace the StackLayout section with code so depending on what a radio button value is set to (People, Animal, Plant) the ItemSource and ItemTemplate of the StackLayout is used with the corresponding data.

For People:

...
    <StackLayout Margin="10"
                 BindableLayout.ItemsSource="{Binding People}"
                 BindableLayout.ItemTemplate="{StaticResource PeopleTemplate}" />
...

For Animal:

...
    <StackLayout Margin="10"
                 BindableLayout.ItemsSource="{Binding Animal}"
                 BindableLayout.ItemTemplate="{StaticResource AnimalTemplate}" />
...

For Plant:

...
    <StackLayout Margin="10"
                 BindableLayout.ItemsSource="{Binding Plant}"
                 BindableLayout.ItemTemplate="{StaticResource PlantTemplate}" />
...

Any help is appreciated. Also welcome suggestions for ideas on how to implement it differently than described here.

I have already tried to find helpful ideas via Google, but unfortunately my search was unsuccessful.

Answer 1

Not sure if this is the best wait to achieve this but here is an idea

Make all those objects (People, Animal, Plant) be a descendant of some BaseObject

In your ViewModel have a ObservableRangeCollection (you might need to get the code for this from somewhere) and I assume you already have some sort of selectedValue Observable string that will have the value of the selected tab.

Create a OnSelectedValueChanged method that will clear your ObservableRangeCollection and add the appropriate data (this should trigger when you change tab)

Create one DataTemplate for each of your types, then create a DataTemplateSelector that will choose the Template according to the DataType (obj.GetType())

Be advised I have never implemented this, but it seams feasible