如何创建TabControl，使其在每次TabItem切换时呈现不同的数据

Question

我想使用MVVM方法创建一个选项卡控件，其中该选项卡将有3个选项卡项，每个选项卡项将呈现不同的内容比如一个将在其选项卡内容中呈现一些代码，另一个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>

并为每个Tabitem创建一个Viewmodel类，如XmlRenderViewModel.cs（用于xml渲染）和UIeLementRenderViewmodel.c（用于UI元素渲染）（如果我错了，请纠正我）。并且将需要制作用户控制列表（在这种情况下为3个用户控制）。

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

有人能解释一下吗？非常感谢我在这里呆了很长时间了。

Answer 1

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

<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";
    }
}

Answer 2

最后我完成了这样的操作：

 <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";
        }
    }