WPF自定义控件库之Window窗口

在WPF开发中，默认控件的样式常常无法满足实际的应用需求，我们通常都会采用引入第三方控件库的方式来美化UI，使得应用软件的设计风格更加统一。常用的WPF的UI控件库主要有以下几种，如：Modern UI for WPF，MaterialDesignInXamlToolkit，PanuonUI，Newbeecoder.UI，WPF UI ，AduSkin，Panuon.UI.Silver，HandyControl，MahApps.Metro，Kino.Toolkit.Wpf，Xceed Extended WPF Toolkit™，Kino.Toolkit.Wpf，PP.Wpf，Adonis-ui，CC.WPFTools，CookPopularControl ，PropertyTools，RRQMSkin，Layui-WPF，Arthas-WPFUI，fruit-vent-design，Fluent.Ribbon，DMSkin WPF，EASkins_WPF，Rubyer-WPF，WPFDevelopers.Minimal ，WPFDevelopers，DevExpress WPF UI Library，ReactiveUI，Telerik UI for WPF等等，面对如此之多的WPF 第三方UI控件库，可谓各有特色，不一而同，对于具有选择综合症的开发人员来说，真的很难抉择。在实际工作中，软件经过统一的UI设计以后，和具体的业务紧密相连，往往这些通用的UI框架很难百分之百的契合，这时候，就需要我们自己去实现自定义控件【Custom Control】来解决。本文以自定义窗口为例，简述如何通过自定义控件来扩展功能和样式，仅供学习分享使用，如有不足之处，还请指正。

自定义控件

自定义控件Custom Control，通过集成现有控件（如：Button , Window等）进行扩展，或者继承Control基类两种方式，和用户控件【User Control不太相同】，具体差异如下所示：

• 用户控件UserControl
  1. 注重复合控件的使用，也就是多个现有控件组成一个可复用的控件组
  2. XAML和后台代码组成，绑定紧密
  3. 不支持模板重写
  4. 继承自UserControl
• 自定义控件CustomControl
  1. 完全自己实现一个控件，如继承现有控件进行功能扩展，并添加新功能
  2. 后台代码和Generic.xaml进行组合
  3. 在使用时支持模板重写
  4. 继承自Control

本文所讲解的侧重点为自定义控件，所以用户控件不再过多阐述。

WPF实现自定义控件步骤

1. 创建控件库

首先在解决方案中，创建一个WPF类库项目【SmallSixUI.Templates】，作为控件库，后续所有自定义控件，都可以在此项目中开发。并创建Controls，Styles，Themes，Utils等文件夹，分别存放控件类，样式，主题，帮助类等内容，作为控件库的基础结构，如下所示：

2. 创建自定义控件

在Controls目录中，创建自定义窗口AiWindow，继承自Window类，即此类具有窗口的一切功能，并具有扩展出来的自定义功能。在此自定义窗口中，我们可以自定义窗口标题的字体颜色HeaderForeground，背景色HeaderBackground，是否显示标题IsShowHeader，标题高度HeaderHeight，窗口动画类型Type等内容，具体如下所示：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Automation.Text;
using System.Windows;
using SmallSixUI.Templates.Utils;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shell;
 
namespace SmallSixUI.Templates.Controls
{
    [TemplatePart(Name = "PART_CloseWindowButton", Type = typeof(Button))]
    [TemplatePart(Name = "PART_MaxWindowButton", Type = typeof(Button))]
    [TemplatePart(Name = "PART_MinWindowButton", Type = typeof(Button))]
    public class AiWindow : Window
    {
        /// 

        /// 关闭窗体
        /// 
        private Button PART_CloseWindowButton = null;
        /// 

        /// 窗体缩放
        /// 
        private Button PART_MaxWindowButton = null;
        /// 

        /// 最小化窗体
        /// 
        private Button PART_MinWindowButton = null;
 
        /// 

        /// 设置重写默认样式
        /// 
        static AiWindow()
        {
            StyleProperty.OverrideMetadata(typeof(AiWindow), new FrameworkPropertyMetadata(AiResourceHelper.GetStyle(nameof(AiWindow) + "Style")));
        }
 
 
        /// 

