WPF的控件总结
根据用途对控件进行分类
1. 基础输入控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
TextBox |
单行文本输入 | 用户名、搜索框 |
PasswordBox |
密码输入(自动掩码) | 登录密码输入 |
RichTextBox |
富文本编辑(带格式) | 文档编辑器 |
CheckBox |
布尔值选择(可多选) | "记住我"选项 |
RadioButton |
单选选择(需分组) | 性别选择 |
Slider |
数值范围选择 | 音量控制、年龄选择 |
| UniformGrid | 自动生成统一行和列 | |
| Border | 装饰控件,背景/边框 圆角 | |
NumericUpDown |
数字输入(需自定义或第三方库) | 商品数量选择 |
2. 选择器控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
ComboBox |
下拉单选列表 | 国家/城市选择 |
ListBox |
平铺单选/多选列表 | 文件多选 |
ListView |
高级列表(支持列视图) | 文件管理器 |
TreeView |
层级数据选择 | 文件夹导航 |
DatePicker |
日期选择 | 生日输入 |
Calendar |
可视化日历选择 | 会议日程安排 |
3. 数据显示控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
DataGrid |
表格数据显示(支持编辑/排序) | 员工信息表 |
ItemsControl |
自定义数据项集合展示 | 动态生成的卡片列表 |
DataGridTextColumn |
在DataGrid中显示文本列 | 显示产品名称 |
ToolTip |
悬停提示信息 | 按钮功能说明 |
StatusBar |
底部状态信息展示 | 显示登录用户信息 |
4. 命令操作控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
Button |
触发命令操作 | 提交/取消按钮 |
RepeatButton |
按住持续触发的按钮 | 音量增减按钮 |
ToggleButton |
开关状态按钮 | 夜间模式切换 |
ContextMenu |
右键上下文菜单 | 文件右键操作菜单 |
Menu |
顶部菜单栏 | 主菜单(文件/编辑/帮助) |
5. 布局容器控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
Grid |
网格布局(最灵活) | 表单布局 |
StackPanel |
线性排列(水平/垂直) | 工具栏按钮排列 |
DockPanel |
边缘停靠布局 | 类似IDE的布局 |
WrapPanel |
自动换行布局 | 标签云 |
Canvas |
绝对坐标定位 | 绘图画布 |
ScrollViewer |
内容滚动容器 | 长文本/图片滚动查看 |
TabControl |
多页签容器 | 设置对话框 |
6. 内容展示控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
Label |
简单文本展示 | 表单字段标题 |
TextBlock |
格式化文本展示 | 产品描述(支持换行) |
Image |
图片展示 | 用户头像 |
ProgressBar |
进度显示 | 文件上传进度 |
MediaElement |
音视频播放 | 视频播放器 |
Frame |
页面导航容器 | 实现向导式界面 |
7. 装饰性控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
Border |
为控件添加边框 | 分组框装饰 |
GroupBox |
带标题的分组容器 | 表单区域分组 |
Expander |
可展开/折叠的面板 | 高级选项折叠面板 |
Separator |
分隔线 | 菜单项分组线 |
Viewbox |
内容自动缩放容器 | 可缩放的LOGO |
8. 特殊功能控件
| 控件名称 | 主要用途 | 示例场景 |
|---|---|---|
WebBrowser |
嵌入网页内容 | 显示帮助文档HTML |
InkCanvas |
手写输入/绘图 | 电子签名板 |
DataGridTemplateColumn |
自定义DataGrid列模板 | 在表格中嵌入按钮 |
Popup |
浮动弹窗 | 自定义下拉菜单 |
Validation.ErrorTemplate |
输入验证错误提示 | 表单验证错误红框提示 |
分类使用建议
- 表单场景 :
Grid+TextBox/ComboBox+Button - 数据展示 :
DataGrid/ListView+Binding - 仪表盘 :
UniformGrid+ProgressBar/Chart(需第三方库) - 导航系统 :
TabControl+TreeView+Frame - 绘图应用 :
Canvas+InkCanvas+Slider(用于画笔粗细)
总结如下
| 控件名称 | 作用描述 | 常用属性 | 常见用途 |
|---|---|---|---|
| Button | 触发操作的按钮 | Content, Command, Click, IsEnabled, Style |
提交表单、触发命令 |
| TextBox | 单行文本输入框 | Text, MaxLength, IsReadOnly, TextWrapping |
用户名、搜索框等输入 |
| TextBlock | 显示只读文本 | Text, FontSize, Foreground, TextWrapping |
标签、说明文字 |
| Label | 带有助记符功能的文本标签 | Content, Target |
为其他控件提供可聚焦的标签 |
| ComboBox | 下拉选择框 | ItemsSource, SelectedItem, DisplayMemberPath, IsEditable |
国家/地区选择、分类选择 |
| ListBox | 列表选择框 | ItemsSource, SelectedItem, SelectionMode |
多选列表、导航菜单 |
| ListView | 高级列表控件,支持列视图 | ItemsSource, View, SelectedItem, GridView |
数据表格展示 |
| DataGrid | 功能强大的数据表格 | ItemsSource, AutoGenerateColumns, SelectedItem, CanUserAddRows |
数据管理、编辑 |
| CheckBox | 复选框 | IsChecked, Content, ThreeState |
选项选择、开关 |
| RadioButton | 单选按钮(需分组) | IsChecked, Content, GroupName |
单项选择(如性别选择) |
| Slider | 滑块控件 | Value, Minimum, Maximum, Orientation |
音量控制、范围选择 |
| ProgressBar | 进度条 | Value, Minimum, Maximum, IsIndeterminate |
显示操作进度 |
| Image | 显示图像 | Source, Stretch, Width/Height |
显示图标、图片 |
| DatePicker | 日期选择器 | SelectedDate, DisplayDate, FirstDayOfWeek |
生日选择、日期范围 |
| Calendar | 日历控件 | SelectedDate, DisplayDate, SelectionMode |
日期选择、日程安排 |
| TabControl | 选项卡容器 | Items, SelectedIndex, TabStripPlacement |
多页面切换 |
| TreeView | 树形结构控件 | ItemsSource, SelectedItem, HierarchicalDataTemplate |
文件浏览器、分类导航 |
| Menu | 菜单栏 | Items, MenuItem |
应用程序菜单 |
| ToolBar | 工具栏 | Items, Orientation |
快捷操作工具栏 |
| StatusBar | 状态栏 | Items |
显示应用程序状态信息 |
| ScrollViewer | 滚动容器 | HorizontalScrollBarVisibility, VerticalScrollBarVisibility, Content |
内容超出可视区域时提供滚动 |
| Border | 边框装饰器 | BorderBrush, BorderThickness, CornerRadius, Background |
为控件添加边框 |
| Expander | 可展开/折叠的面板 | Header, IsExpanded, Content |
可折叠的内容区域 |
| GroupBox | 分组容器 | Header, Content |
表单分组 |
| DockPanel | 停靠布局面板 | LastChildFill, Dock(附加属性) |
类似WinForms的停靠布局 |
| StackPanel | 堆叠布局面板 | Orientation, Children |
水平或垂直排列控件 |
| WrapPanel | 自动换行面板 | Orientation, ItemWidth, ItemHeight |
标签云、自动换行的控件集合 |
| Canvas | 绝对定位面板 | Left/Top/Right/Bottom(附加属性) |
绘图、自由布局 |
| Grid | 网格布局面板(最常用) | RowDefinitions, ColumnDefinitions, Row/Column(附加属性) |
复杂布局的基础 |
| Frame | 页面导航容器 | Source, NavigationUIVisibility, JournalOwnership |
实现类似Web的页面导航 |
| PasswordBox | 密码输入框 | Password, MaxLength, PasswordChar |
密码输入 |
| RichTextBox | 富文本编辑器 | Document, IsReadOnly |
复杂文本编辑 |
| WebBrowser | 嵌入Web内容 | Source, Navigate |
显示HTML内容 |
常用通用属性(几乎所有控件都有):
Visibility- 控件可见性(Visible/Collapsed/Hidden)Width/Height- 宽度/高度Margin/Padding- 外边距/内边距HorizontalAlignment/VerticalAlignment- 对齐方式Background/Foreground- 背景/前景色FontSize/FontFamily/FontWeight- 字体相关DataContext- 数据上下文Style- 样式ToolTip- 工具提示IsEnabled- 是否启用
特殊说明:
- 内容控件 (如Button、Label等)使用
Content属性而非Text - 集合控件 (如ListBox、ComboBox等)使用
ItemsSource进行数据绑定 - 布局面板既是控件也是容器,可以嵌套使用
- 许多属性可以通过附加属性设置(如Grid.Row)
初始WPF
初步了解WPF
WPF全称
WPF全称:Windows Presentation Foundation
WPF的概述
plain
1:WPF的核心是一个与分辨率无关且基于矢量的呈现引擎,旨在充分利用现代图形硬件。
2:WPF 通过一套完善的应用程序开发功能对该核心进行了扩展,这些功能包括可扩展
应用程序标记语言(XAML)、控件、数据绑定、布局、二维和三维图形、动画、样式、模
板、文档、媒体、文本和版式。WPF 属于.NET,因此可以生成整合.NET API其他元素的
应用程序。 -- 引用自微软官方文档
简介:Windows用户界面框架,统一的编程模型、语言和框架,做到了界面设计与后端开发分离。
特点
- 呈现效果不受分辨率的影响
- 基于DirectX 3d技术,可以做出炫酷的界面
- 提供UI框架,集成了矢量图形、流动文字支持、3d视觉效果和控件模型框架
- UI与业务逻辑彻底分离,UI-XAML描述(底层wpf引擎是把元索解释成对应的对象)
- xp server2003到window7及以后的操作系统版本都可以支持
- 基于数据驱动,数据是核心
数据驱动UI,数据是核心,处于主动的,UI从属于数据并表达数据,是被动的。WPF中 数据主动,UI被动; 数据第一,控件第二
学习前提
基础:首先我们需要先入门C#/VB
开发工具:Visual Studio 2019/2022
框架环境:.net core 3.1 或者 .net framework4.0+
基础知识点:
数据类型、类型转换、变量、常量、运算符、字符串、枚举、数组、类的相关知识(如继
承、重载等)、集合、异常处理、IO流
进阶知识点:
特性(Attribute)、反射(Reflection)、索引器(Indexer)、委托(Delegate)、事
件、泛型、C#多线程
了解学习内容
控件分类(按命名空间):
| System.Windows.Controls (程序集:PresentationFramework.dll) | ||
|---|---|---|
| ⽂档地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls?view=windowsdesktop-6.0 | ||
| Label (表示控件的⽂本标签,并提供访问密钥⽀持。) | TextBox(显示或编辑⽆格式⽂本) | TextBlock(⼀个轻型控件,⽤于显示少量流内容) |
| Border (边框控件 ,作⽤在另⼀个元素四周绘制边框和/或背景) | Button(按钮控件) | Calendar (⽇历控件) |
| CheckBox(选择框) | ComboBox (下拉框) | Image (图⽚控件) |
| Menu(菜单) | ContextMenu(内容菜单) | RadioButton(表示可由⽤户选择但不能清除的按钮,代码能清除) |
| DataGrid(数据⽹格--Table) | ListBox(包含可选项列表) | ListView(表示⽤于显示数据项列表的控件) |
| DockPanel(定义⼀个区域 从中可以按相对位置⽔平或垂直排列各个⼦元素。)---码头;港区 | Grid(定义由列和⾏组成的灵活的⽹格区域) | GroupBox(组控件---表示⼀个控件 该控件⽤于创建具有⽤户界⾯(UI) 内容边框和标题的容器。) |
| PrintDialog(调⽤标准的 Microsoft Windows打印对话框) | ProgressBar(指示操作进度) | Canvas (画布控件) |
| RichTextBox(表示对FlowDocument 对象进⾏操作的丰富编辑控件) | ToolBar(⼀组命令或控件提供容器) | Expander(折叠控件)表示⼀种控件,该控件显示具有可折叠内容显示窗⼝的标题。 |
| TabControl(表示包含多个项的控件,这些项共享屏幕上的同⼀空间) | Frame(⼀种⽀持导航的内容控件) | Rectangle(矩形区域) |
| StackPanel(将⼦元素排列成⽔平或垂直的⼀⾏。) | WrapPanel (按从左到右的顺序位置定位⼦元素,在包含框的边缘处将内容切换到下⼀⾏。) |
初步了解XAML
什么是 XAML
XAML 是⼀种声明性标记语⾔。 应⽤于 .NET Core 编程模型时,XAML 简化了为.NET Core 应⽤创建 UI 的过程。 XAML ⽂件是通常具有 .xaml 扩展名的 XML ⽂件。 可通过任何 XML 编码对⽂件进⾏编码,但通常以 UTF-8 编码。
特点:
- 定义应用程序的**界面元素**
- 显示的声明WPF资源**(样式、模板、动画等)**
- 可扩展性(自定义UI控件)
- 集中关注于**界面的**设计和实现
xml
<StackPanel>
<Button Content="Click Me"/>
</StackPanel>
对象元素语法
对象元素语法 是 XAML 标记语法,它通过声明 XML 元素来实例化 CLR 类或结
构。 此语法类似于其他标记语⾔(如 HTML)的元素语法。
- 单标签格式。。
- 双标签格式。【可嵌⼊其他的标签】

