WPF (a) Basic knowledge of WPF-XAML, wpfwpf-xaml

WPF (a) Basic knowledge of WPF-XAML, wpfwpf-xaml

I. Basic Concepts

1. XAML is an Extensible Application Markup Language (Extensible Application Markup Language) derived from XML. It was created and applied by Microsoft in development technologies such as WPF and Silverlight.

2. in WPF, XAML is used to develop user interfaces. Compared with XML, XML has some innovations in syntax and inherits the syntax of XML, such as Tag and Attribute.

3. In WPF, XAML runs on CLR, but it is compiled as BAML code instead of IL. It is parsed as CLR type (Types) during runtime ).

4. XAML in WPF is case sensitive.

Ii. Basic syntax

To learn about wpf, we need to use webform thinking to consider the problem. In WPF, XAML is a very important element used to construct the UI interface of WPF. It is precisely because WPF has the XAML markup language, only in this way can the interface and logic be separated. The logic programmer writes background code, and the front-end interface design is undertaken by the designer using XAML, the division of labor is very good, which is one of the attractive points of WPF.

Start parsing the basic Hello World Syntax of WPF.

Create a WPF Project

The default file structure of the project. The reference imports the following four required dll for wpf development, which is also the default namespace in xaml.

Note: In the directory structure, we do not see the main entry class of program. In WPF, the APP file is the entry of the program, in the future, I will use a dedicated article to write different ways to start the main interface. Let's take a look at the compiled structure.

 

 

1. Tag syntax = Object Elements)

Each tag is an object element and will be parsed into an instance of classes in the WPF Framework (mainly from PresentationFramework. dll. The following code is an object element, which is parsed as a Button object instance at runtime.

Running Effect

2. Attribute assignment syntax

2.1 assign values to common strings. The following Code assigns values to the Property and Event of the Button. The string is converted to an object through the encapsulated TypeConverter. TypeConverter uses the Attribute technology of C.

<Button x: Name = "btnClick" Content = "" HorizontalAlignment = "Left" Margin = "212,136, 0, 0 "VerticalAlignment =" Top "Width =" 75 "Click =" btnClick_Click "/>

 

2.2 tag extension value assignment. Using curly braces to assign values is called Tag extension assignment. Usually, binding and resources are used.

<Button x: Name = "btnClick" Content = "" Command = "{Binding Click}" HorizontalAlignment = "Left" Margin = "212,136, 0, 0 "VerticalAlignment =" Top "Width =" 75 "/>

 

2.3 attribute element assignment. Sometimes, if a simple string cannot be assigned a value, the attribute element is assigned a value.

<Button x: Name = "btnClick1" HorizontalAlignment = "Left" Margin = "212,160," verticalignment = "Top" Width = "75" Click = "btnClick_Click">

<Button. Content>

Click me

</Button. Content>

</Button>

 

2.4 content assignment. The control must have the Content attribute, that is, to inherit from the ContentControl class, so that the value can be assigned. In the middle of the tag.

<Button> click me </Button>

 

2.5 set value assignment. The following example assigns a set to the StackPanel. Children attribute, Which is omitted. The type of this attribute is UIElementCollection. In this example, we can also see that WPF supports some omitted writing methods and can be used in actual development to make the XAML code more concise.

<StackPanel>

<Button> click me </Button>

<Button> click I 1 </Button>

</StackPanel>

 

3. namespace

In WPF, it is generally used on the Root element (Application, Window, UserControl, Page, ResourceDictionary, etc ). As follows:

Xmlns is the attribute that introduces the namespace.

The first line of xmlns does not specify an alias. It is the default namespace. The namespace specified by xmlns contains the assembly of all the XAML controls provided by Microsoft.

The second, third, and fourth lines of xmlns alias are x, d, and mc, which are also the namespaces provided by Microsoft. This mainly contains some Assembly about parsing the Xaml language.

The fifth line xmlns is self-introduced. developers can reference the control and so on to The XAML document using namespaces.

<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 = "350" Width = "525">

<Grid>

<Label x: Name = "label" Content = "Hello World! "HorizontalAlignment =" Left "Margin =" 39,20, "verticalignment =" Top "/>

<Button x: Name = "btnClick" Content = "" Command = "{Binding Click}" HorizontalAlignment = "Left" Margin = "212,136, 0, 0 "VerticalAlignment =" Top "Width =" 75 "/>

<Button x: Name = "btnClick1" HorizontalAlignment = "Left" Margin = "212,160," verticalignment = "Top" Width = "75" Click = "btnClick_Click">

<Button. Content>

Click me

</Button. Content>

</Button>

</Grid>

</Window>

 

4. Dual nodes in WPF

The XAML document is in a tree structure. The concept of Logical Tree and Visual Tree in WPF is maintained at runtime. The logic tree uses the controls we see as nodes, and the logic tree represents the core structure of the UI. Almost identical to the elements defined in the XAML file, excluding the visualization elements generated internally to help rendering. WPF uses the logical tree to determine dependency attributes, value inheritance, and resource solutions. The logic tree is not as simple as the visual tree. For beginners, the logical tree can contain type objects. This is different from the visual tree. The visual tree only contains instances of the Dependancy subclass. When traversing a logical tree, remember that the leaves of the logical tree can be of any type. Because LogicTreeHelper is only valid for DependencyObject, you must be very careful when traversing the logical tree. It is best to perform type check. The Visual tree can see the elements inside the control. These elements are generally inherited from the Visual class. The visual tree represents all the elements rendered on the screen on your interface. The visualization tree is used for rendering, Event Routing, and locating resources (if the element does not have a logical parent element. You can use VisualTreeHelper and recursive methods to traverse the visual tree. WPF provides two auxiliary classes (LogicalTreeHelper and VisualTreeHelper) to operate these two classes.

 

5. Additional attributes and events

<StackPanel>

<Button Panel. ZIndex = "1"> a </Button>

<Button Panel. ZIndex = "2"> B </Button>

</StackPanel>

Panel. ZIndex is an additional attribute, and additional events cannot be used on the interface. Additional events will be written for specific implementation projects in the future.

PS: I am also a beginner of WPF. If anything is wrong, please give me more advice and study in the comments area. To share, please improve.