        /// 顶部内容
        /// 
        [Bindable(true)]
        public object HeaderContent
        {
            get { return (object)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for HeaderContent.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderContentProperty =
            DependencyProperty.Register("HeaderContent", typeof(object), typeof(AiWindow));
 
 
        /// 

        /// 头部标题栏文字颜色
        /// 
        [Bindable(true)]
        public Brush HeaderForeground
        {
            get { return (Brush)GetValue(HeaderForegroundProperty); }
            set { SetValue(HeaderForegroundProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for HeaderForeground.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderForegroundProperty =
            DependencyProperty.Register("HeaderForeground", typeof(Brush), typeof(AiWindow), new PropertyMetadata(Brushes.White));
 
 
        /// 

        /// 头部标题栏背景色
        /// 
        [Bindable(true)]
        public Brush HeaderBackground
        {
            get { return (Brush)GetValue(HeaderBackgroundProperty); }
            set { SetValue(HeaderBackgroundProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderBackgroundProperty =
            DependencyProperty.Register("HeaderBackground", typeof(Brush), typeof(AiWindow));
        /// 

        /// 是否显示头部标题栏
        /// 
        [Bindable(true)]
        public bool IsShowHeader
        {
            get { return (bool)GetValue(IsShowHeaderProperty); }
            set { SetValue(IsShowHeaderProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for IsShowHeader.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsShowHeaderProperty =
            DependencyProperty.Register("IsShowHeader", typeof(bool), typeof(AiWindow), new PropertyMetadata(false));
 
        /// 

        /// 动画类型
        /// 
        [Bindable(true)]
        public AnimationType Type
        {
            get { return (AnimationType)GetValue(TypeProperty); }
            set { SetValue(TypeProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for Type.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TypeProperty =
            DependencyProperty.Register("Type", typeof(AnimationType), typeof(AiWindow), new PropertyMetadata(AnimationType.Default));
 
 
 
        /// 

        /// 头部高度
        /// 
        public int HeaderHeight
        {
            get { return (int)GetValue(HeaderHeightProperty); }
            set { SetValue(HeaderHeightProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for HeaderHeight.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderHeightProperty =
            DependencyProperty.Register("HeaderHeight", typeof(int), typeof(AiWindow), new PropertyMetadata(50));
 
 
 
 
 
 
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            PART_CloseWindowButton = GetTemplateChild("PART_CloseWindowButton") as Button;
            PART_MaxWindowButton = GetTemplateChild("PART_MaxWindowButton") as Button;
            PART_MinWindowButton = GetTemplateChild("PART_MinWindowButton") as Button;
            if (PART_MaxWindowButton != null && PART_MinWindowButton != null && PART_CloseWindowButton != null)
            {
                PART_MaxWindowButton.Click -= PART_MaxWindowButton_Click;
                PART_MinWindowButton.Click -= PART_MinWindowButton_Click;
                PART_CloseWindowButton.Click -= PART_CloseWindowButton_Click;
                PART_MaxWindowButton.Click += PART_MaxWindowButton_Click;
                PART_MinWindowButton.Click += PART_MinWindowButton_Click;
                PART_CloseWindowButton.Click += PART_CloseWindowButton_Click;
            }
        }
 
        private void PART_CloseWindowButton_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }
 
        private void PART_MinWindowButton_Click(object sender, RoutedEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }
 
        private void PART_MaxWindowButton_Click(object sender, RoutedEventArgs e)
        {
            if (WindowState == WindowState.Normal)
            {
                WindowState = WindowState.Maximized;
            }
            else
            {
                WindowState = WindowState.Normal;
            }
        }
 
        protected override void OnSourceInitialized(EventArgs e)
        {
            base.OnSourceInitialized(e);
            if (SizeToContent == SizeToContent.WidthAndHeight && WindowChrome.GetWindowChrome(this) != null)
            {
                InvalidateMeasure();
            }
        }
    }
}

注意：在自定义控件中，设置窗口标题的属性要在样式中进行绑定，所以需要定义为依赖属性。在此控件中用到的通用的类，则存放在Utils中。

3. 创建自定义控件样式

在Styles文件夹中，创建样式资源文件【AiWindowStyle.xaml】，并将样式的TargentType指定为Cotrols中创建的自定义类AiWindow。然后修改控件的Template属性，为其定义新的的ControlTemplate，来改变控件的样式。如下所示：

4. 创建默认主题

在Themes文件夹中，创建主题资源文件【Generic.xaml】，并在主题资源文件中，引用上述创建的样式资源，如下所示：

主题：主题资源文件，是为了整合一组资源样式，来形成一套主题。同一主题之内，风格统一；不同主题之间相互独立，风格迥异。

应用自定义控件库

1. 创建应用程序

在解决方案中，创建WPF应用程序【SmallSixUI.App】，并引用控件库【SmallSixUI.Templates】，如下所示：

2. 引入主题资源

在应用程序的启动类App.xaml中，引入主题资源文件，如下所示：

3. 创建测试窗口

在应用程序中，创建测试窗口【SmallSixWindow.xaml】，添加控件库命名控件【Ai】，并修改窗口的继承类为【AiWindow】，然后设置窗口的背景色，logo，标题等，如下所示：

SmallSixWindow.xaml文件中，如下所示：

 SmallSixWindow.xaml.cs中修改继承类，如下所示：

using SmallSixUI.Templates.Controls;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace SmallSixUI.App
{
    /// 

    /// XWindow.xaml 的交互逻辑
    /// 
    public partial class SmallSixWindow : AiWindow
    {
        public SmallSixWindow()
        {
            InitializeComponent();
        }
    }
}

运行程序

通过Visual Studio运行程序，如下所示：

普通默认窗口，如下所示：

自定义窗口

应用自定义样式的窗口，如下所示：

以上就是WPF自定义控件库之窗口的全部内容。希望可以抛砖引玉，一起学习，共同进步。