Window window of WPF custom control library
Window window of WPF custom control library
In WPF development, the styles of default controls often fail to meet actual application needs. We usually introduce third-party control libraries to beautify the UI and make the design style of the application software more unified. Commonly used WPF UI control libraries mainly include the following types, such as: 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, etc. Faced with so many WPF third-party UI control libraries, they all have their own characteristics and are different from each other. , it’s really hard to make a choice for developers with choice syndrome. In actual work, after the software has a unified UI design, it is closely connected with the specific business. Often these general UI frameworks are difficult to fit 100%. At this time, we need to implement it ourselvesCustom Control【Custom Control】 to solve the problem. This article takes a custom window as an example to briefly describe how to extend functions and styles through custom controls. It is only for learning and sharing. If there are any shortcomings, please correct me.
Custom controls
Custom Control can be extended by integrating existing controls (such as Button, Window, etc.) or inheriting the Control base class. It is not the same as User Control [User Control]. The specific differences are as follows :
- User controlUserControl
- Focus on the use of composite controls, that is, multiple existing controls form a reusable control group
- Composed of XAML and background code, tightly bound
- Template rewriting is not supported
- Inherited from UserControl
- Custom controlCustomControl
- Implement a control entirely by yourself, such as inheriting existing controls to extend functions and add new functions
- Combining the background code and Generic.xaml
- Supports template rewriting when using
- Inherited from Control
The focus of this article is Custom controls, so user controls are no longer Elaborate more.
Steps to implement custom controls in WPF
1. Create a control library
First, create a WPF class library project [SmallSixUI.Templates] in the solution as a control library. All subsequent custom controls can be developed in this project. And create Controls, Styles, Themes, Utils and other folders to store control classes, styles, themes, and help classes and other contents, as the basic structure of the control library, as follows: p>
2. Create a custom control
In the Controls directory, create a custom window AiWindow, which inherits from the Window class, that is, This class has all the functions of a window. And has extended custom functions. In this custom window, we can customize the font color of the window title HeaderForeground, the background color HeaderBackground, whether to display the title IsShowHeader, the title height HeaderHeight, the window animation type Type, etc., as shown below:
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
{
///
/// Close the form
///
private Button PART_CloseWindowButton = null;
///
/// Window zoom
///
private Button PART_MaxWindowButton = null;
///
/// Minimize the form
///
private Button PART_MinWindowButton = null;
///
/// Set override default style
///
static AiWindow()
{
StyleProperty.OverrideMetadata(typeof(AiWindow), new FrameworkPropertyMetadata(AiResourceHelper.GetStyle(nameof(AiWindow) + "Style")));
}
///
/// Top content
///
[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));
///
///Head title bar text color
///
[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));
///
///Head title bar background color
///
[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));
///
/// Whether to display the header title bar
///
[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));
///
/// Animation type
///
[Bindable(true)]
public AnimationTypeType
{
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));
///
/// Head height
///
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();
}
}
}
}
Note: In custom controls, the properties for setting the window title need to be bound in the style, so they need to be defined as Dependency properties. Common classes used in this control are stored in Utils.
3. Create a custom control style
In the Styles folder, create the style resource file [AiWindowStyle.xaml], and specify the TargetType of the style as the custom class AiWindow created in Cotrols. Then modify the Template property of the control and define a new ControlTemplate for it to change the style of the control. As shown below:
owButton" Property="Visibility" Value="Collapsed" />
4. Create a default theme
In the Themes folder, create the theme resource file [Generic.xaml], and reference the style resource created above in the theme resource file, as follows:
Theme: The theme resource file is to integrate a set of resource styles to form a set of themes. Within the same theme, the style is unified; different themes are independent of each other and have very different styles.
Apply custom control library
1. Create an application
In the solution, create a WPF application [SmallSixUI.App] and reference the control library [SmallSixUI.Templates] as follows:
2. Introduce theme resources
Introduce the theme resource file into the application’s startup class App.xaml, as shown below:
3. Create a test window
In the application, create the test window [SmallSixWindow.xaml], add the control library named control [Ai], and modify the inheritance class of the window to [AiWindow], and then set the background color, logo, title, etc. of the window, as follows Shown:
SmallSixWindow.xaml file, as shown below:
Modify the inherited class in SmallSixWindow.xaml.cs as follows:
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
{
///
/// Interaction logic of XWindow.xaml
///
public partial class SmallSixWindow : AiWindow
{
public SmallSixWindow()
{
InitializeComponent();
}
}
}
Run program
Run the program through Visual Studio as follows:
Normal default window, as shown below:
Customize window
A window with custom styles applied, as shown below:
The above is the entire content of the WPF custom control library window. I hope we can inspire others, learn together, and make progress together.
Author: Xiaoliu Gongzi
Source: http://www.cnblogs.com/hsiang/
The copyright of this article belongs to the author and the blog park. It is not easy to write an article. Originality is supported. Reprinting is welcome [like it]. Please keep this statement when reprinting, and provide a link to the original text in an obvious position on the article page. Thank you.
Follow personal public accounts and regularly update technology and workplace articles
��Modify the inherited class as follows:
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
{
///
/// Interaction logic of XWindow.xaml
///
public partial class SmallSixWindow : AiWindow
{
public SmallSixWindow()
{
InitializeComponent();
}
}
}
Run program
Run the program through Visual Studio as follows:
Normal default window, as shown below:
Customize window
A window with custom styles applied, as shown below:
The above is the entire content of the WPF custom control library window. I hope we can inspire others, learn together, and make progress together.
Author: Xiaoliu Gongzi
Source: http://www.cnblogs.com/hsiang/
The copyright of this article belongs to the author and the blog park. It is not easy to write an article. Originality is supported. Reprinting is welcome [like it]. Please keep this statement when reprinting, and provide a link to the original text in an obvious position on the article page. Thank you.
Follow personal public accounts and regularly update technology and workplace articles