C# WPF可拖拽的TabControl-新疆都市网

您当前的位置：新疆都市网 > 科技

C# WPF可拖拽的TabControl

2020-03-29 10:05:45 来源：互联网阅读：-

阅读导航

本文背景
代码实现
本文参考
源码

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