C# WPF可拖拽的TabControl
C# WPF可拖拽的TabControl
閱讀導航git
- 本文背景
- 代碼實現
- 本文參考
- 源碼
1. 本文背景
本文介紹使用第三方開源庫 Dragablz 實現可拖拽的 TabControl，本文代碼效果圖以下：
github
2. 代碼實現
使用 .Net Framework 4.8 建立名爲 「TabMenu2」 的WPF模板項目，添加三個Nuget庫：MaterialDesignThemes、MaterialDesignColors 和 Dragablz，其中 TabControl 的拖拽功能是由 Dragablz 庫實現的。express
如下爲三個庫具體版本：c#
<?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 庫的朋友可在文末給出的連接中下載編譯。app
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】實現鼠標左鍵拖動窗體、右上角關閉窗體、超連接打開網站等功能：this
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 整理髮布，歡迎轉載。
轉載請註明本文地址：https://dotnet9.com/7391.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公衆號，本站會及時推送最新技術文章
時間如流水，只能流去不流回！
點擊《【閱讀原文】》，本站還有更多技術類文章等着您哦！！！
此刻順便爲我點個《【再看】》可好？
相關文章
- 1. WPF 控件庫——可拖動選項卡的TabControl
- 2. 可拖拽的ImageButton
- 3. 可拖拽div
- 4. WPF - Enhanced TabControl - TabControlEx aka Prerendering TabControl
- 5. Android 可拖拽的RecyclerView
- 6. Jquery 可拖拽的Ztree
- 7. 「 iOS 」可拖拽Cell
- 8. 給Winform中的TabControl添加更現代的拖拽功能
- 9. 可拖拽的3D盒子
- 10. 實現可拖拽的RecycleView
- 更多相關文章...
- • C# 可空類型（Nullable） - C#教程
- • PHP 可用的函數 - PHP參考手冊
- • C# 中 foreach 遍歷的用法
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
