.net 如何创建TabControl以便在每个TabItem上呈现不同的数据

我想使用MVVM方法创建一个Tabcontrol，其中该选项卡将有3个tabitems，每个tabitems将呈现不同的内容 一个tabItem将在其选项卡内容中呈现一些代码，另一个tabItem将呈现SOEMUI元素

我的想法是：

制作一个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>

 <Grid x:Name="LayoutRoot" Background="White">       
        <controls:TabControl Grid.Row="0" BorderThickness="0" Background="White" >
            <controls:TabItem x:Name="TabItem1" Height="20" Width="100" Header="UI element">
                <tabData:XmlRender x:Name="ucTab1Data" />            
            </controls:TabItem>
            <controls:TabItem x:Name="TabItem2" Height="20" Width="100" Header="xml data">
                <tabData:UIeLementRender x:Name="ucTab2Data" />       
            </controls:TabItem>
        </controls:TabControl>
    </Grid>


<UserControl x:Class="TabControlLastLifeTry.XmlRender"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="{Binding ViewModelText}"></TextBlock>
    </Grid>
</UserControl>

<UserControl x:Class="TabControlLastLifeTry.UIeLementRender"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="{Binding ViewModelText}"></TextBlock>
    </Grid>
</UserControl>

 public class xmlRendereViewModel
    {
        private String viewModelText;
        public String ViewModelText
        {
            get { return viewModelText; }
            set { viewModelText = value; }
        }
        public xmlRendereViewModel()
        {
            viewModelText = "here will be xml rendering";
        }
    }
public class uiElementRendererViewModel
    {
        private String viewModelText;
        public String ViewModelText
        {
            get { return viewModelText; }
            set { viewModelText = value; }
        }

        public uiElementRendererViewModel()
        {
            viewModelText = "here will be UI rendering";
        }

    }

并为每个选项卡项创建一个Viewmodel类，如XmlRenderViewModel.cs（用于xml呈现）和UIeLementRenderViewmodel.cs（用于UI元素呈现） （如果我错了，请纠正我）。并且需要创建一个UserControl列表（本例中为3个UserControl）

但如何使用MVVM方法和xaml实现这一点呢

---

有人能解释一下吗。非常感谢，我被困在这里很久了。

最终，您希望每个选项卡项都有自己的数据上下文。这就是如何为每个选项卡创建单独的视图模型。有许多不同的方法来设置items数据上下文。下面是一个简单的例子，说明如何做到这一点

<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>

---

最后我完成了它，就像这样：

<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>

 <Grid x:Name="LayoutRoot" Background="White">       
        <controls:TabControl Grid.Row="0" BorderThickness="0" Background="White" >
            <controls:TabItem x:Name="TabItem1" Height="20" Width="100" Header="UI element">
                <tabData:XmlRender x:Name="ucTab1Data" />            
            </controls:TabItem>
            <controls:TabItem x:Name="TabItem2" Height="20" Width="100" Header="xml data">
                <tabData:UIeLementRender x:Name="ucTab2Data" />       
            </controls:TabItem>
        </controls:TabControl>
    </Grid>


<UserControl x:Class="TabControlLastLifeTry.XmlRender"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="{Binding ViewModelText}"></TextBlock>
    </Grid>
</UserControl>

<UserControl x:Class="TabControlLastLifeTry.UIeLementRender"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="{Binding ViewModelText}"></TextBlock>
    </Grid>
</UserControl>

 public class xmlRendereViewModel
    {
        private String viewModelText;
        public String ViewModelText
        {
            get { return viewModelText; }
            set { viewModelText = value; }
        }
        public xmlRendereViewModel()
        {
            viewModelText = "here will be xml rendering";
        }
    }
public class uiElementRendererViewModel
    {
        private String viewModelText;
        public String ViewModelText
        {
            get { return viewModelText; }
            set { viewModelText = value; }
        }

        public uiElementRendererViewModel()
        {
            viewModelText = "here will be UI rendering";
        }

    }

公共类XmlRenderReviewModel
{
私有字符串viewModelText；
公共字符串ViewModelText
{
获取{返回viewModelText；}
设置{viewModelText=value；}
}
公共XMLRenderReviewModel（）
{
viewModelText=“这里将是xml呈现”；
}
}
公共类UIElementRenderViewModel
{
私有字符串viewModelText；
公共字符串ViewModelText
{
获取{返回viewModelText；}
设置{viewModelText=value；}
}
公共UIElementRenderViewModel（）
{
viewModelText=“此处将显示UI渲染”；
}
}

。谢谢您的回答，但我不知道为什么您的代码只在两个选项卡Item中显示“Item two text”。我的意思是，在下面写的第一个选项InitializeComponent会在两个选项卡Item中重复。但是为什么呢？如何解决这个问题？我的问题的意思是：我刚刚找到了它。如果你愿意，你可以看到更新的答案。