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 : ObservableObject2 {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 : TabViewModel2 {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 : TabViewModel2 {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 : ObservableObject2 {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页的标题和内容。
示例代码
下载