WPF step by step-Basic Knowledge

Review

In the previous article, we introduced the basic knowledge of WPF. This article also introduces the changes in the traditional CS desktop application programming modes of WPF and winform. In this article, we will give a brief introduction to some basic knowledge of WPF, more in-depth application of these basic knowledge will be applied in the subsequent sections.

Outline

• What is XAML?
• What is a routing event?
• WPF provides basic controls
• What is Dependency Property?
• Element Binding
• Resources in WPF
• Several WPF la s

What is XAML?

Extensible Application Markup LanguageProgramMarkup language, which is based on XML implementation. This language is easy to expand, a bit similar to the B/S ProgrammingCodeThe front end is HTML, and the back end is the business logic and related processing code.

Another point is that we have repeatedly stressed that XAML is not HTML. Although XAML is similar to HTML in element declaration, program style setting, and specified event handler, XAML is based on XML and is an external representation of WPF. HTML is a markup language that is used only to present page content to browsers. In addition to basic functions such as displaying information and requesting user input, XAML also contains some advanced features, such as its support for animation and 3D.

In the XAML language, Microsoft provides a visual design tool blend. The interface model and effects created based on blend can be stored or converted to the Code in the XAML format, which greatly improves the collaboration between designers and developers in the team, this reduces the prototype effect of the designer, which cannot be implemented by the developer. After being designed by the designer, the developer can convert it to The XAML code.

For more information about XAML, refer to Wikipedia or Baidu.

The following is a simple description:

There should be no difficulty in understanding XML.

What is a routing event?

Let's take a look at the definition given by msdn:

Function Definition: A routing event is an event that calls a handler for multiple listeners in the element tree, rather than for the objects that trigger the event.

Implementation Definition: A routing event is a CLR event that can be supported by routedevent instances and handled by the Windows Presentation Foundation (WPF) Event System.

Let's explain the definition given by msdn:

1. Traditional methods:

The corresponding XAML code and background Code are as follows:

The background processing is as follows:

Of course, the following method is also feasible.

Modify the background code:

2. WPF routing method:

Routing events use one of the following three routing policies:

• Bubble: Call the event handler for the event source. The routing event is then routed to the subsequent parent element until it reaches the root of the element tree. Most routing events use a bubble routing policy. A bubble routing event is usually used to report input or status changes from different controls or other UI elements.

• Direct: only the source element itself has the opportunity to call the handler for response. This is similar to the "routing" of Windows Forms for events. However, unlike standard CLR events, direct routing events Support class processing (class processing will be introduced in the next section) and can be used by eventsetter and eventtrigger.

• Tunnel: The event handler is initially called at the root of the element tree. Then, the routing event will be directed to the source node element (that is, the element that triggers the routing event) of the routing event and spread along the route line to the subsequent child element. In the process of merging controls, tunnel routing events are usually used or processed, so that events in composite components can be intentionally disabled or replaced with events specific to the entire control. Input events provided in WPF are generally implemented using Tunnel/bubble pairs. Tunnel events are also called preview events, which are determined by the naming conventions used by the Tunnel/bubble pair.

In the traditional method, we must bind events to each event source. If we add new objects or new event sources, we also need to add new bindings. All of this is handled and considered in a unified manner in WPF. Below, we will take bubble as an example to briefly describe.

Bubble Sequence

Modify the background Code as follows:

Here we will explain the logic tree and visualization tree:

Logic tree: In simple terms, it is the basic component of the visual interface from the interface, which forms a logic tree of the window. The logic tree always exists in the UI of WPF, regardless of whether the UI is written in XAML or code. Every aspect of WPF (attributes, events, resources, etc.) depends on the logic tree.

 

 

 

 

 

 

 

 

 

 

 

 

Visual tree: the visual tree is basically an extension of the logic tree. Each node of the logic tree is broken down into its core visual components. The node of the logic tree is basically a black box for us. Different visual trees expose visual implementation details. The following figure shows the visual tree structure of the above four lines of XAML code.

The visual tree parses the content of all objects on the interface. For example, the content of the button is composed of contentpresenter and textblock.

For more information about the logical tree and visual tree, refer to the introduction of msdn.

Here is a simple code for obtaining the logical tree and the visual tree:

WPF provides some methods. Recursive mode.

Next, let's look at the above information about how to view the event Source:

As we can see above, by default, WPF events are transmitted in the bubble mode. So how do we adopt the other two policies?

Let's take a look at the tunnel events. The tunnel event sequence is as follows: reference the interpretation diagram in msdn:

Input event bubbles and tunnels

The event processing sequence is as follows:

1. Process previewmousedown (Tunnel) for the root element ).

2. Process previewmousedown (Tunnel) for element 1 ).

3. Process previewmousedown (Tunnel) for source element 2 ).

4. Process mousedown (bubbling) for source element 2 ).

5. Process mousedown (bubbling) for the intermediate element 1 ).

6. Process mousedown (bubbling) for the root element ).

Let's verify that we can process all the preview events to see if they are handled as described above.

The corresponding background code is as follows:

Run and view the output result:

As we expected. For more routing events, we will introduce them in a separate chapter.

WPF basic controls

Basic controls provided by the system by default:

Some of them are not used in depth, so they may not be described in too much detail.

The basic usage of controls will be discussed and demonstrated in the future.

What is Dependency Property?

