C# WPF TabControl控件用法详解

概述

     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