XAL 根元素
plain
⼀个 XAML ⽂件只能有⼀个根元素,这样才能同时作为格式正确的 XML ⽂件和有效的 XAML ⽂件。 对于典型 WPF ⽅案,可使⽤在 WPF 应⽤模型中具有突出意义
的根元素(例如,⻚⾯的 Window 窗体 或 Page 页面)
。
plain
在根标签下⾯有且只能有⼀个二级标签。在二级标签⾥⾯我们可以写多个三级 四级标签。

创建应用



WPF 和 XAML 命名空间声明
XAML和.NET其他语言一样 ,也是通过命名空间 有效**组织起XAML内部的相关元素类,这里的命名空间与.NET中的命名空间 不是一一对应的,而是 一对多**,一眼望去,都是** "网址**",这里的网址,是** 遵循XAML解析器标准的命名规则,而不是真正的网址.**
在许多 XAML ⽂件的根标记中的命名空间声明内,通常可看到两个 XML 命名空间声明。
** 第⼀个声明 --默认命名空间(所有WPF类 ,包括构建用户界面使用的控件)**
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
第⼆个声明--****映射单独的 XAML 命名空间,对应一些与XAML语法和编译相关的CLR名称空间
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns和xmlns:x的**区别在于 x作为别名**,在应用时,以前缀形式出现,而xmlns作为** 默认命名空间,不****使用前缀标识的元素,来自该命名空间(默认命名空间)**