Dependencyproperty: Windows Presentation Foundation (WPF) provides a set of services that can be used to extend the functionality of Common Language Runtime (CLR) attributes, these services are generally referred to as the WPF property system. The property supported by the WPF property system is called the Dependency Property.

The attributes in the WPF interface control can be called dependency attributes. Through dependency attributes, We can bind the viewmodel with the interface element attributes.

The dependency attribute is different from the attribute we usually call.

1. Traditional attributes

We encapsulate the object.

Suppose we have a class that has many attributes and is inherited by multiple objects. We know the inherited features, so there will certainly be many attributes, and we may not be applicable to them, so this property will still be instantiated when it is created. Is there any way to reduce this overhead? WPF puts forward the concept of dependency attributes in this case.

2. Dependency attributes:

View its basic declaration and definition: description in the comment: Set attributes, data binding, animation, style, and so on through the method.

The dependency property means that you do not have a value. The value obtained from the data source through binding is dependent on others. Objects with dependency properties are called dependent objects.

Let's take a look at the basic inheritance chain of the WPF control.

• Object Class: root types of all types in. net
• Dispatcherobject class: Most objects in WPF are derived from dispatcherobject, which provides the basic structure for processing concurrency and threads. WPF is a message system implemented by a scheduler.
• Dependencyobject class: indicates an object that participates in the dependency attribute system.
• Visual: supports rendering in WPF, including hit test, coordinate conversion, and border box calculation.
• Uielement class: a base class for WPF core-level implementation. This class is based on Windows Presentation Foundation (WPF) elements and basic representation features.
• Frameworkelement class: Provides the WPF framework-level property set, event set, and method set for Windows Presentation Foundation (WPF) elements. This class represents the included WPF framework-level implementation, which is built based on the WPF core-level API defined by uielement.
• Control class: represents the base class of the user interface (UI) elements. These elements use controltemplate to define their appearances.
• Contentcontrol class: controls that contain a single item.
• Itemscontrol class: a widget that represents a set of items.
• Decorator class: provides a base class for elements that apply Effects on or around a single sub-element (such as border or viewbox.The border appears when the mouse slides over the text box in the PPT.
• Image class: controls used to display images.
• Mediaelement class: controls that contain audio and/or video.Encapsulate a video player by yourself
• Panel class: provides a base class for all panel elements. Use the panel element to place and arrange sub-objects in the Windows Presentation Foundation (WPF) application.
• Sharp class: provides a base class for shape elements such as ellipse, polygon, and rectangle.

The description of dependency attributes and more details are described in the subsequent separate sections.

Scenarios of application dependency attributes:

1. You can set attributes in the style.
2. You want the property to support data binding.
3. You can use dynamic resource reference to set attributes.
4. You want to automatically inherit attribute values from the parent element in the element tree.
5. You want the attributes to be animated.
6. If you want the property system to report changes to values before the property system, environment, or user-performed operations, or read and use styles.
7. You want to use the metadata conventions that have been established and used by the WPF process, such as whether to require the layout system to rewrite the Visual Object of the element when a report changes the attribute value. When the dependent object is created, it does not contain the storage space. In WPF, the dependency object must be used as the host of the dependency attribute.

The following sections describe how to use dependency attributes based on specific cases.

 

 

 

 

 

 

 

 

 

 

 

 

 

Element Binding

With the dependency attribute, we can implement the interface binding mechanism, which is easier to handle. Since interface binding is implemented, we need to implement the interface: inotifypropertychanged implements the attributes of this interface. You can bind the attributes to the properties of the control by binding them.

The following is a simple binding example.

Let's take a look at the XAML code and background code. We will find that we haven't set any value for the text box, but assign values through binding.

1. The XAML code is as follows:

2. In the background code, we have not set any code or operations for assigning values to or setting values for textbox:

3. Let's take a look at the implementation of testviewmodel and the precautions:

Note that the binding attribute must be public and the Event Notification name must be consistent with the attribute name.

Baseviewmodel code:

This part will be used later for mvvm programming.

Resources in WPF

Resources in WPF contain many styles, images, videos, and animations, which can be called resources. Resources. We can define public resources in another application scope, or define resources on a page.

We usually see a lot of software and theme, which can be implemented by defining styles in WPF. This is a bit similar to the style sheet on the web.

We can modify the style sheet dynamically at runtime to achieve the goal of modifying the interface.

Next, let's take a look at how to use resources, briefly introduce several resource usage methods, and introduce more resources in subsequent separate chapters.

1. Add a Style File

Add a style as follows:

Add a style file to the app

Run to view the effect:

What should we do if we don't want to use the default style?

Once the attribute value is set, the attribute value defined in the style sheet is not used:

For example, we only need to set the width to 160, the height to 30, the font size to 10, and then run it again to see the effect.

Similarly, if we only need to apply the current style on the current page, we should not add a style file to the app. Second, we should move the code to the current page:

The above is a brief introduction to the resource file. In the future, we will give a more in-depth introduction to examples of style settings and applications.

Basic layout of WPF

1. grid layout

There is nothing to say about this. In fact, grid is used for basically complicated la S.

It mainly sets and defines rows and columns.

1. Row Table

Column table:

Tables that contain rows and columns

2. stackpanel

Vertical direction:

3. dockpanel

4. warppanel

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This article involves a lot of content, but the content is not in-depth. You can have a certain understanding of the basic usage. The subsequent chapters will be further introduced, in addition, we will summarize and share the experiences of the actual project.