微信公众号：dotnet9，网站：dotnet9，问题或建议：，
如果对您有所帮助：。

c# wpf可拖拽的tabcontrol

阅读导航

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

1. 本文背景

本文介绍使用第三方开源库 dragablz 实现可拖拽的 tabcontrol，本文代码效果图如下：

2. 代码实现

使用 .net framework 4.8 创建名为 “tabmenu2” 的wpf模板项目，添加三个nuget库：materialdesignthemes、materialdesigncolors 和 dragablz，其中 tabcontrol 的拖拽功能是由 dragablz 库实现的。

以下为三个库具体版本：

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="dragablz" version="0.0.3.203" targetframework="net45" />
  <package id="materialdesigncolors" version="1.2.3-ci948" targetframework="net48" />
  <package id="materialdesignthemes" version="3.1.0-ci948" targetframework="net48" />
</packages>

解决方案主要文件目录组织结构：

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 库的样式文件：

<application x:class="tabmenu2.app"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:dragablz="clr-namespace:dragablz;assembly=dragablz"
             startupuri="mainwindow.xaml">
    <application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <!-- primary color -->
                <resourcedictionary>
                    <!-- include your primary palette -->
                    <resourcedictionary.mergeddictionaries>
                        <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/materialdesigncolor.purple.xaml" />
                    </resourcedictionary.mergeddictionaries>

                    <!--
                            include three hues from the primary palette (and the associated forecolours).
                            do not rename, keep in sequence; light to dark.
                        -->
                    <solidcolorbrush x:key="primaryhuelightbrush" color="{staticresource primary100}"/>
                    <solidcolorbrush x:key="primaryhuelightforegroundbrush" color="{staticresource primary100foreground}"/>
                    <solidcolorbrush x:key="primaryhuemidbrush" color="{staticresource primary500}"/>
                    <solidcolorbrush x:key="primaryhuemidforegroundbrush" color="{staticresource primary500foreground}"/>
                    <solidcolorbrush x:key="primaryhuedarkbrush" color="{staticresource primary700}"/>
                    <solidcolorbrush x:key="primaryhuedarkforegroundbrush" color="{staticresource primary700foreground}"/>
                </resourcedictionary>

                <!-- secondary colour -->
                <resourcedictionary>
                    <!-- include your secondary pallette -->
                    <resourcedictionary.mergeddictionaries>
                        <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/materialdesigncolor.purple.xaml" />
                    </resourcedictionary.mergeddictionaries>

                    <!-- include a single secondary accent color (and the associated forecolour) -->
                    <solidcolorbrush x:key="secondaryaccentbrush" color="{staticresource accent200}"/>
                    <solidcolorbrush x:key="secondaryaccentforegroundbrush" color="{staticresource accent200foreground}"/>
                </resourcedictionary>

                <!-- include the dragablz material design style -->
                <resourcedictionary source="pack://application:,,,/dragablz;component/themes/materialdesign.xaml"/>
                <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml" />
            </resourcedictionary.mergeddictionaries>

            <!-- tell dragablz tab control to use the material design theme -->
            <style targettype="{x:type dragablz:tabablzcontrol}" basedon="{staticresource materialdesigntabablzcontrolstyle}" />
        </resourcedictionary>
    </application.resources>
</application>

2.2 演示窗体布局

文件【mainwindow.xaml】，引入 materialdesignthemes 和 dragablz 库的命名空间，【dragablz:tabablzcontrol】为 dragablz 库封装的 tabcontrol，使用方式和原生控件类似，单项标签依然使用 tabitem，使用起来很简单，源码如下：

<window x:class="tabmenu2.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:dragablz="clr-namespace:dragablz;assembly=dragablz"
        mc:ignorable="d"
        height="600" width="1080" resizemode="noresize" windowstartuplocation="centerscreen" 
        mouseleftbuttondown="window_mouseleftbuttondown" windowstyle="none">
    <grid>
        <grid height="60" verticalalignment="top" background="#ff9c27b0">
            <textblock text="dotnet9.com：可拖拽tabcontrol" foreground="white" horizontalalignment="center" verticalalignment="center" fontsize="22" fontfamily="champagne &amp; limousines" />
            <button horizontalalignment="right" verticalalignment="center" background="{x:null}" borderbrush="{x:null}" click="close_click">
                <materialdesign:packicon kind="close"/>
            </button>
        </grid>
        <grid margin="0 60 0 0">
            <dragablz:tabablzcontrol>
                <dragablz:tabablzcontrol.intertabcontroller>
                    <dragablz:intertabcontroller/>
                </dragablz:tabablzcontrol.intertabcontroller>
                <tabitem header="首页">
                    <grid>
                        <grid.rowdefinitions>
                            <rowdefinition height="50"/>
                            <rowdefinition height="*"/>
                        </grid.rowdefinitions>
                        <textblock fontsize="30" horizontalalignment="center" verticalalignment="center">
                            <run text="欢迎访问dotnet9的博客："/>
                            <hyperlink click="showweb_click" tag="https://dotnet9.com">https://dotnet9.com</hyperlink>
                        </textblock>
                        <webbrowser grid.row="1" margin="5" source="https://dotnet9.com"/>
                    </grid>
                </tabitem>
                <tabitem header="设计">
                    <grid>
                        <grid.rowdefinitions>
                            <rowdefinition height="50"/>
                            <rowdefinition height="*"/>
                        </grid.rowdefinitions>
                        <textblock text="为用户体验服务！" fontsize="30" horizontalalignment="center" verticalalignment="center"/>
                        <webbrowser grid.row="1" margin="5" source="https://dotnet9.com"/>
                    </grid>
                </tabitem>
                <tabitem header="帮助">
                    <grid>
                        <grid.rowdefinitions>
                            <rowdefinition height="50"/>
                            <rowdefinition height="*"/>
                        </grid.rowdefinitions>
                        <textblock fontsize="30" horizontalalignment="center" verticalalignment="center">
                            <run text="问答社区："/>
                            <hyperlink click="showweb_click" tag="https://dotnet9.com/questions-and-answers">https://dotnet9.com/questions-and-answers</hyperlink>
                        </textblock>
                        <webbrowser grid.row="1" margin="5" source="https://dotnet9.com/questions-and-answers"/>
                    </grid>
                </tabitem>
                <tabitem>
                    <tabitem.header>
                        <image source="https://img.dotnet9.com/logo.png"/>
                    </tabitem.header>
                    <grid>
                        <grid.rowdefinitions>
                            <rowdefinition height="50"/>
                            <rowdefinition height="*"/>
                        </grid.rowdefinitions>
                        <textblock horizontalalignment="center" verticalalignment="center" fontsize="30">
                            <hyperlink click="showweb_click" tag="https://dotnet9.com">https://dotnet9.com</hyperlink>
                        </textblock>
                        <webbrowser grid.row="1" margin="5" source="https://dotnet9.com"/>
                    </grid>
                </tabitem>
            </dragablz:tabablzcontrol>
        </grid>
    </grid>
</window>

后台代码【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

限时¥99，原价¥129

支付时输入优惠口令：dotnet123

到手价¥89，仅限200人

.net core 的这些最佳实践，你一定要学会！

△扫码免费试看课程

除非注明，文章均由 dotnet9 整理发布，欢迎转载。

转载请注明本文地址：

欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章

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

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

黄山市民网：https://www.huangshanshimin.com/