C# WPF可拖拽的TabControl

程序员文章站 2022-03-10 11:45:01

微信公众号： "Dotnet9" ，网站： "Dotnet9" ，问题或建议： "请网站留言" ，如果对您有所帮助： "欢迎赞赏" 。 C WPF可拖拽的TabControl 阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 4. 源码 1. 本文背景本文介绍使用第三方开源库 Draga ......

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

c# wpf可拖拽的tabcontrol

阅读导航

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

1. 本文背景

本文介绍使用第三方开源库 dragablz 实现可拖拽的 tabcontrol，本文代码效果图如下：
C# WPF可拖拽的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 的微信公众号，本站会及时推送最新技术文章

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

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

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

上一篇： CSS中使用文本阴影与元素阴影

下一篇：解决spring 处理request.getInputStream()输入流只能读取一次问题

C# WPF可拖拽的TabControl

c# wpf可拖拽的tabcontrol

1. 本文背景

2. 代码实现

2.1 引入样式

2.2 演示窗体布局

3.本文参考

4.源码

C# WPF 通过委托实现多窗口间的传值

FluentValidation在C# WPF中的应用

Demo登录框的可拖拽原生与jQuery两种办法实现教程

C#中WPF使用多线程调用窗体组件的方法

Android实现悬浮可拖拽的Button

C# 便捷实现可迭代对象间的赋值

C# 强行锁定第三方外部应用程序窗体窗口的分辨率尺寸大小禁止鼠标拖拽改变窗口大小

WPF 可触摸移动的ScrollViewer控件

C#更改tabControl选项卡颜色的方法

Vue 可拖拽组件Vue Smooth DnD的使用详解

C# WPF可拖拽的TabControl

c# wpf可拖拽的tabcontrol

1. 本文背景

2. 代码实现

2.1 引入样式

2.2 演示窗体布局

3.本文参考

4.源码

C# WPF 通过委托实现多窗口间的传值

FluentValidation在C# WPF中的应用

Demo登录框的可拖拽 原生与jQuery两种办法实现教程

C#中WPF使用多线程调用窗体组件的方法

Android实现悬浮可拖拽的Button

C# 便捷实现可迭代对象间的赋值

C# 强行锁定 第三方 外部 应用程序窗体窗口的分辨率尺寸大小 禁止鼠标拖拽改变窗口大小

WPF 可触摸移动的ScrollViewer控件

C#更改tabControl选项卡颜色的方法

Vue 可拖拽组件Vue Smooth DnD的使用详解

Demo登录框的可拖拽原生与jQuery两种办法实现教程

C# 强行锁定第三方外部应用程序窗体窗口的分辨率尺寸大小禁止鼠标拖拽改变窗口大小