【WPF自学指南】1.XAML入门

金金金水水水

已于 2025-02-17 11:52:07 修改

阅读量973

点赞数 21

CC 4.0 BY-SA版权

分类专栏： WPF 文章标签： wpf c#

于 2025-02-17 11:43:03 首次发布

本文链接：https://blog.youkuaiyun.com/wangjinicheng/article/details/145678436

WPF 专栏收录该内容

3 篇文章

订阅专栏

一、XAML 简介

在 WPF 开发中，XAML 是一种基于 XML 的标记语言，用于构建 WPF 应用程序的用户界面。它以声明性方式描述界面元素，将界面设计与业务逻辑分离，给开发者带来便利，提升开发效率和应用程序可维护性。为了让大家更直观地感受 XAML 的魅力，我们先来看一个简单的示例：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="我的第一个WPF窗口" Height="350" Width="525">
    <Grid>
        <Button Content="点击我" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

这是一段定义简单 WPF 窗口的 XAML 代码，运行后能看到有固定大小、标题且中心有 “点击我” 按钮的窗口。此示例虽基础，却展示了 XAML 用简洁标记语言创建 UI 元素的核心功能，几行代码就能生成含基本交互元素的窗口。相信你已迫不及待探索 XAML，接下来一起揭开其神秘面纱。

一、XAML 语法基础

（一）元素与属性

在 XAML 体系中，元素作为构成用户界面的基本单元，类似于搭建积木时的基础组件。不同元素具有各自独特的结构与功能，通过对其进行合理的组合与编排，能够构建出多样化的用户界面。属性则是对元素特性的描述，例如积木的颜色、尺寸等属性，用于对元素的外观及行为进行更细致的定制。以常见的 Button（按钮）、TextBox（文本框）和 Label（标签）元素为例，Button 用于触发用户操作，TextBox 用于接收用户输入文本，Label 用于显示静态文本。在 XAML 中定义它们的方式如下：

<StackPanel>
    <Button Content="提交" Width="80" Height="30"/>
    <TextBox Width="200" Height="30"/>
    <Label Content="欢迎使用本应用" Width="150" Height="25"/>
</StackPanel>

在这段代码中，<StackPanel>是布局容器，能按垂直或水平方向排列包含元素，这里将 Button、TextBox 和Label元素放入其中。Button文本设为 “提交”，宽 80 高 30；TextBox宽 200 高 30；Label显示 “欢迎使用本应用”，宽 150 高 25。

（二）数据类型使用

在 XAML 中，属性可以接受多种数据类型的值，以满足不同的界面需求。

字符串类型：最为常见，如上述示例中Button的Content属性、Label的Content属性值都是字符串，用于显示文本内容。

数值类型：用于设置元素的尺寸、位置等属性，像Width、Height属性接受的就是数值类型，单位通常为像素。除了普通的整数和小数，还可以使用科学计数法，例如将 1000000 记为 “1E+06” 。

颜色类型：可以通过多种方式指定。比如使用预定义的颜色名称，如 “Red” 表示红色；也可以使用十六进制的 RGB 值，如 “#FF0000” 同样表示红色，其中前两位 “FF” 表示红色通道的强度，中间两位 “00” 表示绿色通道强度，最后两位 “00” 表示蓝色通道强度；对于 scRGB 色彩空间，其值设置在 0 到 1 之间，如 “sc#0.1,0.2,0.3” 表示一种自定义的颜色。

画笔类型：当需要更复杂的填充效果时，就会用到画笔类型。例如，使用SolidColorBrush（纯色画笔）可以设置元素的背景或前景颜色，代码如下：

<Button>
    <Button.Background>
        <SolidColorBrush Color="Blue"/>
    </Button.Background>
    <Button.Content>蓝色背景按钮</Button.Content>
</Button>

这里通过Button.Background属性设置按钮的背景为蓝色，使用SolidColorBrush元素，并通过Color属性指定颜色为 “Blue” 。

（三）命名空间

在 XAML 中，命名空间就像是一个庞大的仓库，里面存放着各种各样的类和资源，通过引用命名空间，我们可以在 XAML 文件中使用这些类和资源，极大地丰富了我们的开发工具库。

系统命名空间引用：在每个 WPF 的 XAML 文件中，通常会默认引用两个重要的命名空间：

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

第一个命名空间http://schemas.microsoft.com/winfx/2006/xaml/presentation是 WPF 控件和布局的默认命名空间，包含Button、TextBox等大量常用 WPF 元素，前面示例中的这些元素就来自该命名空间，因是默认命名空间，使用时无需添加额外前缀。

第二个命名空间http://schemas.microsoft.com/winfx/2006/xaml是 XAML 基础命名空间，定义了如x:Class（指定代码隐藏类）、x:Name（为元素命名供代码引用）、x:Key（标识资源字典中的资源）等 XAML 特性和功能。

自定义命名空间引用：当我们在项目中创建了自己的类、控件或资源时，就需要引用自定义命名空间来在 XAML 中使用它们。假设我们有一个自定义控件库，其中包含一个名为MyCustomControl的自定义控件，位于MyNamespace.Controls命名空间中，并且该控件库编译成了MyControlsLibrary.dll程序集，那么在 XAML 中引用它的方式如下：

xmlns:local="clr-namespace:MyNamespace.Controls;assembly=MyControlsLibrary"

这里xmlns:local表示定义一个命名空间别名 “local”，clr-namespace:MyNamespace.Controls指定了命名空间的名称，assembly=MyControlsLibrary指定了程序集名称。之后就可以在 XAML 中使用这个自定义控件了：

\<local:MyCustomControl />

通过这样的方式，我们可以将自己开发的功能模块集成到 XAML 界面中，实现代码的复用和扩展，为构建复杂的应用程序提供了有力支持。

三、实践与总结

在这里插入图片描述

为了让大家更好地巩固所学的 XAML 知识，下面给出一个综合示例，展示如何在一个窗口中组合使用多种元素，并设置不同的数据类型属性和命名空间：

<Window x:Class="WpfApp3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="XAML示例"
        Width="500" Height="400">
    <Grid Background="White">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Margin="10" FontSize="24"
                       FontWeight="Bold" Foreground="Black"
                       Text="用户登录" />
            <TextBox x:Name="txtUsername" Width="250"
                     Height="30" Margin="10"
                     VerticalContentAlignment="Center" Text="请输入用户名" />
            <TextBox x:Name="txtPassword" Width="250"
                     Height="30" Margin="10"
                     VerticalContentAlignment="Center" Text="请输入密码" />
            <Button Width="100" Height="30"
                    Margin="10" Background="Black"
                    Content="登录" Foreground="White" />
        </StackPanel>
    </Grid>
</Window>

在该示例中，创建含登录界面的窗口。Window为根元素，引用系统和自定义命名空间。Grid作布局容器，背景浅灰。StackPanel垂直排列元素，含标题TextBlock、用户名和密码TextBox以及 “登录”Button，并设置背景色。通过此例，学习了 XAML 语法基础，包括元素属性定义使用、数据类型应用及命名空间引用，这是 WPF 开发基石。XAML 还有样式、模板、数据绑定等高级特性待探索，后续不断实践，就能用 XAML 构建更复杂美观且功能强大的 WPF 应用界面。