WPF MVVM入门系列教程（TabControl绑定到列表并单独指定每一页内容）

在以前的开发过程中，对于TabControl控件，我一般是习惯直接定义TabItem，在TabItem下布局，并进行绑定。

类似这样

复制代码

 1  <TabControl ItemsSource="{Binding TabList}" SelectedIndex="0">
 2      <TabItem Header="Tab1">
 3           <Grid>
 4               <Label Content="{Binding  XXX}"/>
 5           </Grid>
 6      </TabItem>
 7      <TabItem Header="Tab2">
 8           <Grid>
 9               <Button Content="{Binding  XXX}" Command="{Binding XXX}"/>
10           </Grid>
11      </TabItem>
12  </TabControl>

我们也可以单独定义每一个Tab页的ViewModel和布局。

1、创建一个Tab页公用的ViewModel

这个类用于显示Tab页的标题等公共属性。

复制代码

 1     public class TabViewModel : ObservableObject
 2     {
 3         private string headerName;
 4 
 5         public string HeaderName 
 6         { 
 7             get => headerName; 
 8             set => SetProperty(ref headerName,value); 
 9         }
10     }

2、定义每一个Tab页的ViewModel

假设我这里是设置两页，TabA和TabB

TabA显示一个详情文本

TabB显示一个图片

TabToolAViewModel.cs

复制代码

 1     public class TabToolAViewModel : TabViewModel
 2     {
 3         private string detail;
 4         public string Detail { get => detail; set => SetProperty(ref detail,value); }
 5 
 6         public TabToolAViewModel()
 7         {
 8             HeaderName = "工具A";
 9         }
10 
11     }

TabToolBViewModel.cs

复制代码

 1     public class TabToolBViewModel : TabViewModel
 2     {
 3         private string imagePath;
 4         public string ImagePath { get => imagePath; set => SetProperty(ref imagePath,value); }
 5 
 6         public TabToolBViewModel()
 7         {
 8             HeaderName = "工具B";
 9         }
10 
11     }

3、创建主界面

MainWindow.xaml

复制代码

 1 <Window x:Class="WPFTabMVVMDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         mc:Ignorable="d"
 7         Title="MainWindow" Height="450" Width="800">
 8     <TabControl ItemsSource="{Binding TabList}" SelectedIndex="0">
 9         <TabControl.ItemTemplate>
10             <DataTemplate>
11                 <ContentPresenter Content="{Binding HeaderName}"></ContentPresenter>
12             </DataTemplate>
13         </TabControl.ItemTemplate>
14     </TabControl>
15 </Window>

4、创建主界面的ViewModel

MainWindowViewModel.cs

复制代码

 1  public class MainWindowViewModel : ObservableObject
 2  {
 3      private ObservableCollection<TabViewModel> tabList = new ObservableCollection<TabViewModel>();
 4 
 5      public ObservableCollection<TabViewModel> TabList { get => tabList; set => SetProperty(ref tabList,value); }
 6 
 7      public MainWindowViewModel()
 8      {
 9          tabList.Add(new TabToolAViewModel() {Detail = "详情...." });
10          tabList.Add(new TabToolBViewModel() { ImagePath = "https://img2.baidu.com/it/u=3115165460,1153722234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" });
11      }
12 
13  }

我们将MainWindowViewModel.cs绑定到MainWindow上后

复制代码

1  public MainWindow()
2  {
3      InitializeComponent();
4 
5      this.DataContext = new MainWindowViewModel();
6  }

运行效果如下：

可以看到这里显示的是TabToolAViewModel的字样，因为这里TabToolAViewModel并没有对应到具体的View上面。

5、创建单独的视图

接下来我们就可以单独的创建每个Tab页要显示的内容了

TabAView.xaml

TabA显示一个详情文本

复制代码

 1 <UserControl x:Class="WPFTabMVVMDemo.Views.ToolAView"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:WPFTabMVVMDemo.Views"
 7              mc:Ignorable="d" 
 8              d:DesignHeight="450" d:DesignWidth="800">
 9     <StackPanel>
10         <Label Content="{Binding Detail}"></Label>
11     </StackPanel>
12 </UserControl>

TabBView.xaml

TabB显示一个图片

复制代码

 1 <UserControl x:Class="WPFTabMVVMDemo.Views.ToolBView"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:WPFTabMVVMDemo.Views"
 7              mc:Ignorable="d" 
 8              d:DesignHeight="450" d:DesignWidth="800">
 9     <Grid>
10         <Image Source="{Binding ImagePath}"></Image>   
11     </Grid>
12 </UserControl>

6、创建视图和ViewModel的映射

有了两个单独的视图以后，如何将它和它们对应的ViewModel绑定起来呢？

此时我们可以创建一个资源字典，并定义数据模板，用于ViewModel和View的映射

ViewTemplate.xaml

复制代码

 1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:view="clr-namespace:WPFTabMVVMDemo.Views"
 3                     xmlns:local="clr-namespace:WPFTabMVVMDemo">
 4 
 5     <DataTemplate 
 6      DataType="{x:Type 
 7          local:TabToolAViewModel}">
 8         <view:ToolAView></view:ToolAView>
 9     </DataTemplate>
10     
11     <DataTemplate 
12 DataType="{x:Type 
13     local:TabToolBViewModel}">
14         <view:ToolBView></view:ToolBView>
15     </DataTemplate>
16 </ResourceDictionary>

7、使用视图和ViewModel的映射

然后在需要使用的地方，引用这个资源字典就可以了。

我们这里是在主窗口中使用

就在MainWindow.xml中添加如下引用

复制代码

1   <Window.Resources>
2       <ResourceDictionary Source="ViewTemplate.xaml"></ResourceDictionary>
3   </Window.Resources>

添加后，运行效果如下：

这样我们就可以将TabControl绑定到一个列表，并单独指定每一个Tab页的标题和内容。

示例代码

下载