xaml命名空间的语法
- xmlns[:可选映射前缀]="命名空间描述"
- 注意:没有加可选映射前缀的xmlns是WPF默认的命名空间,一个xaml文件**只能有一个默认**的命名空间
- 一个**完整的xaml文件,必须具备** 以上**两个命名空间****,因为不可能不用到WPF和XAML类库**
- 自定义类或程序集**映射语法**
** xmlns[:必选映射前缀]="****clr-namespace:[****命名空间];assembly=[程序集名称]"**
自定义类案例如下:

wpf项目组成
- **app.config **配置文件 ----连接字符串、配置信息
- App.xaml ** 设置应用程序起始文件与系统级资源**
- App.xaml.cs ** app.xaml文件的 后台类文件** ,继承自Application,封装整个WPF应用程序处
- MainWindow.xaml ** Window ----WPF应用程序界面与Xaml设计文件**
- MainWindow.xaml.cs ** ---xaml窗口文件的后台代码文件**
了解wpf项目文件
1.App.config配置文件 ----连接字符串、配置信息
以为配置数据库连接为例子

2.App.xaml 入口文件

文件作用
- 应用程序的入口点
- 管理应用程序的生命周期(启动、退出等)
- 定义全局资源(样式、模板、字符串等)
- 指定应用程序启动时显示的第一个窗口
xml
<Application x:Class="WPFCourse01.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFCourse01"
Startup="Application_Startup"
StartupUri="LoginWin.xaml"
>
<Application.Resources>
<!--定义或合并资源字典-->
<!--可定义样式、模板、字符串、颜色等,供整个应用程序使用-->
<!-- 例如:所有按钮,字体白色,背景为蓝色 -->
<Style x:Key="MyBtn" TargetType="Button">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</Application.Resources>
</Application>
plain
绑定样式:
<Button Style="{ StaticResources MyBtn }">
csharp
using System.Windows;
namespace WPFCourse01
{
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
// 应用程序启动时执行的代码
// 例如:检查用户是否已登录
bool isUserLoggedIn = CheckLoginStatus();
if (isUserLoggedIn)
{
// 已登录,显示主窗口
MainWindow mainWindow = new MainWindow();
mainWindow.Show();
}
else
{
// 未登录,显示登录窗口(由StartupUri指定)
// 或者在这里手动创建和显示登录窗口
}
}
private bool CheckLoginStatus()
{
// 检查登录状态的逻辑
return false;
}
}
}
启动页面三种方式
csharp
StartupUri="LoginWin.xaml"
csharp
// 设置启动页 StartupUri
Application.Current.StartupUri = new Uri("LoginWin.xaml", UriKind.Relative);
csharp
LoginWin loginWin = new LoginWin();
loginWin.Show();
//默认:关闭最后一个窗口,才退出应用程序
//改成:关闭启动页就退出
Application.Current.ShutdownMode = ShutdownMode.OnMainWindowClose;
执行流程
- 应用程序启动
- 触发
Application_Startup事件 - 在事件处理方法中执行初始化逻辑
- 根据条件显示相应的窗口
- 如果没有处理 Startup 事件,直接显示 StartupUri 指定的窗口
注意事项
- 如果同时设置了 Startup 事件和 StartupUri,需要注意两者之间的关系
- 全局资源可被应用程序中的所有控件访问
- 可在资源字典中合并多个资源文件,实现更好的组织和复用
3MainWindow.xaml 窗体文件
文件作用:
:::color1
MainWindow.xaml 窗体文件。编写界面布局,控件,语法为:xaml
后台对应 MainWindow.xaml.cs文件:这里编写CS 脚本,界面交互,事件处理,通信,连接数据库等
:::
xml
<!-- 主窗口根元素,定义了窗口的基本属性和命名空间引用 -->
<!-- x:Class - 指定与此 XAML 文件关联的代码隐藏类 -->
<!-- xmlns - WPF 核心命名空间,提供基础 UI 元素(如Button、TextBox、Label)等 -->
<!-- xmlns:x - XAML 语言命名空间,提供 XAML 特定功能
如类绑定(x:Class)、属性元素语法、附加属性、事件处 -->
<!-- xmlns:d - Blend 设计时命名空间,用于设计时属性,例如:允许绑定数据 -->
<!-- xmlns:mc - 标记兼容性命名空间,用于忽略不兼容的标记 -->
<!-- xmlns:model - 自定义模型类的命名空间引用 -->
<!-- xmlns:sys - System.Data 命名空间引用,用于数据处理 -->
<!-- xmlns:local - 当前项目命名空间引用 -->
<!-- mc:Ignorable="d" - 忽略设计时特定的标记 -->
<!-- Title, Height, Width - 窗口标题和尺寸属性 -->
<Window x:Class="WPFCourse01.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:model="clr-namespace:WPFDemo.Models;assembly=WPFDemo.Models"
xmlns:sys="clr-namespace:System.Data;assembly=System.Data"
xmlns:local="clr-namespace:WPFCourse01"
mc:Ignorable="d"
Title="首页" Height="450" Width="800">
<Grid>
<!-- 网格面板,作为布局容器使用 -->
<!-- 目前为空,可以添加各种 UI 元素如按钮、文本框等 -->
</Grid>
</Window>
x:Class - 指定与此 XAML 文件关联的代码隐藏类

