概述

TabControl我之前有讲过一节，内容详见：C# WPF TabControl用法指南(精品)，上节主要讲解了tabcontrol控件的左右翻页，以及页面筛选，以及数据绑定等内容，这节内容继续接续上节内容进行扩展讲解，主要针对页面删除、增加以及对应的事件进行讲解.

功能演示

代码实现

前台XAML:

<UserControl x:Class="Caliburn.Micro.Hello.TabControlView"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:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"xmlns:local="clr-namespace:Caliburn.Micro.Hello"xmlns:cal="http://www.caliburnproject.org"mc:Ignorable="d"   d:DesignHeight="450" d:DesignWidth="800" ><Grid ><Grid.RowDefinitions><RowDefinition Height="35"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><StackPanel Grid.Row="0" Margin="2" Orientation="Horizontal" HorizontalAlignment="Right"><Label Content="跳转到页:" VerticalAlignment="Center" Margin="5"/><TextBox Text="{Binding PageIndex}"   VerticalAlignment="Center" Margin="5" MinWidth="50"/><dx:SimpleButton Content="跳转" Name="Button_Click" Margin="5"/></StackPanel><dx:DXTabControl   Grid.Row="1"  SelectedIndex="{Binding SelectedIndex}"ItemsSource="{Binding ParamItems}" Margin="5"cal:Message.Attach="[Event TabAdding]=[DXTAB_TabAdding($source,$eventArgs)];[Event TabRemoved]=[DXTabControl_TabRemoved($source,$eventArgs)];[Event TabRemoving]=[DXTabControl_TabRemoving($source,$eventArgs)];[Event TabHiding]=[DXTabControl_TabHiding($source,$eventArgs)];" ><dx:DXTabControl.ItemHeaderTemplate><DataTemplate><StackPanel Orientation="Horizontal"><!--<Image Source="{Binding ImageLabel}"/>--><dxlc:LayoutItem Label="{Binding Header}"/></StackPanel></DataTemplate></dx:DXTabControl.ItemHeaderTemplate><dx:DXTabControl.ItemTemplate><DataTemplate><ContentControl  cal:View.Model="{Binding SubView}" /></DataTemplate></dx:DXTabControl.ItemTemplate><dx:DXTabControl.View><dx:TabControlScrollView AllowHideTabItems="True" AllowAnimation="True" NewButtonShowMode="InTabPanel" ShowHeaderMenu="True"AllowKeyboardNavigation="True" AllowScrollOnMouseWheel="True" RemoveTabItemsOnHiding="True" /></dx:DXTabControl.View></dx:DXTabControl><!--<dxg:GridControl ><dxg:GridControl.View><dxg:TableView AllowPaging="True"/></dxg:GridControl.View></dxg:GridControl>--></Grid>
</UserControl>

这里绑定了几个事件：

cal:Message.Attach="[Event TabAdding]=[DXTAB_TabAdding($source,$eventArgs)];[Event TabRemoved]=[DXTabControl_TabRemoved($source,$eventArgs)];[Event TabRemoving]=[DXTabControl_TabRemoving($source,$eventArgs)];[Event TabHiding]=[DXTabControl_TabHiding($source,$eventArgs)];" >

TabAdding，是在页面添加前触发，TabRemoved：页面移除完成后触发；TabRemoving：页面移除前触发，TabHiding：页面隐层前触发.

需要注意的是需要触发移除页面事件，首先需要将属性RemoveTabItemsOnHiding设置为true。

NewButtonShowMode这个属性：是个枚举量，设置的是添加页面+按钮的位置，详解如下：

//// 摘要://     Lists values that specify where to show the New button.[Flags]public enum NewButtonShowMode{//// 摘要://     The New Button is not shown.NoWhere = 0,//// 摘要://     The New Button is shown in the Header Area.InHeaderArea = 1,//// 摘要://     The New Button is located inside the Tab Panel, next to tab item headers.InTabPanel = 2,//// 摘要://     The New Button is shown in the Tab Panel and Header Area simultaneously.InHeaderAreaAndTabPanel = 3}

后台cs代码：

using DevExpress.Xpf.Core;
using PropertyChanged;
using System.Collections.ObjectModel;
using System.Windows;namespace Caliburn.Micro.Hello
{[AddINotifyPropertyChangedInterface]public class TabControlViewModel : Screen, IViewModel{public ObservableCollection<ParamDTO> ParamItems { get; set; } = new ObservableCollection<ParamDTO>();public int SelectedIndex { get; set; }public int PageIndex { get; set; }public TabControlViewModel(){DisplayName = "TabControlTest";PageIndex = 3;ParamItems.Add(new ParamDTO() { Header = "1", SubView = new MemorandumViewModel() });ParamItems.Add(new ParamDTO() { Header = "2", SubView = new MemorandumViewModel() });ParamItems.Add(new ParamDTO() { Header = "3", SubView = new MemorandumViewModel() });ParamItems.Add(new ParamDTO() { Header = "4", SubView = new MemorandumViewModel() });}public void Button_Click(){SelectedIndex = PageIndex - 1;}public void DXTAB_TabAdding(object sender, TabControlTabAddingEventArgs e){int currentPageCount = ParamItems.Count;e.Item = new ParamDTO(){Header = $"{currentPageCount + 1}",SubView = new MemorandumViewModel()};}public void DXTabControl_TabRemoving(object sender, TabControlTabRemovingEventArgs e){}public void DXTabControl_TabRemoved(object sender, TabControlTabRemovedEventArgs e){for (int i = 0; i < ParamItems.Count; i++){ParamItems[i].Header = $"{i + 1}";}}public void DXTabControl_TabHiding(object sender, TabControlTabHidingEventArgs e){if (ParamItems.Count == 1){MessageBox.Show($"There must be at least one of ParamDTO pages", "Page Remove");e.Cancel = true;}else{var confirmResult = MessageBox.Show($"确定删除页面","警告",MessageBoxButton.YesNo);if (confirmResult == MessageBoxResult.Yes || confirmResult == MessageBoxResult.OK){//to do}else{e.Cancel = true;}}}}[AddINotifyPropertyChangedInterface]public class ParamDTO{/// <summary>/// 标题/// </summary>public string Header { get; set; }/// <summary>/// SubView/// </summary>public MemorandumViewModel SubView { get; set; }}}

这里在TabHiding的事件里面设置了弹窗确认，如果点了确认再删除页面，点击了取消则不删除，防止了用户误操作把页面删除.页面删除完成后在TabRemoved里面重新排布了页面标题序号.

源码下载：百度网盘

链接：https://pan.baidu.com/s/1LVLSb9PzOme9m0S5GSP6Ow

提取码：6666