XAML - 自定義控制元件

XAML 提供了建立自定義控制元件的最強大的功能之一，這使得建立功能豐富且可自定義的控制元件變得非常容易。當 Microsoft 提供的所有內建控制元件都不能滿足您的要求，或者您不想為第三方控制元件付費時，可以使用自定義控制元件。

在本章中，您將學習如何建立自定義控制元件。在開始瞭解自定義控制元件之前，讓我們先快速瞭解一下使用者控制元件。

使用者控制元件

使用者控制元件提供了一種技術，可以將不同的內建控制元件收集和組合在一起，並將它們打包成可重用的 XAML。使用者控制元件用於以下場景：

如果控制元件由現有控制元件組成，即您可以建立多個現有控制元件的單個控制元件。
如果控制元件不需要主題支援。使用者控制元件不支援複雜的自定義、控制元件模板，並且難以設定樣式。
如果開發人員更喜歡使用程式碼隱藏模型編寫控制元件，其中首先編寫檢視，然後為事件處理程式編寫直接程式碼。
您不會跨應用程式共享您的控制元件。

讓我們以使用者控制元件為例，並按照以下步驟操作：

步驟 1 - 建立一個新的 WPF 專案，然後右鍵單擊您的解決方案並選擇新增 > 新建項…

步驟 2 - 將開啟以下對話方塊，現在選擇使用者控制元件 (WPF) 並將其命名為MyUserControl。

步驟 3 - 單擊新增按鈕，您將看到兩個新檔案 (MyUserControl.xaml 和 MyUserControl.cs) 將新增到您的解決方案中。

以下是 MyUserControl.xaml 檔案中建立了一個按鈕和一個文字框以及一些屬性的 XAML 程式碼。

<UserControl x:Class = "XAMLUserControl.MyUserControl" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">
	
   <Grid>
      <TextBox Height = "23" HorizontalAlignment = "Left" 
         Margin = "80,49,0,0" Name = "txtBox" VerticalAlignment = "Top" Width = "200" />
      <Button Content = "Click Me" Height = "23" 
         HorizontalAlignment = "Left" Margin = "96,88,0,0" Name = "button" 
         VerticalAlignment = "Top" Width = "75" Click = "button_Click" />
   </Grid>
	
</UserControl>

以下是 MyUserControl.cs 檔案中按鈕單擊事件的 C# 程式碼，它更新文字框。

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLUserControl {
   /// <summary> 
      /// Interaction logic for MyUserControl.xaml
   /// </summary> 
	
   public partial class MyUserControl : UserControl {
      public MyUserControl() {
         InitializeComponent(); 
      }
      private void button_Click(object sender, RoutedEventArgs e) { 
         txtBox.Text = "You have just clicked the button"; 
      } 
   }
}

這是在 MainWindow.xaml 中新增使用者控制元件的實現。

<Window x:Class = "XAMLUserControl.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:control = "clr-namespace:XAMLUserControl" 
   Title = "MainWindow" Height = "350" Width = "525">
	
   <Grid>
      <control:MyUserControl/>
   </Grid>
	
</Window>

編譯並執行上述程式碼後，將產生以下輸出：

現在單擊“點選我”按鈕，您將看到文字框文字已更新。

自定義控制元件

自定義控制元件是一個類，它提供自己的樣式和模板，這些樣式和模板通常在generic.xaml中定義。自定義控制元件用於以下場景：

如果控制元件不存在，並且您必須從頭開始建立它。
如果您想透過新增額外的屬性或額外的功能來擴充套件或新增現有控制元件的功能以適應您的特定場景。
如果您的控制元件需要支援主題和樣式。
如果您想跨應用程式共享您的控制元件。

讓我們以自定義控制元件為例，並按照以下步驟操作。

步驟 1 - 建立一個新的 WPF 專案，然後右鍵單擊您的解決方案並選擇新增 > 新建項…

步驟 2 - 將開啟以下對話方塊。現在選擇自定義控制元件 (WPF) 並將其命名為MyCustomControl。

步驟 3 - 單擊新增按鈕，您將看到兩個新檔案 (Themes/Generic.xaml 和 MyCustomControl.cs) 將新增到您的解決方案中。

以下是 Generic.xaml 檔案中為自定義控制元件設定樣式的 XAML 程式碼。

<ResourceDictionary 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "clr-namespace:XAMLCustomControls">
	
   <Style TargetType = "{x:Type local:MyCustomControl}"
      BasedOn = "{StaticResource {x:Type Button}}"> 
      <Setter Property = "Background" Value = "LightSalmon"/>
      <Setter Property = "Foreground" Value = "Blue"/>
   </Style>
	
</ResourceDictionary>

以下是 MyCustomControl 類的 C# 程式碼，它繼承自按鈕類，並在建構函式中覆蓋元資料。

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLCustomControls {
   public class MyCustomControl : Button {
      static MyCustomControl() {
         DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), 
            new FrameworkPropertyMetadata(typeof(MyCustomControl)));
      }
   }
}

以下是 C# 中自定義控制元件單擊事件的實現，它更新文字塊的文字。

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace XAMLCustomControls {
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
      }
      private void customControl_Click(object sender, RoutedEventArgs e) {
         txtBlock.Text = "You have just click your custom control"; 
      } 
   }
}

以下是 MainWindow.xaml 中新增自定義控制元件和文字塊的實現。

<Window x:Class = "XAMLCustomControls.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:control = "clr-namespace:XAMLCustomControls" Title = "MainWindow"
   Height = "350" Width = "604">
	
   <StackPanel>
      <control:MyCustomControl x:Name = "customControl" 
         Content = "Click Me" Width = "70" Margin = "10" Click = "customControl_Click"/>
      <TextBlock Name = "txtBlock" Width = "250" Height = "30"/>
   </StackPanel>
	
</Window>

編譯並執行上述程式碼後，將產生以下輸出。觀察輸出包含一個自定義控制元件，它是一個自定義按鈕。

現在單擊自定義按鈕。您將看到文字塊文字已更新。

列印頁面