WPF path-from helloworld to WPF World

ArticleDirectory

• What is Hello world?
• Hello world?
• Discover XAML
• Element tree
• Base Element
• Attribute
• Style and template
• Resources
• What have you learned?
• How to Learn
• What to do next

Preface

Some people have said that the most difficult part of learning any programming is "Hello World ". This seems ridiculous, but it is not necessary to think about it carefully. Many things that we think are simple may be the most difficult things. For example, some basic concepts in C # are used every day. Do you really understand them ?! A question mark may be required for many people.

Recently, I started to learn how to use WPF. What is WPF? There are many articles on the Internet, so I will not repeat them here.

Everything starts from "Hello World", but with the above experience, everything has actually changed.

Hello World

For example, make a simple hello World application in an excellent IDE environment.ProgramIt is so simple. Just drag a control with the mouse, enter "Hello World" in the attribute bar, and then F5, OK, everything is done.

It's really easy. Just like learning VB or C # in the past, it looks like nothing different, however, do you still say that the Hello world of VB and the Hello world of C # are the same thing ?! The answer is clear.

What is Hello world?

There was a joke that a retired programmer practiced calligraphy after retirement and waved his pen. A line of paper appeared suddenly-Hello world. The first person to write "Hello World" may be a genius. View the world in a grain of sand. This is just a line.CodePrograms that can even be implemented without code open a convenient door to beginners, giving beginners enough space to think about limited issues and a glimpse of the ever-changing world.

Hello world has SHIFT + F5 and stops running the program. Let's take a look at what is in this program. First look at the file structure:

In Solution Explorer, it is not difficult to find that the WPF program has an extra file XAML compared with winform. Open the well-known. CS code file and find it empty, We can't even see the control that hosts Hello world. Combined with ASP. NET experience, we found <Grid> <textblock text = "Hello World"/> </GRID> From this, we can think that Microsoft has created a brand new one by combining the advantages of ASP. NET and winform. The most core part of WPF is XAML.

Discover XAML

So what is XAML? Msdn explains:The Extensible Application Markup Language (XAML) is a declarative Application Programming markup language. WPF provides support for the Extensible Application Markup Language (XAML) language, enabling WPF to be implemented, this explanation is a bit abstract. In fact, if ASP. net, we can simply think that WPF is based on ASP. net-based development of winform; if there is the foundation of the markup language, you can simply think that Xmal implements the UI in WPF in the way of the markup language, and then Microsoft associates the UI with the Code; if there is no such thing, shut down the page you see. Learn More ^_^.

Enable the WPF World element tree

As we know, the core of WPF is XAML. Like a Web page, XAML splits the UI into blocks of different sizes and combines them in a certain way to form the basic UI framework. Then, through the cooperation of art engineers, become the user interaction interface that is finally presented in front of us. Each element in XAML represents a basic element in the UI. How does XAML organize these elements and ultimately form the UI delivered to users? See.

, WPF combines each interface element in an ordered manner according to the tree structure. Each element in the interface has a unique parent node and may have multiple child nodes. In the figure, Part 1 is the tree structure of the hello World sample. Of course, the structure of the WPF document is much more complex than in the example. However, as an entry point, these are beyond the scope of today's discussion.

Base Element

Now let's change the program. Let's add a button and click it to display a message box.

As we learned above, in WPF, XAML is responsible for the UI and CS is responsible for implementing the logic (displaying message boxes ). So how are they associated (please pay attention to the Blue Line in the figure )? Originally in WPF, all the element classes with the UI are inherited from a base element --DependencyobjectThese classes have the same signature implementation in Cs and XAML respectively. During the development process, we only need to get the same name. WPF will automatically complete the Association for us.

Note: If you change "button#click" to "onbtnclick" in the C # code, this parameter is not automatically changed in XAML.

Attribute

Now let's take a closer look at the code automatically generated by IDE. If ASP or htmlxml are the same, we will find that each element tag contains some attributes except the tag name. In addition to the well-known text = "Hello World", name = "button1" in C #, Asp.. Net (used to indicate the distance between a button and other elements in the parent container ). The former is the same as that in C #, and the latter does not belong to the object itself. It depends on the parent element and becomes an additional attribute in WPF (for example, if the button is not in a parent element (GRID) and other elements ).

In the previous section, we know that WPF is responsible for one-to-one correspondence between the XAML elements and classes in C #, and changing the button in Xmal. when the value of height is changed in CS, how are they implemented? Originally, WPF provided a property system, which provided a method to calculate attribute values based on other input values. With this system, when we access properties between Xmal and CS, WPF will automatically notify each other.The attributes of these services are generally called dependency attributes.

Style and template

Imagine that we will continue to modify the hello World Program. If we need to add 10 or 100 identical buttons, these buttons have different styles for different users. How can we support these styles? Is it one by one in Xmal? Of course not. Since XAML is similar to ASP. NET, it is not difficult to think of common CSS in Web pages. in WPF, CSS belongs to XAML and is more powerful, that is, style and template.

WPF style settings and templates provide a set of functions (style, template, trigger, and demo board) that allow us to use these functions to create better visual effects, or to create a unified appearance, these styles and templates can be shared within the application and between the application to provide work efficiency.

Resources

In the previous section, we mentioned styles and templates, which belong to resources in WPF. In addition, WPF resources include files, multimedia, and data that we generally understand in C. In WPF, resources can be divided into static resources and dynamic resources. The differences between them are well understood in terms of their names, with better performance and flexibility. As an entry point, whether to update resources in real time can be used as a basis for choosing static and dynamic resources.

Summary

Through a series of descriptions above, we found some basic concepts in WPF: XAML, element tree, base element, attribute, style, template, and resource. These are the first things that are exposed when you are new to WPF. Due to space limitations, we can only make a rough introduction to these content, so that we can have a look at the appearance of WPF. However, as a beginner, fully understanding these contents is the key to further learning WPF.

How to Learn

In the above learning process, it is not difficult to find that learning any technology starts from the simplest point. Then, through careful observation, we can discover, think about, and finally solve the problem. The most important thing is to be diligent in thinking, rather than superficial.

What to do next

Today, we have a rough understanding of WPF and found some basic concepts. Although there are still a lot of important content, such as data binding, Event Routing, and thread models, we should study every concept involved in the next step based on the greedy principle, then, after repeated connections, you can truly understand them.