新疆信息港 > 財經(jīng) >C# WPF可拖拽的TabControl

C# WPF可拖拽的TabControl

2020-03-23 09:37:27

來源：互聯(lián)網(wǎng)

閱讀：-

閱讀導航本文背景代碼實現(xiàn)本文參考源碼1. 本文背景本文介紹使用第三方開源庫 Dragablz 實現(xiàn)可拖拽的 TabControl，本文代碼效果圖如下：2. 代碼實現(xiàn)使用 .Net Framework 4....

閱讀導航

本文背景
代碼實現(xiàn)
本文參考
源碼

1. 本文背景

本文介紹使用第三方開源庫 Dragablz 實現(xiàn)可拖拽的 TabControl，本文代碼效果圖如下：

2. 代碼實現(xiàn)

使用 .Net Framework 4.8 創(chuàng)建名為 “TabMenu2” 的WPF模板項目，添加三個Nuget庫：MaterialDesignThemes、MaterialDesignColors 和 Dragablz，其中 TabControl 的拖拽功能是由 Dragablz 庫實現(xiàn)的。

以下為三個庫具體版本：

&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&gt;&lt;packages&gt;  &lt;package id=&#34;Dragablz&#34; version=&#34;0.0.3.203&#34; targetFramework=&#34;net45&#34; /&gt;  &lt;package id=&#34;MaterialDesignColors&#34; version=&#34;1.2.3-ci948&#34; targetFramework=&#34;net48&#34; /&gt;  &lt;package id=&#34;MaterialDesignThemes&#34; version=&#34;3.1.0-ci948&#34; targetFramework=&#34;net48&#34; /&gt;&lt;/packages&gt;

解決方案主要文件目錄組織結(jié)構(gòu)：

TabMenu2
App.xaml
MainWindow.xaml
MainWIndow.xaml.cs

注：站長嘗試使用 .NET CORE 3.1 創(chuàng)建WPF項目，但 Dragablz 庫暫時未提供 .NET CORE 的版本。想著自己編譯 Dragablz 的 .NET CORE 版本，奈何功力不夠，改了一些源碼，最后放棄了。文中代碼及文末給出的 Demo 運行程序需要在 .NET Framework 4.0 運行時環(huán)境下運行，想嘗試編譯 Dragablz 庫的朋友可在文末給出的鏈接中下載編譯。

2.1 引入樣式

文件【App.xaml】，在 StartupUri 中設(shè)置啟動的視圖【MainWindow.xaml】，并在【Application.Resources】節(jié)點增加 MaterialDesignThemes 和 Dragablz 庫的樣式文件：

&lt;Application x:Class=&#34;TabMenu2.App&#34;             xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;             xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;             xmlns:dragablz=&#34;clr-namespace:Dragablz;assembly=Dragablz&#34;             StartupUri=&#34;MainWindow.xaml&#34;&gt;    &lt;Application.Resources&gt;        &lt;ResourceDictionary&gt;            &lt;ResourceDictionary.MergedDictionaries&gt;                &lt;!-- primary color --&gt;                &lt;ResourceDictionary&gt;                    &lt;!-- include your primary palette --&gt;                    &lt;ResourceDictionary.MergedDictionaries&gt;                        &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.purple.xaml&#34; /&gt;                    &lt;/ResourceDictionary.MergedDictionaries&gt;                    &lt;!--                            include three hues from the primary palette (and the associated forecolours).                            Do not rename, keep in sequence; light to dark.                        --&gt;                    &lt;SolidColorBrush x:Key=&#34;PrimaryHueLightBrush&#34; Color=&#34;{StaticResource Primary100}&#34;/&gt;                    &lt;SolidColorBrush x:Key=&#34;PrimaryHueLightForegroundBrush&#34; Color=&#34;{StaticResource Primary100Foreground}&#34;/&gt;                    &lt;SolidColorBrush x:Key=&#34;PrimaryHueMidBrush&#34; Color=&#34;{StaticResource Primary500}&#34;/&gt;                    &lt;SolidColorBrush x:Key=&#34;PrimaryHueMidForegroundBrush&#34; Color=&#34;{StaticResource Primary500Foreground}&#34;/&gt;                    &lt;SolidColorBrush x:Key=&#34;PrimaryHueDarkBrush&#34; Color=&#34;{StaticResource Primary700}&#34;/&gt;                    &lt;SolidColorBrush x:Key=&#34;PrimaryHueDarkForegroundBrush&#34; Color=&#34;{StaticResource Primary700Foreground}&#34;/&gt;                &lt;/ResourceDictionary&gt;                &lt;!-- secondary colour --&gt;                &lt;ResourceDictionary&gt;                    &lt;!-- include your secondary pallette --&gt;                    &lt;ResourceDictionary.MergedDictionaries&gt;                        &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.purple.xaml&#34; /&gt;                    &lt;/ResourceDictionary.MergedDictionaries&gt;                    &lt;!-- include a single secondary accent color (and the associated forecolour) --&gt;                    &lt;SolidColorBrush x:Key=&#34;SecondaryAccentBrush&#34; Color=&#34;{StaticResource Accent200}&#34;/&gt;                    &lt;SolidColorBrush x:Key=&#34;SecondaryAccentForegroundBrush&#34; Color=&#34;{StaticResource Accent200Foreground}&#34;/&gt;                &lt;/ResourceDictionary&gt;                &lt;!-- Include the Dragablz Material Design style --&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml&#34;/&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml&#34; /&gt;            &lt;/ResourceDictionary.MergedDictionaries&gt;            &lt;!-- tell Dragablz tab control to use the Material Design theme --&gt;            &lt;Style TargetType=&#34;{x:Type dragablz:TabablzControl}&#34; BasedOn=&#34;{StaticResource MaterialDesignTabablzControlStyle}&#34; /&gt;        &lt;/ResourceDictionary&gt;    &lt;/Application.Resources&gt;&lt;/Application&gt;

