C# WPF可拖拽的TabControl

首頁>技術>沙漠盡頭的狼2020-01-18 02:26

C# WPF可拖拽的TabControl

閱讀導航

本文背景程式碼實現本文參考原始碼1. 本文背景

本文介紹使用第三方開源庫 Dragablz 實現可拖拽的 TabControl，本文程式碼效果圖如下：

2. 程式碼實現

使用 .Net Framework 4.8 建立名為 “TabMenu2” 的WPF模板專案，新增三個Nuget庫：MaterialDesignThemes、MaterialDesignColors 和 Dragablz，其中 TabControl 的拖拽功能是由 Dragablz 庫實現的。

以下為三個庫具體版本：

&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;

解決方案主要檔案目錄組織結構：

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

注：站長嘗試使用 .NET CORE 3.1 建立WPF專案，但 Dragablz 庫暫時未提供 .NET CORE 的版本。想著自己編譯 Dragablz 的 .NET CORE 版本，奈何功力不夠，改了一些原始碼，最後放棄了。文中程式碼及文末給出的 Demo 執行程式需要在 .NET Framework 4.0 執行時環境下執行，想嘗試編譯 Dragablz 庫的朋友可在文末給出的連結中下載編譯。

2.1 引入樣式

檔案【App.xaml】，在 StartupUri 中設定啟動的檢視【MainWindow.xaml】，並在【Application.Resources】節點增加 MaterialDesignThemes 和 Dragablz 庫的樣式檔案：

&lt;Window x:Class=&#34;TabMenu2.MainWindow&#34;        xmlns=&#34;/file/2020/01/18/20200118022508_13491.jpg.aspx        xmlns:materialDesign=&#34;/file/2020/01/18/20200118022510_13492.jpg        xmlns:d=&#34;/file/2020/01/18/20200118022511_13493.jpg.aspx        xmlns:x=&#34;/file/2020/01/18/20200118022512_13494.jpg.aspx        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;設計&#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;為使用者體驗服務！&#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;問答社群：&#34;/&gt;                            &lt;Hyperlink Click=&#34;ShowWeb_Click&#34; Tag=&#34;/file/2020/01/18/20200118022513_13495.jpg                        &lt;/TextBlock&gt;                        &lt;WebBrowser Grid.Row=&#34;1&#34; Margin=&#34;5&#34; Source=&#34;/file/2020/01/18/20200118022514_13496.jpg                    &lt;/Grid&gt;                &lt;/TabItem&gt;                &lt;TabItem&gt;                    &lt;TabItem.Header&gt;                        &lt;Image Source=&#34;/file/2020/01/18/20200118022515_13497.jpg.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】實現滑鼠左鍵拖動窗體、右上角關閉窗體、超連結開啟網站等功能：

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());}

3.本文參考視訊一：C# WPF Material Design UI: Tab Menu，配套原始碼：TabMenu2。C# WPF開源控制元件庫《MaterialDesignInXAML》Dragablz-C# WPF可拖拽的TabControl控制元件4.原始碼

效果圖實現程式碼在文中已經全部給出，可直接Copy，按解決方案目錄組織程式碼檔案即可執行。

DragTabControl TabMenu2.exe Dragablz.dll MaterialDesignThemes.Wpf.dll MaterialDesignColors.dll

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。

時間如流水，只能流去不流回！

230

XAML

XML

∨ 微信公眾號開發 (3) 選單處理

劇多

C# WPF可拖拽的TabControl

XAML

XML