C# WPF可拖拽的TabControl
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 & 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 的微信公众号,本站会及时推送最新技术文章
时间如流水,只能流去不流回!
点击《【阅读原文】》,本站还有更多技术类文章等着您哦!!!
此刻顺便为我点个《【再看】》可好?