C# WPF 实现Tab页动态增减

概述

Tab页面是一个很常用的控件，针对页面固定的场景，直接给Item进行数据绑定就行，如下所示：

<dx:DXTabControl cal:Message.Attach="[Event Loaded]=[TabControl_Loaded($source,$eventArgs)]"><dx:DXTabItem Header="{Binding Region[0]}" Visibility="{Binding TabPageDispaly[0]}"><ContentControl  cal:View.Model="{Binding ParamPage}" /></dx:DXTabItem><dx:DXTabItem Header="{Binding Region[1]}" Visibility="{Binding TabPageDispaly[1]}"><ContentControl  cal:View.Model="{Binding ParamPage}"/></dx:DXTabItem><dx:DXTabItem Header="{Binding Region[2]}" Visibility="{Binding TabPageDispaly[2]}"><ContentControl  cal:View.Model="{Binding ParamPage}"/></dx:DXTabItem></dx:DXTabControl>

但是针对页面需要动态增减的场景，这种方法就不再适用了，下面就针对这种情况进行讲解.

数据定义

[AddINotifyPropertyChangedInterface]public class UserInfos{/// <summary>/// Header/// </summary>public int Header { get; set; }/// <summary>/// 姓名/// </summary>public string UserName { get; set; }public EventAggregatorViewModel EventAggregatorViewModel { get; set; }}

这里定义了一个标题Header ，用户名UserName ，以及另外个ViewModel类

数据集合定义：

public BindableCollection<UserInfos> UserInformationList { get; set; }

逻辑实现

后台实现-数据添加：这里有几个页面就add几组数据

try{UserInformationList = new BindableCollection<UserInfos>();UserInformationList.Add(new UserInfos(){Header = 1,UserName = "张三",EventAggregatorViewModel = new EventAggregatorViewModel()}); UserInformationList.Add(new UserInfos(){Header = 2,UserName = "李四",EventAggregatorViewModel = new EventAggregatorViewModel()});UserInformationList.Add(new UserInfos(){Header = 3,UserName = "王五",EventAggregatorViewModel = new EventAggregatorViewModel()});}catch (Exception ex){MessageBox.Show($"{ex}");}

item删除：这里通过前台绑定事件实现

public void RemoveItem(object dataContext){var buttonContext = dataContext as SimpleButton;var item = buttonContext.DataContext as UserInfos;loginfo.Debug($"Enter [RemoveItem] Header = [{item.Header}]");UserInformationList.Remove(item);loginfo.Debug($"Leave [RemoveItem].");}

前台XAML:这里标题和Item信息都通过模板实现

<dx:DXTabControl  ItemsSource="{Binding UserInformationList}"><dx:DXTabControl.ItemHeaderTemplate><DataTemplate><dxlc:LayoutItem Label="{Binding UserName}"><dx:SimpleButtonMargin="5,0,0,0"cal:Message.Attach="[Event Click] = [Action RemoveItem($source)]"Content="×" /></dxlc:LayoutItem></DataTemplate></dx:DXTabControl.ItemHeaderTemplate><dx:DXTabControl.ItemTemplate><DataTemplate><ContentControl  cal:View.Model="{Binding EventAggregatorViewModel}" /></DataTemplate></dx:DXTabControl.ItemTemplate></dx:DXTabControl>