x:Class="WPFCourse01.MainWindow":关联的 C# 代码隐藏类(MainWindow.xaml.cs)。- 核心命名空间 :
xmlns:WPF 核心命名空间,提供基础 UI 元素(如Button、TextBox、Grid)。xmlns:x:XAML 语言命名空间,提供 XAML 特定功能(如x:Class、事件绑定)。
- 设计时命名空间 :
xmlns:d:Blend 设计时命名空间,用于设计器预览(如d:DataContext)。
- 兼容性命名空间 :
xmlns:mc和mc:Ignorable="d":忽略设计时特定的标记(如d:属性),确保运行时不报错。
- 自定义命名空间 :
xmlns:model:引用外部程序集(WPFDemo.Models)中的模型类。xmlns:sys:引用System.Data命名空间(用于数据处理)。xmlns:local:引用当前项目(WPFCourse01)中的类。
:::color1
注意事项:一个窗体只有一个跟标签 window ,window下只有一个二级标签 ,二级标签下可以又多个标签
:::
window 窗口:WPF的窗口
:::color1
作用:托管使数据可视化并使**用户能够与数据交互的内容。**
WPF 应用程序使用Window类**<font style="color:#7E45E8;">提供自己的窗口</font>**
:::
:::color1
窗口分为两个区域:非工作区和工作区。
非工作区:边框、标题栏、图标、"最小化"、"最大化"和"还原"按钮。"关闭"按钮、"系统"菜单
工作区:窗口非工作区内的区域,开发人员使用它来添加特定于应用程序的内容,例如菜单栏、工具栏和控件。
:::

