TabControl 如何以 MVVM 方式实现？

Question

I want to stick to MVVM design patterns, where view model never touch view object directly, but view can touch view model. in some condition, i allow view call viewmodel method. but i ended up in call view object inside viewmodel. i already think binding ways but still not get the ways to solve this.

<TabControl
        TabStripPlacement="Left"
        ItemsSource="{Binding Menu}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
         <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding Content}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

C# view model

public class DashboardViewModel
{
    public IndexViewModel()
    {
        Menu = new ObservableCollection<TabItem>();
        Menu.Add( 
            new TabItem 
            { 
                Header = "Campaign",
                Content = new RankView()
            } 
        );
        Menu.Add( new TabItem { Header = "Configuration" } );
    }

    public ObservableCollection<TabItem> Menu { get; set; }
}

public sealed class TabItem
{
    public string Header { get; set; } = string.Empty;
    public UserControl Content { get; set; }
}

Answer 1

You can fix this issue like this

Replace

<ContentControl Content="{Binding Content}" />

With

<ContentControl Content="{Binding Header, Converter={StaticResource TabHeaderStringToUcConverter}}" />

So TabHeaderStringToUcConverter will create the appropriate UserControl based on the tab header string.

Full example:

<StackPanel>
    <StackPanel.Resources>
        <converters:TabHeaderStringToUcConverter 
            xmlns:converters="clr-namespace:Namespace.Where.This.Converter.Live"
            x:Key="TabHeaderStringToUcConverter" />
    </StackPanel.Resources>

    <TabControl
        TabStripPlacement="Left"
        ItemsSource="{Binding Menu}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
         <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding Header, Converter={StaticResource TabHeaderStringToUcConverter}}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</StackPanel>

Where TabHeaderStringToUcConverter is

public class TabHeaderStringToUcConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string str)
        {
            switch (str)
            {
                case "Campaign":
                    return new RankView();
                // other cases..
            }
        }

        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Finally, In ViewModel, comment out Content = new RankView() , and remove Content property from TabItem class.