.net - 如何创建TabControl，以便在每个TabItem切换时呈现不同的数据

Question

我想使用MVVM方法创建一个Tabcontrol，其中此Tab将具有3个Tabitem，并且每个选项将呈现不同的内容
就像一个将在其标签内容中呈现一些代码，而另一个tabItem将呈现soem UI元素。

我想到的是:

制作一个mainView.xaml，它将具有这样的TabControl声明:

<UserControl x:Class="CENTER.MainTabControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <controls:TabControl Grid.Row="0" BorderThickness="0" Background="White" />
    </Grid>
</UserControl>

并为每个Tabitem创建一个Viewmodel类，例如XmlRenderViewModel.cs(用于xml渲染)和UIeLementRenderViewmodel.cs(用于UI元素渲染)
(如果我错了，请纠正我)。并需要制作一个UserControl列表(在这种情况下为3 Usercontrol)。

但是如何使用MVVM方法和xaml来实现呢？

可以请人解释一下。非常感谢，我长期以来一直被困在这里。

Answer 1

最终，您希望每个选项卡项都具有自己的数据上下文。这样，您可以为每个选项卡使用单独的 View 模型。设置项目数据上下文的方法有很多。这是一个有关如何执行此操作的简单示例。

<Grid x:Name="LayoutRoot" Background="White">
    <sdk:TabControl Grid.Row="0" BorderThickness="0" Background="White" >
        <sdk:TabItem x:Name="TabItem1">
            <TextBlock Text="{Binding ViewModelText}"></TextBlock>
        </sdk:TabItem>
        <sdk:TabItem x:Name="TabItem2">
            <TextBlock Text="{Binding ViewModelText}"></TextBlock>
        </sdk:TabItem>
    </sdk:TabControl>
</Grid>

然后在MainView.xaml.cs中，您可以拥有此...

public partial class mainView : UserControl
{
    public mainView()
    {
        InitializeComponent();
        TabItem1.DataContext = new TabItemOneViewModel();
        TabItem2.DataContext = new TabItemTwoViewModel();
    }
}

public class TabItemOneViewModel
{
    public string ViewModelText { get; set; }

    public TabItemOneViewModel()
    {
        ViewModelText = "Item one text";
    }
}

public class TabItemTwoViewModel
{
    public string ViewModelText { get; set; }

    public TabItemTwoViewModel()
    {
        ViewModelText = "Item two text";
    }
}