【原】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:SimpleButton                            Margin="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>

效果演示