C# WPF可拖拽的TabControl

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，
如果对您有所帮助：欢迎赞赏。

C# WPF可拖拽的TabControl

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考
  4. 源码

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.本文参考

  1. 视频一：C# WPF Material Design UI: Tab Menu，配套源码：TabMenu2。
  2. C# WPF开源控件库《MaterialDesignInXAML》
  3. 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 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/7391.html

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


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

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

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

原文地址：https://www.cnblogs.com/Dotnet9-com/p/12207617.html

时间： 2024-11-07 14:23:16

C# WPF可拖拽的TabControl的相关文章

WPF简单拖拽功能实现

1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指针会变成拖放图标. ③用户释放鼠标键时,元素接收信息并决定如何处理接收到的信息.在没有释放鼠标键时,可按下Esc键取消该操作. 3.Demo 下面实例是一个界面中分上下两个Label.当鼠标点击并拖拽上方Label到下方时,下方Label显示上方Label的内容. XAML代码: <Window x

WPF 精修篇 拖拽 DragDrop

原文:WPF 精修篇 拖拽 DragDrop WPF 实现拖拽 效果 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="197*"/> <ColumnDefinition Width="209*"/> <ColumnDefinition Width="111*"/> </Grid.ColumnDefinitions&g

【C#/WPF】用Thumb做可拖拽的UI控件

原文:[C#/WPF]用Thumb做可拖拽的UI控件 需求:简单的可拖拽的图片 使用System.Windows.Controls.Primitives.Thumb类 前台: <Canvas x:Name="g"> <Thumb Canvas.Left="10" Canvas.Top="20" Canvas.ZIndex="99" DragDelta="Thumb_DragDelta"&g

WPF中元素拖拽的两个实例

原文:WPF中元素拖拽的两个实例 今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListView的某一个节点,从而将该子元素作为当前节点的子节点.第二个例子就是将ListView的某一项拖拽到另外一项上从而使两个子项位置互换,这两个例子的原理类似,实现细节上有所差别,下面就具体分析一下这些细节. DEMO1 一 示例截图 图一 示例一截图 二 重点原理分

【WPF】总结窗口和控件拖拽的实现

前文 本文只对笔者学习掌握的一般的拖动问题的实现方法进行整理和讨论,包括窗口.控件等内容的拖动. 希望本文能对一些寻找此问题的解决方法的人和一些刚入门的人一些帮助.笔者为WPF初学者,能得到各位的批评指正也是荣幸万分.有更好更多的方法,劳烦与我分享,不胜感激. 本文的各种实现方法其他博客中也都有提及,很多文章内容详实,有图有代码,笔者就不重复造轮子了.就写写自己的一些理解吧. 关键词 Window, UserControls, drag, Thumb 参考资料 http://www.cnblog

wpf拖拽

简单拖拽的实现是,实现源控件的MouseDown事件,和目标控件Drop事件.调用DragDrop.DoDragDrop()以启动拖放操作,DragDrop.DoDragDrop()函数接受三个参数:dragSource.data以及allowedEffects.特别需要注意的 是dragSource参数.该参数标示了拖拽操作的消息源,也决定了所有的消息源事件由谁发出.参数data则用来包装Drag&Drop所操 作的数据.一般情况下,其都是一个DataObject类型的实例.该实例内部应包装拖

【C#】组件分享：FormDragger-窗体拖拽器

适用:.net2.0+ winform项目 介绍: 类似QQ.迅雷等讲究UI体验的软件,都支持在窗口内多处地方拖动窗口,而不必老实巴交的去顶部标题栏拖,这个组件就是让winform也能这样随性拖拽,随性度或更甚.先看效果: 可拖拽的地方包括不限于: 窗体.Panel.GroupBox.TabControl等容器控件的空白区: 菜单栏.工具栏.状态栏等bar的空白区,以及无效项目: Label.PictureBox.ProgressBar等通常不与鼠标交互的控件: 一切无效控件(Enabled为f

拖拽原理以及代码实现

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等:挺好玩儿.下面分享一下拖拽的原理,和码友们一起学习! 拖拽流程: 1)事件:onmousedown:onmousemove:onmouseup: 2)实现原理分析: 拖拽是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值.当onmousedown或onmousemove时,都可以获取到当前鼠标的位置,即移动前的坐标值与移动中的坐标值.参考如下图: 如上图所示: 在on

Qt之QAbstractItemView视图项拖拽(二)

一.需求说明 上一篇文章Qt之QAbstractItemView视图项拖拽(一)讲述了实现QAbstractItemView视图项拖拽的一种方式,是基于QDrag实现的,这个类是qt自己封装好了的,所以可定制性也就没有了那么强,最明显的是,这个类在执行exec方法后,mouse系列的回调接口就被阻塞了,随之而来的问题就是拖拽时item项没有了hover特性,为了解决这个问题,我们就不能使用QDrag类来实现拖拽了,这也是这篇文章我要讲述的内容. 二.效果展示 如图1是demo的效果展示,比较丑,