Wpf 简明教程

WPF - XAML Overview

在你使用 WPF 时，你会遇到的首要问题之一就是 XAML。XAML 代表可扩展应用程序标记语言。它是一种基于 XML 的简单且声明性语言。

One of the first things you will encounter while working with WPF is XAML. XAML stands for Extensible Application Markup Language. It’s a simple and declarative language based on XML.

In XAML, it very easy to create, initialize, and set properties of objects with hierarchical relations.
It is mainly used for designing GUIs, however it can be used for other purposes as well, e.g., to declare workflow in Workflow Foundation.

Basic Syntax

当你创建新的 WPF 项目时，你将在 MainWindow.xaml 中遇到一些此类默认 XAML 代码，如下所示。

When you create your new WPF project, you will encounter some of the XAML code by default in MainWindow.xaml as shown below.

<Window x:Class = "Resources.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>

   </Grid>

</Window>

以上的 XAML 文件包含不同种类的信息。以下表格简要解释每条信息的用途。

The above XAML file contains different kinds of information. The following table briefly explains the role of each information.

Information

Description

<Window

It is the opening object element or container of the root.

x:Class = "Resources.MainWindow"

It is a partial class declaration which connects the markup to the partial class code defined behind.

xmlns = link:http://schemas.microsoft.com/win fx/2006/xaml/presentation["http://schemas.microsoft.com/win fx/2006/xaml/presentation"]

Maps the default XAML namespace for WPF client/framework

xmlns:x = link:http://schemas.microsoft.com/w infx/2006/xaml["http://schemas.microsoft.com/w infx/2006/xaml"]

XAML namespace for XAML language which maps it to x: prefix

End of object element of the root

It is starting and closing tags of an empty grid object.

</Window>

Closing the object element

XAML 的语法规则几乎与 XML 相似。如果您查看 XAML 文档，您就会注意它实际上是一个有效的 XML 文件，但 XML 文件并不一定是 XAML 文件。这是因为在 XML 中，属性的值必须是字符串，而在 XAML 中，它可以是不同的对象，称为属性元素语法。

The syntax rules for XAML is almost similar to XML. If you look at an XAML document, then you will notice that it is actually a valid XML file, but an XML file is not necessarily an XAML file. It is because in XML, the value of the attributes must be a string while in XAML, it can be a different object which is known as Property element syntax.

The syntax of an Object element starts with a left angle bracket (<) followed by the name of an object, e.g. Button.
Define some Properties and attributes of that object element.
The Object element must be closed by a forward slash (/) followed immediately by a right angle bracket (>).

Example of simple object with no child element

<Button/>

Example of object element with some attributes

<Button Content = "Click Me" Height = "30" Width = "60" />

Example of an alternate syntax do define properties (Property element syntax)

<Button>
   <Button.Content>Click Me</Button.Content>
   <Button.Height>30</Button.Height>
   <Button.Width>60</Button.Width>
</Button>

Example of Object with Child Element: StackPanel contains Textblock as child element

<StackPanel Orientation = "Horizontal">
   <TextBlock Text = "Hello"/>
</StackPanel>

Why XAML in WPF

XAML 不仅是 WPF 中最广为人知的特性，也是最容易被误解的特性之一。如果您接触过 WPF，您一定听说过 XAML；但请注意以下有关 XAML 的两个鲜为人知的事实。

XAML is not only the most widely known feature of WPF, but it’s also one of the most misunderstood features. If you have exposure to WPF, then you must have heard of XAML; but take a note of the following two less known facts about XAML −

WPF doesn’t need XAML
XAML doesn’t need WPF

它们实际上是可分离的技术。为了理解原因，我们来看一个简单的示例，其中在 XAML 中创建了一个带有一些属性的按钮。

They are in fact separable pieces of technology. To understand how that can be, let’s look at a simple example in which a button is created with some properties in XAML.

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

   <StackPanel>
      <Button x:Name = "button" Content = "Click Me" HorizontalAlignment = "Left"
         Margin = "150" VerticalAlignment = "Top" Width = "75" />
   </StackPanel>

</Window>

如果您选择不在 WPF 中使用 XAML，那么您也可以使用过程语言获得相同的 GUI 结果。我们来看相同的一个示例，但这次我们将在 C# 中创建一个按钮。

In case you choose not to use XAML in WPF, then you can achieve the same GUI result with procedural language as well. Let’s have a look at the same example, but this time, we will create a button in C#.

using System.Windows;
using System.Windows.Controls;

namespace WPFXAMLOverview {
   /// <summary>
      /// Interaction logic for MainWindow.xaml
   /// </summary>

   public partial class MainWindow : Window {

      public MainWindow() {
         InitializeComponent();

         // Create the StackPanel
         StackPanel stackPanel = new StackPanel();
         this.Content = stackPanel;

         // Create the Button
         Button button = new Button();
         button.Content = "Click Me";
         button.HorizontalAlignment = HorizontalAlignment.Left;
         button.Margin = new Thickness(150);
         button.VerticalAlignment = VerticalAlignment.Top;
         button.Width = 75;
         stackPanel.Children.Add(button);
      }
   }
}

当您编译并执行 XAML 代码或 C# 代码时，您看到的输出与下面显示的相同。

When you compile and execute either the XAML code or the C# code, you will see the same output as shown below.

从上述示例中，显然您可以使用 XAML 做些什么来创建、初始化和设置对象属性，相同的任务也可以使用代码完成。

From the above example, it is clear that what you can do in XAML to create, initialize, and set properties of objects, the same tasks can also be done using code.

XAML is just another simple and easy way to design UI elements.
With XAML, it doesn’t mean that what you can do to design UI elements is the only way. You can either declare the objects in XAML or define them using code.
XAML is optional, but despite this, it is at the heart of WPF design.
The goal of XAML is to enable visual designers to create user interface elements directly.
WPF aims to make it possible to control all visual aspects of the user interface from mark-up.