天天看點

C# WPF TabControl控件用法詳解

作者:opendotnet

概述

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