Wpf 简明教程

WPF - Custom Controls

WPF 应用程序允许创建自定义控件,这使得创建功能丰富且可定制的控件非常容易。当 Microsoft 提供的所有内置控件都不满足您的条件或您不想为第三方控件付费时,就会使用自定义控件。

在本章中,您将学习如何创建自定义控件。在我们开始了解自定义控件之前,我们先快速了解一下用户控件。

User Control

用户控件提供了一种将不同的内置控件集合并打包到可重复使用的 XAML 中的方法。用户控件用于以下场景中:

  1. 如果控件包含现有控件,即,您可以创建多个已有控件的单个控件。

  2. 如果控件不需要对主题的支持。用户控件不支持复杂的定制、控件模板和难以设置样式。

  3. 如果开发人员喜欢使用代码隐藏模型编写控件,其中一个视图然后有一个直接的代码隐藏部分用于事件处理程序。

  4. 在不同应用程序中不会共享控件。

Example

让我们来看一个用户控件示例,并按照以下步骤操作。

  1. 创建一个新的 WPF 项目,然后右键单击解决方案并选择添加 > 新建项…​

user controls
  1. 将打开以下窗口。现在选择 User Control (WPF) 并将其命名为 MyUserControl。

new item in user controls
  1. 单击添加按钮,您将看到在解决方案中添加了两个新文件(MyUserControl.xaml 和 MyUserControl.cs)。

以下是 MyUserControl.xaml 文件中使用一些属性创建按钮和文本框的 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>

当您编译并执行上述代码时,它将生成以下窗口。

output of user control

单击“单击我”按钮后,您将注意到文本框中的文本已更新。

button clicked in user control

Custom Controls

自定义控件是一个类,它提供自己的样式和模板,这些通常在 Generic.xaml 中定义。自定义控件用于以下场景:

  1. 如果控件不存在,您必须从头开始创建它。

  2. 如果您希望通过添加额外属性或额外功能来扩展或向现有控件添加功能,以符合您的特定场景。

  3. 如果您的控件需要支持主题和样式。

  4. 如果希望在不同应用程序中共享控件。

Example

让我们通过一个示例来了解自定义控件的工作原理。创建一个新的 WPF 项目,然后右键单击解决方案并选择添加 > 新建项…​

custom controls

它将打开以下窗口。现在选择 Custom Control (WPF) 并将其命名为 MyCustomControl

new item in custom controls

单击添加按钮,您将看到在解决方案中添加了两个新文件(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: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>

编译并执行上述代码后,它将生成以下窗口,该窗口带有一个自定义控件,该控件是一个自定义按钮。

output of custom controls

点击自定义按钮后,您会看到文本块中的文本被更新了。

customized button