C# WPF TabControl控件用法详解

概述

TabControl我之前有讲过一节,内容详见:

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

功能演示.

C# WPF 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