整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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 & 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


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

          1. 添加 TabControl 控件:在 Visual Studio 的工具箱中找到 TabControl 控件,并將其拖放到窗體上。
          2. 添加標簽頁:您可以通過 TabPage 類來創建新的標簽頁,并將其添加到 TabControl 的 TabPages 集合中。
          3. 設置標簽頁的標題:為每個 TabPage 設置一個標題,這將顯示在標簽欄上。
          4. 布局控件:將其他控件拖動到 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 控件來創建具有多個視圖的用戶界面,允許用戶在不同的內容之間輕松切換。


          主站蜘蛛池模板: 无码人妻aⅴ一区二区三区有奶水| 无码人妻aⅴ一区二区三区有奶水| 人妻体内射精一区二区三区| 色综合久久一区二区三区| 人妻无码一区二区三区免费| 青娱乐国产官网极品一区 | 国产伦精品一区二区三区不卡| 国产情侣一区二区三区| 日韩一区二区在线观看| 国产一区二区精品久久岳√| 精品福利视频一区二区三区| 久久久久人妻精品一区二区三区 | 亚洲AV无码一区二区三区鸳鸯影院 | 在线免费观看一区二区三区| 精品人妻系列无码一区二区三区 | 无码AV动漫精品一区二区免费| 蜜芽亚洲av无码一区二区三区| 一区二区三区日韩| 91成人爽a毛片一区二区| 精品一区二区三区在线观看视频| 国产亚洲一区二区三区在线观看 | 国产在线精品一区二区夜色| 久久精品国产一区二区三区不卡| 亚洲日本一区二区三区在线不卡| 一区二区视频在线免费观看| 亚洲AV成人精品日韩一区18p| 亚洲美女高清一区二区三区| 精品福利一区二区三区| 亚洲日韩精品一区二区三区无码| 亚洲日本一区二区三区在线 | 久久精品免费一区二区喷潮| 国产精品亚洲一区二区在线观看| 午夜视频一区二区| 国产aⅴ一区二区| 中文乱码精品一区二区三区| 亚洲乱码日产一区三区| 国产成人久久精品区一区二区| 亚洲丶国产丶欧美一区二区三区| 国产精品无码一区二区三区在| 成人在线视频一区| 无码人妻精品一区二区三区东京热 |