概述
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