The basic article is mainly for C # beginners and consolidates C # common knowledge points;
Intermediate articles mainly strive to beautify the design of WPF layout and MaterialDesign, and make beautiful applications in the case of reducing the amount of code;
The ultimate article is a practical application of the framework, including the MVVM framework Prism, the ORM framework EntityFramework Core, and the open source database Postgresql.
table of Contents
Prism + MaterialDesign + EntityFramework Core + Postgresql WPF Development Summary Basics
Prism + MaterialDesign + EntityFramework Core + Postgresql WPF Development Summary Intermediate
Prism + MaterialDesign + EntityFramework Core + Postgresql WPF development summary final article (to be continued)
Foreword
The release of WPF is accompanied by the release of the MVVM framework. This article will focus on the MVVM framework for presentation and data separation design, including basic UI design and high-end design of MaterialDesign. For details of MVVM framework, please refer to the final chapter. One of the renderings is as follows, please see the other renderings.
Basic UI design
With Windows Presentation Foundation (WPF), you can create desktop Windows applications with extraordinary visual effects. .NET Core 3.0 currently supports the use of Windows Presentation Foundation (WPF) Windows desktop applications, which may be extended to other OS platforms in the future.
The XAML markup language used in WPF design is similar to the XML markup language. The basic controls that come with XAML and WPF can be referred to Microsoft documents without introduction here.
1. Common layout
The key point of the layout is to adapt to the size of the window no matter what pixel. WPF provides a powerful layout system internally, and designers only need to use relative positioning layout.
General layout: grid, stack, dock. Mastering these three can deal with almost all development.
1. Grid layout
That is the commonly used Grid layout. The interface is divided into grids by rows and columns, and the sub-controls specify the corresponding row and column number layout to the specified grid.
The height and width of rows and columns can be divided according to proportion using [*], and can also be adjusted automatically according to the content using [Auto]. By default, rows and columns occupy the least amount of space to accommodate the largest content in any cell contained in a given row or column.
View Code
The effect is shown in the figure: the size is automatically adjusted with the form.
2. Stacking
The controls are arranged in the specified direction. When the display cannot be displayed, there will be differences according to the controls used.
StackPanel: The child controls are stacked vertically or horizontally, and do not wrap when they exceed the space.
VirtualizingStackPanel: Child controls are virtualized and arranged on horizontal or vertical lines, and do not wrap when they exceed the space. (Commonly used when a large amount of data is bound)
WrapPanel: The child controls are positioned in order from left to right. When the control on the current line exceeds the allowable space, it wraps to the next line. (List templates are commonly used)
View Code
The effect is as follows:
StackPanel has the same layout effect as VirtualizingStackPanel. WrapPanel is special: when stacking in the horizontal direction is specified, it will be automatically replaced by the next line when it is placed horizontally; when it is stacked in the vertical direction, it will be automatically replaced by the next column when it cannot be placed vertically.
3. Docking
DockPanel: The child controls are aligned with the edge of the panel. This sub-module is most often used for layout.
View Code
The effect is as follows: Similar to Grid, but the fixed area is automatically extended in the direction.
2. Style and template
By defining styles and templates, reusing it can reduce the amount of application code, and also facilitate future maintenance and modification.
1. Style
View Code
Custom style renderings:
2. Template
All controls in WPF provide the default template ControlTemplate, which is generally used in combination with styles. In the template, you need to learn VisualState and Trigger. Through VisualState, you can design the display style of the control in different states (mouse pressed, released, etc.), and through Trigger, you can let the control follow the reference object data or bound data to make style changes More this article does not introduce in detail.
The following is an example of displaying different controls based on the bound data content.
View Code
The effect is as follows:
High-end UI design MaterialDeisgn
It is a set of UI design system open sourced by Google. It can be used to design very beautiful Web pages, apps, desktop programs, especially icons. With it, you can design a high-end interface without understanding Photoshop.
Official website address: https://material.io/
1. Introduction of MaterialDesign
WPF-specific MaterialDesign open source code address: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit
Project introduction website: http://materialdesigninxaml.net/
1. Add MaterialDesignThemes package
2. Edit App.xaml to add resources
Introduce MaterialDesign resource files globally
View Code
3. Configure MaterialDesign reference and font
Add namespaces and fonts (fonts are important for icon display) so that you can use the controls inside it.
View Code
Card effect:
Second, use MaterialDesign
Scenario 1: Login interface
Simple and beautiful, the icons are all included with MaterialDesign.