2.2 演示窗體布局

文件【MainWindow.xaml】，引入 MaterialDesignThemes 和 Dragablz 庫的命名空間，【dragablz:TabablzControl】為 Dragablz 庫封裝的 TabControl，使用方式和原生控件類似，單項標簽依然使用 TabItem，使用起來很簡單，源碼如下：

&lt;Window x:Class=&#34;TabMenu2.MainWindow&#34;        xmlns=&#34;http://schemas.microsoft.com/winfx/2006/xaml/presentation&#34;        xmlns:materialDesign=&#34;http://materialdesigninxaml.net/winfx/xaml/themes&#34;        xmlns:d=&#34;http://schemas.microsoft.com/expression/blend/2008&#34;        xmlns:x=&#34;http://schemas.microsoft.com/winfx/2006/xaml&#34;        xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34;        xmlns:dragablz=&#34;clr-namespace:Dragablz;assembly=Dragablz&#34;        mc:Ignorable=&#34;d&#34;        Height=&#34;600&#34; Width=&#34;1080&#34; ResizeMode=&#34;NoResize&#34; WindowStartupLocation=&#34;CenterScreen&#34;         MouseLeftButtonDown=&#34;Window_MouseLeftButtonDown&#34; WindowStyle=&#34;None&#34;&gt;    &lt;Grid&gt;        &lt;Grid Height=&#34;60&#34; VerticalAlignment=&#34;Top&#34; Background=&#34;#FF9C27B0&#34;&gt;            &lt;TextBlock Text=&#34;Dotnet9.com：可拖拽TabControl&#34; Foreground=&#34;White&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34; FontSize=&#34;22&#34; FontFamily=&#34;Champagne &amp; Limousines&#34; /&gt;            &lt;Button HorizontalAlignment=&#34;Right&#34; VerticalAlignment=&#34;Center&#34; Background=&#34;{x:Null}&#34; BorderBrush=&#34;{x:Null}&#34; Click=&#34;Close_Click&#34;&gt;                &lt;materialDesign:PackIcon Kind=&#34;Close&#34;/&gt;            &lt;/Button&gt;        &lt;/Grid&gt;        &lt;Grid Margin=&#34;0 60 0 0&#34;&gt;            &lt;dragablz:TabablzControl&gt;                &lt;dragablz:TabablzControl.InterTabController&gt;                    &lt;dragablz:InterTabController/&gt;                &lt;/dragablz:TabablzControl.InterTabController&gt;                &lt;TabItem Header=&#34;首頁&#34;&gt;                    &lt;Grid&gt;                        &lt;Grid.RowDefinitions&gt;                            &lt;RowDefinition Height=&#34;50&#34;/&gt;                            &lt;RowDefinition Height=&#34;*&#34;/&gt;                        &lt;/Grid.RowDefinitions&gt;                        &lt;TextBlock FontSize=&#34;30&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34;&gt;                            &lt;Run Text=&#34;歡迎訪問Dotnet9的博客：&#34;/&gt;                            &lt;Hyperlink Click=&#34;ShowWeb_Click&#34; Tag=&#34;https://dotnet9.com&#34;&gt;https://dotnet9.com&lt;/Hyperlink&gt;                        &lt;/TextBlock&gt;                        &lt;WebBrowser Grid.Row=&#34;1&#34; Margin=&#34;5&#34; Source=&#34;https://dotnet9.com&#34;/&gt;                    &lt;/Grid&gt;                &lt;/TabItem&gt;                &lt;TabItem Header=&#34;設(shè)計&#34;&gt;                    &lt;Grid&gt;                        &lt;Grid.RowDefinitions&gt;                            &lt;RowDefinition Height=&#34;50&#34;/&gt;                            &lt;RowDefinition Height=&#34;*&#34;/&gt;                        &lt;/Grid.RowDefinitions&gt;                        &lt;TextBlock Text=&#34;為用戶體驗服務(wù)！&#34; FontSize=&#34;30&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34;/&gt;                        &lt;WebBrowser Grid.Row=&#34;1&#34; Margin=&#34;5&#34; Source=&#34;https://dotnet9.com&#34;/&gt;                    &lt;/Grid&gt;                &lt;/TabItem&gt;                &lt;TabItem Header=&#34;幫助&#34;&gt;                    &lt;Grid&gt;                        &lt;Grid.RowDefinitions&gt;                            &lt;RowDefinition Height=&#34;50&#34;/&gt;                            &lt;RowDefinition Height=&#34;*&#34;/&gt;                        &lt;/Grid.RowDefinitions&gt;                        &lt;TextBlock FontSize=&#34;30&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34;&gt;                            &lt;Run Text=&#34;問答社區(qū)：&#34;/&gt;                            &lt;Hyperlink Click=&#34;ShowWeb_Click&#34; Tag=&#34;https://dotnet9.com/questions-and-answers&#34;&gt;https://dotnet9.com/questions-and-answers&lt;/Hyperlink&gt;                        &lt;/TextBlock&gt;                        &lt;WebBrowser Grid.Row=&#34;1&#34; Margin=&#34;5&#34; Source=&#34;https://dotnet9.com/questions-and-answers&#34;/&gt;                    &lt;/Grid&gt;                &lt;/TabItem&gt;                &lt;TabItem&gt;                    &lt;TabItem.Header&gt;                        &lt;Image Source=&#34;https://img.dotnet9.com/logo.png&#34;/&gt;                    &lt;/TabItem.Header&gt;                    &lt;Grid&gt;                        &lt;Grid.RowDefinitions&gt;                            &lt;RowDefinition Height=&#34;50&#34;/&gt;                            &lt;RowDefinition Height=&#34;*&#34;/&gt;                        &lt;/Grid.RowDefinitions&gt;                        &lt;TextBlock HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34; FontSize=&#34;30&#34;&gt;                            &lt;Hyperlink Click=&#34;ShowWeb_Click&#34; Tag=&#34;https://dotnet9.com&#34;&gt;https://dotnet9.com&lt;/Hyperlink&gt;                        &lt;/TextBlock&gt;                        &lt;WebBrowser Grid.Row=&#34;1&#34; Margin=&#34;5&#34; Source=&#34;https://dotnet9.com&#34;/&gt;                    &lt;/Grid&gt;                &lt;/TabItem&gt;            &lt;/dragablz:TabablzControl&gt;        &lt;/Grid&gt;    &lt;/Grid&gt;&lt;/Window&gt;

后臺代碼【MainWindow.xaml.cs】實現(xiàn)鼠標左鍵拖動窗體、右上角關(guān)閉窗體、超鏈接打開網(wǎng)站等功能：

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){    DragMove();}private void Close_Click(object sender, RoutedEventArgs e){    this.Close();}private void ShowWeb_Click(object sender, RoutedEventArgs e){    Process.Start((sender as Hyperlink).Tag.ToString());}