WPF Self-Learning Primer (i) Wpf-xaml basic knowledge

First, the basic concept

1. xaml is an extensible application Markup language derived from XML (extensible Application Markup Language) created by Microsoft for Applications in Wpf,silverlight and other development technologies.

2. In WPF, XAML is used to develop the user interface. Relative XML has some innovations in syntax, and it inherits the syntax of XML tag,attribute and so on.

3. In WPF, XAML runs on top of the CLR, but it is not compiled to IL, but compiles to BAML code, which is parsed into a CLR type (Types) at run time.

4. xaml is case-sensitive in WPF.

Second, basic grammar

To learn WPF, we need to use webform thinking to think about problems. In WPF, XAML is an important element that is used to construct the UI interface for WPF, because WPF has a markup language for XAML, which enables a design pattern that separates interfaces from logic, and logic programmers write background code. And the front-desk interface is designed by the designer to be responsible for the XAML, so that the division of labor is very good, this is one of the attractive areas of WPF.

Start WPF's Hello World basic syntax parsing.

New WPF Project

The project default file structure, which imports the following 4 WPF development-prerequisite DLLs, which is the default namespace in XAML.

Note: In the directory structure we do not see the program's main entry class, WPF is through the app file is the entry of the application, and later I will use a special article to write a different way to start the main interface. Let's look at the compiled structure

1. Label syntax = object Element (Elements)

Each tag is an object element that will be parsed as an instance of a class in the WPF Framework (mainly from PresentationFramework.dll). The following code is an object element, and the runtime is parsed into a button object instance.

Run effect

2. Attribute Assignment syntax

2.1 Normal string assignment. The following code assigns a value to the property and event of the button. The string will be converted to an object by wrapping the TypeConverter. TypeConverter is implemented using C # 's attribute technology.

<button x:name= "Btnclick" content= "point Me" horizontalalignment= "left" margin= "212,136,0,0" verticalalignment= "Top" Width= "click=" "Btnclick_click"/>

2.2 Tag extension assignment. Assigning a value with curly braces is called a markup extension assignment. A common place to use is when binding and resources are used.

<button x:name= "Btnclick" content= "point Me" command= "{Binding click}" horizontalalignment= "left" margin= "212,136,0,0" Verticalalignment= "Top" width= "/>"

The 2.3 attribute element is assigned a value. Sometimes a simple string cannot be assigned, and a property element is used to assign a value.

<button x:name= "BtnClick1" horizontalalignment= "left" margin= "212,160,0,0" verticalalignment= "Top" width= "75" click= "Btnclick_click" >

<Button.Content>

Point Me

</Button.Content>

</Button>

2.4 Content assignment. The control must have the content property, that is, to inherit from the ContentControl class, so that the value can be assigned. Clip in the middle of the label.

<Button> Point Me </Button>

2.5 Set assignment. The following example is a set that assigns a value to the Stackpanel.children attribute, which is omitted. The type of this property is Uielementcollection. In this example, we also see that WPF supports some ellipsis notation, which can be used in real-world development to make XAML code more concise.

<StackPanel>

<Button> Point Me </Button>

<Button> i 1</button>.

</StackPanel>

3. Namespaces

In WPF, it is generally used on root elements (application,window,usercontrol,page,resourcedictionary, etc.). As follows:

xmlns is the attribute that introduces namespaces.

The first line of xmlns does not specify an alias, and is the default namespace, which specifies the namespace that contains the assembly for all XAML controls provided by Microsoft.

The combined second-line xmlns alias is X,D,MC, which is also a Microsoft-provided namespace, which mainly contains some assemblies for parsing the XAML language.

The five-line xmlns is a self-introduced, developer-written control that can be referenced to a XAML document in a namespace-like way.

<window x:class= "Wpfapplicationdemo.mainwindow"

Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"

Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"

Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"

Xmlns:local= "Clr-namespace:wpfapplicationdemo"

Mc:ignorable= "D"

Title= "MainWindow" height= "width=" 525 ">

<Grid>

<label x:name= "Label" content= "Hello world! "Horizontalalignment=" left "margin=" 39,20,0,0 "verticalalignment=" Top "/>

<button x:name= "Btnclick" content= "point Me" command= "{Binding click}" horizontalalignment= "left" margin= "212,136,0,0" Verticalalignment= "Top" width= "/>"

<button x:name= "BtnClick1" horizontalalignment= "left" margin= "212,160,0,0" verticalalignment= "Top" width= "75" click= "Btnclick_click" >

<Button.Content>

Point Me

</Button.Content>

</Button>

</Grid>

</Window>

4. Two trees in WPF

The XAML document is a tree-like structure. The concept of a logical tree (Logical tree) and a visual tree in WPF maintains both trees at run time. The logical tree is the node of the control we see, and the logical tree represents the core structure of the UI. and the elements defined in the XAML file are nearly equal, excluding the visual elements that are internally generated to help render. WPF uses logical trees to determine dependency properties, value inheritance, resource solutions, and so on. The logical tree is not as simple as a visual tree. For beginners, the logical tree can contain type objects, unlike the visual tree, which contains only instances of the dependancy subclass. When traversing the logical tree, remember that the leaves of the logical tree can be of any type. Since Logictreehelper is only valid for DependencyObject, you need to be very careful when traversing the logical tree, preferably for type checking. The visual tree can see the elements inside the control, which generally inherit from the visual class. The visual tree represents all of the elements on the screen that you render on your interface. The visual tree is used for rendering, event routing, locating resources (if the element does not have a logical parent element), and so on. Traversing the visual tree makes it easy to use visualtreehelper and simple recursive methods. WPF provides two helper classes (Logicaltreehelper and VisualTreeHelper) to manipulate the two trees.

5. Attached properties, events

<StackPanel>

<button panel.zindex= "1" >a</Button>

<button panel.zindex= "2" >b</Button>

</StackPanel>

Panel.zindex is an attached property, and the attached event is not used on the interface. Write additional events when you implement the project in the following context

PS: I am also a beginner of WPF, if there is no place, welcome in the comment area to teach, study, in order to share, in order to improve.

WPF Self-Learning Primer (i) Wpf-xaml basic knowledge