概述

? ? ?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