Learn WPF with me (1): WPF's uidesign language-XAML, wpfxaml

Learn WPF with me (1): WPF's uidesign language-XAML, wpfxaml
What is XAML?

The full name of XAML is Extensible Application Markup Language (Extensible Application Markup Language). It is specialized in the uidesign Language of WPF technology.

XAML Basics

XAML is based on XML, and The XAML is a tree structure as a whole. It is similar to the DOM tree of HTML. If you know XML, you can see that the XAML should have a kind of affinity, at the same time, it can be quickly mastered.

To better understand the syntax rules of XAML, we create a new WPF project.

Open VS, choose File> New> Project menu, or press Ctrl + Shift + N to open the new project window. Change the project name to WpfExam and click OK.

<Window x: Class = "WpfExam. mainWindow "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "525"> <Grid> </Window>

I. Basic syntax

Similar to XML, the most basic syntax elements in XAML are tags, attributes, and content.

1. Labels

A tag usually starts with <> and ends with </>. A tag declaration usually represents an object. For example, <Window> </Window> and <Grid> </Grid> define a form object and a Grid Object respectively. There are two common syntax for label definition:

Non-self-closed signatures: <Window> </Window>, <Grid> </Grid>

Self-closing labels: <Window/> and <Grid/> are used to make the Code look more concise without content. Of course, normally, windows and Grid have content.

2. Attributes

Attributes are usually displayed as key-value pairs, such as <Window> <Window/> Title = "MainWindow" Height = "350" Width = "525 ", the left side of the equals sign indicates the properties of the Window label, and the right side of the equals sign indicates the value of this attribute.

3. Content

The text or other labels mixed between a group of tag pairs are called the content between tags. The content of the Window label is a <Grid> <Grid/> label.

Ii. namespace

Careful friends will certainly ask

 x:Class="WpfExam.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

What are these strange and similar website addresses? Yes, they are indeed the properties of windows, but they have their own unique meanings. Basically, we create any form or user control in WPF, and these three attributes will appear. What are the meanings of these three attributes.

X: Class = "WpfExam. MainWindow": Specifies the C # Class corresponding to the XAML form interface. It is the MainWindow branch Class in the WpfExam namespace.

Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation": refers to the namespace that references the display of the wpf interface, similar to the using in our C # class.

Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml": Indicates referencing a xaml-related namespace.

The x in xmlns: x is only a default identifier. If we change it to y, compiling our program will report an error and cannot find the attribute Class. In this case, we need to set x: class = "WpfExam. mainWindow "changed to y: Class =" WpfExam. mainWindow ".

Similarly, if we add a sign to xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation", if we change to xmlns: a = "http://schemas.microsoft.com/winfx/2006/xaml/presentation", it will remind you that the type is not found

Window and Grid. Replace <Window>, <Grid> with <a: Window>, and <a: Grid>

XAML application example

Requirement: implement a simple calculator interface as shown in.

<Window x: Class = "WpfExam. MainWindow" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Title =" MainWindow "Height =" 350 "Width =" 325 "> <Grid. rowDefinitions> <RowDefinition Height = "95 *"/> <RowDefinition Height = "224 *"/> </Grid. rowDefinitions> <DockPanel> <TextBox TextWrapping = "Wrap" Background = "AliceBlue"/> </DockPanel> <Grid. row = "1"> <Grid. columnDefinitions> <ColumnDefinition Width = "1 *"/> <ColumnDefinition Width = "1 *"/> <ColumnDefinition Width = "1 *"/> <ColumnDefinition Width = "1 *" /> </Grid. columnDefinitions> <Grid. rowDefinitions> <RowDefinition Height = "1 *"/> <RowDefinition Height = "1 *"/> <RowDefinition Height = "1 *"/> <RowDefinition Height = "1 *" /> <RowDefinition Height = "1 *"/> </Grid. rowDefinitions> <Button Grid. row = "0" Grid. column = "0" Content = "clear" FontSize = "22"/> <Button Grid. row = "0" Grid. column = "1" Content = "backspace" FontSize = "22"/> <Button Grid. row = "0" Grid. column = "2" Content = "/" FontSize = "22"/> <Button Grid. row = "0" Grid. column = "3" Content = "*" FontSize = "22"/> <Button Grid. row = "1" Grid. column = "0" Content = "7" FontSize = "22"/> <Button Grid. row = "1" Grid. column = "1" Content = "8" FontSize = "22"/> <Button Grid. row = "1" Grid. column = "2" Content = "9" FontSize = "22"/> <Button Grid. row = "1" Grid. column = "3" Content = "-" FontSize = "22"/> <Button Grid. row = "2" Grid. column = "0" Content = "4" FontSize = "22"/> <Button Grid. row = "2" Grid. column = "1" Content = "5" FontSize = "22"/> <Button Grid. row = "2" Grid. column = "2" Content = "6" FontSize = "22"/> <Button Grid. row = "2" Grid. column = "3" Content = "+" FontSize = "22"/> <Button Grid. row = "3" Grid. column = "0" Content = "1" FontSize = "22"/> <Button Grid. row = "3" Grid. column = "1" Content = "2" FontSize = "22"/> <Button Grid. row = "3" Grid. column = "2" Content = "3" FontSize = "22"/> <Button Grid. row = "3" Grid. rowSpan = "2" Grid. column = "3" Content = "=" FontSize = "22" Background = "Orange"/> <Button Grid. row = "4" Grid. column = "0" Grid. columnSpan = "2" Content = "0" FontSize = "22"/> <Button Grid. row = "4" Grid. column = "2" Content = ". "FontSize =" 22 "/> </Grid> </Window>

This article only focuses on the basic syntax of the xaml language, and uses the basic layout elements Grid, Button, TextBox and so on to implement a simple calculator interface.

Details about the labels and attributes in specific xaml are described in detail in combination with the wpf layout control. Next, let's take a look at the controls and layout skills in WPF.