整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
讀導航
本文介紹使用第三方開源庫 Dragablz 實現可拖拽的 TabControl，本文代碼效果圖如下：
使用 .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>解決方案主要文件目錄組織結構：
注：站長嘗試使用 .NET CORE 3.1 創建WPF項目，但 Dragablz 庫暫時未提供 .NET CORE 的版本。想著自己編譯 Dragablz 的 .NET CORE 版本，奈何功力不夠，改了一些源碼，最后放棄了。文中代碼及文末給出的 Demo 運行程序需要在 .NET Framework 4.0 運行時環境下運行，想嘗試編譯 Dragablz 庫的朋友可在文末給出的鏈接中下載編譯。
文件【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>文件【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());
}效果圖實現代碼在文中已經全部給出，可直接Copy，按解決方案目錄組織代碼文件即可運行。
演示Demo(點擊下載->DragTabControl，2.39 MB)目錄結構：
除非注明，文章均由 Dotnet9 整理發布，歡迎轉載。
轉載請注明本文地址：https://dotnet9.com/7391.html
時間如流水，只能流去不流回！
點擊《【閱讀原文】》，本站還有更多技術類文章等著您哦！！！
下是一個使用C# WinForms中的TabControl控件的簡單示例：
using System;
using System.Drawing;
using System.Windows.Forms;
public class MainForm : Form
{
private TabControl tabControl;
private TabPage tabPage1;
private TabPage tabPage2;
private TextBox textBox1;
private TextBox textBox2;
public MainForm()
{
// 創建主窗體
Text = "TabControl示例";
Size = new Size(400, 300);
// 創建TabControl控件
tabControl = new TabControl();
tabControl.Dock = DockStyle.Fill;
// 創建第一個選項卡頁
tabPage1 = new TabPage();
tabPage1.Text = "選項卡1";
// 創建第一個選項卡頁中的文本框
textBox1 = new TextBox();
textBox1.Multiline = true;
textBox1.Dock = DockStyle.Fill;
textBox1.Text = "選項卡1的內容";
// 將文本框添加到第一個選項卡頁
tabPage1.Controls.Add(textBox1);
// 創建第二個選項卡頁
tabPage2 = new TabPage();
tabPage2.Text = "選項卡2";
// 創建第二個選項卡頁中的文本框
textBox2 = new TextBox();
textBox2.Multiline = true;
textBox2.Dock = DockStyle.Fill;
textBox2.Text = "選項卡2的內容";
// 將文本框添加到第二個選項卡頁
tabPage2.Controls.Add(textBox2);
// 將選項卡頁添加到TabControl控件
tabControl.TabPages.Add(tabPage1);
tabControl.TabPages.Add(tabPage2);
// 將TabControl控件添加到主窗體
Controls.Add(tabControl);
}
[STAThread]
static void Main()
{
Application.Run(new MainForm());
}
}
在示例中，創建了一個名為MainForm的主窗體，并在窗體上添加了一個名為tabControl的TabControl控件。還創建了兩個選項卡頁tabPage1和tabPage2，并將它們分別添加到TabControl控件中。
在每個選項卡頁中創建了一個文本框textBox1和textBox2，并將它們分別添加到對應的選項卡頁中。
最后，將TabControl控件添加到主窗體的控件集合中。
運行此示例，您將看到一個具有TabControl控件和兩個選項卡頁的窗體。您可以切換選項卡來顯示不同的內容。
WinForms 中，TabControl 控件用于創建標簽頁界面，允許用戶在多個視圖或頁面之間切換。以下是如何使用 TabControl 控件的一些基本信息和示例代碼：
以下是一個簡單的示例，演示如何創建一個帶有三個標簽頁的 TabControl 控件，并在每個標簽頁中添加控件：
public partial class MainForm : Form
{
public MainForm()
{
InitializeComponent();
// 創建 TabControl 實例
TabControl tabControl1 = new TabControl();
// 設置 TabControl 的一些屬性
tabControl1.Location = new Point(10, 10);
tabControl1.Size = new Size(300, 200);
// 創建第一個標簽頁
TabPage tabPage1 = new TabPage();
tabPage1.Text = "標簽頁 1";
tabControl1.TabPages.Add(tabPage1);
// 創建第二個標簽頁
TabPage tabPage2 = new TabPage();
tabPage2.Text = "標簽頁 2";
tabControl1.TabPages.Add(tabPage2);
// 創建第三個標簽頁
TabPage tabPage3 = new TabPage();
tabPage3.Text = "標簽頁 3";
tabControl1.TabPages.Add(tabPage3);
// 將 TabControl 添加到窗體上
this.Controls.Add(tabControl1);
// 為每個標簽頁添加控件
for (int i = 0; i < tabControl1.TabCount; i++)
{
TabPage currentTabPage = tabControl1.TabPages[i];
switch (i)
{
case 0:
Label label1 = new Label();
label1.Text = "這是標簽頁 1 的內容。";
currentTabPage.Controls.Add(label1);
break;
case 1:
Button button1 = new Button();
button1.Text = "這是標簽頁 2 的內容。";
currentTabPage.Controls.Add(button1);
break;
case 2:
TextBox textBox1 = new TextBox();
textBox1.Text = "這是標簽頁 3 的內容。";
currentTabPage.Controls.Add(textBox1);
break;
}
}
}
}
在這個示例中，我們創建了一個 TabControl 實例，并設置了其位置和大小。然后，我們創建了三個 TabPage 實例，并為每個實例設置了一個標題。接著，我們將這些 TabPage 實例添加到 TabControl 的 TabPages 集合中。最后，我們為每個標簽頁添加了不同類型的控件，并將它們添加到相應的 TabPage 中。
通過這些基本步驟，您可以在 WinForms 應用程序中使用 TabControl 控件來創建具有多個視圖的用戶界面，允許用戶在不同的內容之間輕松切換。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
