WPF - 自定義控制元件

WPF 應用程式允許建立自定義控制元件，這使得建立功能豐富且可自定義的控制元件變得非常容易。當 Microsoft 提供的所有內建控制元件都不能滿足您的標準，或者您不想為第三方控制元件付費時，就會使用自定義控制元件。

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

使用者控制元件

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

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

示例

讓我們來看一個使用者控制元件的示例，並按照以下步驟操作。

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

將開啟以下視窗。現在選擇使用者控制元件 (WPF) 並將其命名為 MyUserControl。

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

以下是 XAML 程式碼，其中在 MyUserControl.xaml 檔案中建立了一個按鈕和一個文字框，並具有一些屬性。

<UserControl x:Class = "WPFUserControl.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" Click = "button_Click" />    
   </Grid>
	
</UserControl>

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

using System; 
using System.Windows; 
using System.Windows.Controls; 
 
namespace WPFUserControl {
   /// <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:WPFUserControl" 
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Grid> 
      <control:MyUserControl/> 
   </Grid> 
	
</Window>

編譯並執行上述程式碼後，將生成以下視窗。

單擊“單擊我”按鈕後，您會注意到文字框內的文字已更新。

自定義控制元件

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

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

示例

讓我們舉一個例子來了解自定義控制元件是如何工作的。建立一個新的 WPF 專案，然後右鍵單擊您的解決方案並選擇新增 > 新建項...

它將開啟以下視窗。現在選擇自定義控制元件 (WPF) 並將其命名為MyCustomControl。

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

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

<ResourceDictionary 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "clr-namespace:WPFCustomControls">  
	
   <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 WPFCustomControls { 

   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 WPFCustomControls { 
   /// <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 = "WPFCustomControls.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:control = "clr-namespace:WPFCustomControls" 
   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>

編譯並執行上述程式碼後，將生成以下視窗，其中包含一個自定義控制元件（一個自定義按鈕）。

單擊自定義按鈕後，您將看到文字塊內的文字已更新。

列印頁面