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;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;设想&#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;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】实现鼠标左键拖动窗体、右上角封闭窗体、超链接翻开网站等服从：

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，按处理计划目次构造代码文件便可运行。

演示Demo(点击下载->DragTabControl，2.39 MB)目次布局：

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

除非说明，文章均由 Dotnet9 整剪公布，欢迎转载。
转载请说明本文地点：https://dotnet9.com/7391.html

时候如流水，只能流去不流回！

点击《【浏览原文】》，本站另有更多技术类文章等着您哦！！！

保举浏览：三亚视窗

出色内容保举