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

除非注明，文章均由 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 控件

添加 TabControl 控件：在 Visual Studio 的工具箱中找到 TabControl 控件，并將其拖放到窗體上。
添加標簽頁：您可以通過 TabPage 類來創建新的標簽頁，并將其添加到 TabControl 的 TabPages 集合中。
設置標簽頁的標題：為每個 TabPage 設置一個標題，這將顯示在標簽欄上。
布局控件：將其他控件拖動到 TabPage 中，并通過設置它們的位置和大小來布局。

示例代碼

以下是一個簡單的示例，演示如何創建一個帶有三個標簽頁的 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 控件來創建具有多個視圖的用戶界面，允許用戶在不同的內容之間輕松切換。

在線咨詢

上一篇：游記｜新奧爾良四天動吃動吃
下一篇：Java 將PDF轉換為PNG圖片、HTML、SVG、XPS及Word文件格式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商