在 WPF 中,窗口可用于:
- 显示窗口
- 配置窗口的大小、位置和外观。
- 托管特定于应用程序的内容。
- 管理窗口的生存期
在 WPF 中,可以**使用代码或 XAML标记实现控制窗口的外观和行为**。
但一般情况下,
外观-------------xaml标记实现
行为-------------代码实现
无边边框窗体案例
csharp
<Window x:Class="WPFCourse01.LoginWin"
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:WPFCourse01"
mc:Ignorable="d"
Title="登录页" Height="450" Width="800"
WindowStartupLocation="CenterScreen"
WindowStyle="None"
Background="Transparent"
Name="loginwin">
<Border BorderBrush="Orange" BorderThickness="3" CornerRadius="5">
<Grid Background="White">
<Grid Height="30" Background="LightBlue" VerticalAlignment="Top" MouseLeftButtonDown="Grid_MouseLeftButtonDown" HorizontalAlignment="Stretch" Margin="0">
<Label Content="{Binding ElementName=loginwin,Path=Title}"
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="40,0"/>
<Button Content="0" FontFamily="Webdings" Width="20" Height="20"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="80,0"/>
<Button Name="btnMax" Content="2" FontFamily="Webdings"
Width="20" Height="20" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="50,0" Click="btnMax_Click"/>
<Button Content="r" FontFamily="Webdings" Width="20" Height="20"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="20,0"/>
</Grid>
<Button Content="登录" HorizontalAlignment="Left" Margin="135,118,0,0" VerticalAlignment="Top" Width="130" Height="55" Name="btnLogin" Foreground="Orange" FontSize="18" Click="btnLogin_Click"/>
</Grid>
</Border>
</Window>
window标记与代码协同工作
:::color1
需要满足以下要求:
1.在标记中 **, Window元素必须包含x:Class属性 。** 生成应用程序后x:Class ,标记文件中存在会导致 Microsoft 生成引擎(MSBuild)创建一个**partial派生自Window的类**,并具有由x:Class属性指定的名称。 这要求为XAML架构( xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" )添加 XML 命名空间声明。 生成partial的类实现**InitializeComponent方**法,该方法用于注册事件并设置标记中实现的属性。
2.在代码隐藏中 ,类 必须是由标记partial中 的**x:Class属性指定的 同名类**,并且** 必须派生自Window**。 这允许在生成应用程序时将** 代码隐藏文件与partial为标记文件生成的类****相关联**
3.在代码隐藏中 , Window该类必须实 现**调用InitializeComponent方法的构造函数。 InitializeComponent由 标记文件的生成partial类实现,用于注册事件和设置在标记中定义的属性。**
:::
window生命周期

- 窗口也有**生存期**,开始于** 首次实例化窗口,在这之后将打开、激活、停用**直至最终关闭窗口。
- 在实例化窗口时,对它的引用会**自动添加到由该Application对象管理的窗口的 列表中**。 此外,默认情况下,第一个要实例化的窗口是由**Application设置为主应用程序窗口**
- window.Show() 打开窗口 (无模式窗口--允许用户在同一应用程序中激活其他窗口)
- ShowDialog 调用以模式打开 windows,如对话框
- Close() 关闭窗口
控件分类
内容控件、⽂本控件、条⽬控件、布局控件、其它控件
| 内容控件 (System.Windows.Controls.ContentControl) | |
|---|---|
| System.Windows.Controls.Label | |
| System.Windows.Controls.TextBlock | 继承⾃ FrameworkElement类 |
| System.Windows.Controls.Button | |
| System.Windows.Controls.Border | 继承⾃Decorator类 |
| System.Windows.Controls.RadioButton | |
| System.Windows.Controls.CheckBox | |
| System.Windows.Controls.ToolTip | |
| System.Windows.Controls.GroupBox | |
| System.Windows.Controls.Expander | |
| System.Windows.Controls.Frame |
| ⽂本控件 (System.Windows.Controls.TextBoxBase) | |
|---|---|
| System.Windows.Controls.TextBox | |
| System.Windows.Controls.RichTextBox |
| 条⽬控件 (System.Windows.Controls.ItemsControl) | |
|---|---|
| System.Windows.Controls.ComboBox | |
| System.Windows.Controls.Menu | |
| System.Windows.Controls.ContextMenu | |
| System.Windows.Controls.TabControl | |
| System.Windows.Controls.ToolBar | |
| System.Windows.Controls.ToolBarTray | |
| System.Windows.Controls.ListBox | |
| System.Windows.Controls.DataGrid | |
| System.Windows.Controls.TreeView |
| 布局控件 (System.Windows.Controls.Panel) | |
|---|---|
| System.Windows.Controls.Grid | |
| System.Windows.Controls.StackPanel | |
| System.Windows.Controls.DockPanel | |
| System.Windows.Controls.WrapPanel | |
| System.Windows.Controls.Canvas |
| 其他控件 | |
|---|---|
| System.Windows.Controls.Calendar | |
| System.Windows.Controls.Image | |
| System.Windows.Controls.ProgressBar | |
| System.Windows.Shapes.Rectangle |
WPF入门指南
一、什么是WPF?
WPF(Windows Presentation Foundation):微软推出的Windows桌面应用UI框架,属于.NET Framework的一部分。简单说,就是用来做Windows程序界面的工具,能做出带图片、动画、3D效果的漂亮界面,还能让界面设计和代码逻辑分开做。
特点:
- 基于DirectX技术,支持硬件加速,界面更流畅
- 用XAML语言写界面,用C#等写逻辑,分工明确
- 支持矢量图形、动画、多媒体,视觉效果丰富
- 数据驱动UI:数据变了,界面自动跟着变,不用手动刷新
二、XAML是什么?
XAML(可扩展应用程序标记语言):专门用来描述WPF界面的标记语言,长得像HTML,但功能更强。
作用:
- 定义界面元素(按钮、文本框等)
- 声明资源(样式、模板、动画)
- 让界面和逻辑分离,设计师和开发者能协作
例子:一个简单的按钮界面
xml
<Button Content="点击我" Width="100" Height="30" />
三、WPF应用程序的组成
一个WPF程序主要由这些文件组成:
| 文件 | 作用 |
|---|---|
| app.config | 配置文件,存连接字符串、设置等 |
| App.xaml | 应用程序入口,设置启动窗口、全局资源 |
| App.xaml.cs | App.xaml的后台代码,处理程序启动、退出等事件 |
| MainWindow.xaml | 主窗口界面文件 |
| MainWindow.xaml.cs | 主窗口的后台代码,处理按钮点击等逻辑 |
四、XAML命名空间
XAML用"命名空间"来组织元素,就像文件夹分类文件。看起来像网址,其实不是真的网址,只是个标识。
1. 常用命名空间
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation":默认命名空间,包含所有WPF基础控件(按钮、文本框等)xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml":XAML语法命名空间,提供XAML特有功能(如x:Class、x:Key)xmlns:d="http://schemas.microsoft.com/expression/blend/2008":设计时命名空间,在Blend或VS设计界面时用(运行时无效)xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006":兼容性命名空间,用来忽略不兼容的标记
2. 自定义命名空间
引用自己写的类或外部程序集时用,格式:
xml
xmlns:前缀="clr-namespace:命名空间;assembly=程序集名称"
例子:引用当前项目的类
xml
xmlns:local="clr-namespace:MyWpfApp" <!-- 引用当前项目的MyWpfApp命名空间 -->
五、Window(窗口)
Window是WPF程序的主窗口容器,所有界面元素都放在里面。
1. 基本属性
| 属性 | 作用 |
|---|---|
| Title | 窗口标题栏文字 |
| Width/Height | 窗口宽/高 |
| WindowStartupLocation | 窗口首次显示的位置(如屏幕中央) |
| WindowState | 窗口状态(正常、最大化、最小化) |
| Topmost | 是否总在最上层显示 |
2. 生命周期
窗口从创建到关闭有一系列过程,关键事件:
Loaded:窗口加载完成时触发(可以在这里初始化数据)Closing:窗口关闭前触发(可以询问"是否保存")Closed:窗口关闭后触发
3. 打开和关闭窗口
- 非模式窗口(可以同时操作其他窗口):
window.Show() - 模式窗口(必须关闭才能操作其他窗口,如弹窗):
window.ShowDialog() - 关闭窗口:
window.Close()
六、布局面板
布局面板用来排列界面元素(按钮、文本框等),就像"架子",决定元素放哪里、怎么排。
1. Grid(网格面板)
最常用的布局,按行列划分区域,类似Excel表格。
例子:2行2列的网格
xml
<Grid>
<!-- 定义2行 -->
<Grid.RowDefinitions>
<RowDefinition Height="50"/> <!-- 第一行高50 -->
<RowDefinition Height="*"/> <!-- 第二行占剩余空间 -->
</Grid.RowDefinitions>
<!-- 定义2列 -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/> <!-- 第一列宽100 -->
<ColumnDefinition Width="*"/> <!-- 第二列占剩余空间 -->
</Grid.ColumnDefinitions>
<!-- 放元素,指定位置 -->
<Button Grid.Row="0" Grid.Column="0" Content="第一行第一列"/>
<Button Grid.Row="1" Grid.Column="1" Content="第二行第二列"/>
</Grid>
2. StackPanel(堆叠面板)
元素按水平或垂直方向依次排列,像排队一样。
例子:垂直排列的3个按钮
xml
<StackPanel Orientation="Vertical" Margin="10"> <!-- Orientation:排列方向(Vertical垂直,Horizontal水平) -->
<Button Content="按钮1" Margin="5"/>
<Button Content="按钮2" Margin="5"/>
<Button Content="按钮3" Margin="5"/>
</StackPanel>
3. WrapPanel(自动换行面板)
元素排满一行/列后自动换行,适合显示多个小元素(如标签、小按钮)。
例子:水平排列,满了自动换行
xml
<WrapPanel Orientation="Horizontal" Margin="10">
<Button Content="按钮1" Width="80" Margin="5"/>
<Button Content="按钮2" Width="80" Margin="5"/>
<Button Content="按钮3" Width="80" Margin="5"/>
<!-- 更多按钮...满一行后自动换行 -->
</WrapPanel>
4. Canvas(画布面板)
直接指定元素的坐标(x,y),适合自由定位(如绘图、游戏元素)。
例子:在(50,30)位置放一个按钮
xml
<Canvas>
<Button Content="自由定位" Canvas.Left="50" Canvas.Top="30"/> <!-- 距离左边50,上边30 -->
</Canvas>
七、常用控件
控件是界面上能看到、能操作的元素(按钮、文本框等)。
1. 基础控件
| 控件 | 作用 | 关键属性 |
|---|---|---|
| Button | 点击触发操作 | Content(按钮文字)、Click(点击事件) |
| TextBox | 输入文本 | Text(输入的内容) |
| PasswordBox | 输入密码(显示*) | Password(密码内容) |
| Label | 显示文本(不能编辑) | Content(显示的文字) |
| CheckBox | 复选框(可多选) | IsChecked(是否选中) |
| RadioButton | 单选按钮(同组内只能选一个) | GroupName(分组)、IsChecked |
| ComboBox | 下拉框(从列表选一个) | ItemsSource(选项集合)、SelectedItem(选中项) |
| ListBox | 列表框(可单选或多选) | ItemsSource、SelectionMode(选择模式) |
2. 案例:登录界面
xml
<Grid Margin="20">
<!-- 用户名行 -->
<Label Grid.Row="0" Grid.Column="0" Content="用户名:"/>
<TextBox Grid.Row="0" Grid.Column="1" Width="200" Name="txtUser"/>
<!-- 密码行 -->
<Label Grid.Row="1" Grid.Column="0" Content="密码:"/>
<PasswordBox Grid.Row="1" Grid.Column="1" Width="200" Name="txtPwd"/>
<!-- 登录按钮 -->
<Button Grid.Row="2" Grid.ColumnSpan="2" Content="登录"
Click="Login_Click" Width="100" Margin="0,10"/>
</Grid>
八、资源(Resources)
资源是可以重复使用的对象(如颜色、样式、模板),定义一次,多处使用,方便修改。
1. 定义资源
可以在窗口、页面或应用程序级别定义,例子:
xml
<Window.Resources>
<!-- 定义一个红色画刷 -->
<SolidColorBrush x:Key="RedBrush" Color="Red"/>
<!-- 定义一个按钮样式 -->
<Style x:Key="BtnStyle" TargetType="Button">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="30"/>
</Style>
</Window.Resources>
x:Key:资源的唯一标识,用的时候通过这个找
2. 使用资源
xml
<!-- 使用红色画刷 -->
<Button Background="{StaticResource RedBrush}" Content="红色按钮"/>
<!-- 使用按钮样式 -->
<Button Style="{StaticResource BtnStyle}" Content="按我"/>
3. 静态资源 vs 动态资源
- 静态资源:程序启动时加载,之后不变(性能好,适合不修改的资源)
- 动态资源:程序运行中可以动态更新(适合需要动态变化的资源,如主题切换)
九、样式(Style)
样式用来统一设置控件的外观(颜色、大小等),避免重复写代码。
1. 基本用法
xml
<Window.Resources>
<!-- 定义按钮样式 -->
<Style x:Key="MyBtnStyle" TargetType="Button">
<Setter Property="Background" Value="Blue"/> <!-- 背景蓝色 -->
<Setter Property="Foreground" Value="White"/> <!-- 文字白色 -->
<Setter Property="Width" Value="120"/> <!-- 宽120 -->
</Style>
</Window.Resources>
<!-- 使用样式 -->
<Button Style="{StaticResource MyBtnStyle}" Content="样式按钮"/>
2. 样式继承
在已有样式基础上修改,避免重复定义:
xml
<Style x:Key="BigBtnStyle" BasedOn="{StaticResource MyBtnStyle}">
<Setter Property="Height" Value="50"/> <!-- 在原有样式上,增加高度50 -->
</Style>
十、模板(Template)
模板用来修改控件的"外观结构",比如把按钮改成圆形,把列表项改成图文组合。
1. 控件模板(ControlTemplate)
修改控件本身的样子,比如把按钮做成圆形:
xml
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<!-- 圆形按钮 -->
<Ellipse Fill="{TemplateBinding Background}" Width="60" Height="60">
<!-- 显示按钮文字 -->
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2. 数据模板(DataTemplate)
修改数据的显示方式,比如列表中的每个项显示图片+文字:
xml
<ListBox ItemsSource="{Binding Users}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- 每个用户项显示头像和名字 -->
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Avatar}" Width="50" Height="50"/>
<TextBlock Text="{Binding Name}" Margin="10,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
十一、路由事件
路由事件是WPF的特殊事件,事件触发后会沿着界面元素树"传播",父元素或子元素都能响应。
1. 传播方式
- 冒泡:从触发事件的元素向上传播到父元素(最常用)
- 隧道 :从根元素向下传播到触发事件的元素(通常以Preview开头,如
PreviewMouseDown) - 直接:只在触发元素上响应
2. 例子:按钮点击事件冒泡
xml
<Grid MouseDown="Grid_MouseDown"> <!-- 网格的点击事件 -->
<Button MouseDown="Button_MouseDown" Content="点击我"/> <!-- 按钮的点击事件 -->
</Grid>
点击按钮时,会先触发Button_MouseDown,再触发Grid_MouseDown(事件冒泡到父元素)。
十二、数据绑定
数据绑定让界面元素和数据自动关联,数据变了界面自动更新,不用手动改。
例子:文本框内容同步到标签
xml
<TextBox Name="txtInput"/>
<Label Content="{Binding ElementName=txtInput, Path=Text}"/> <!-- 绑定到文本框的Text属性 -->
当在文本框输入时,标签会实时显示相同内容。
十三、总结
WPF是一个强大的UI框架,核心是"界面用XAML,逻辑用C#,数据驱动UI"。掌握布局面板、控件、资源、样式这些基础,就能做出各种界面。实际开发中,多练案例(如登录页、列表页)会更容易理解。