c#软件开发学习笔记--WPF(控件、样式)

Z5998178412026-08-26 10:35

WPF 学习总结

一、WPF 基础概念

1.1 什么是 WPF

  • WPF (Windows Presentation Foundation)：微软推出的基于 .NET Framework 的桌面客户端 UI 框架。
  • 使用 XAML 标记语言来定义界面，实现 UI 与逻辑分离。
  • 应用程序结构：Application → Window / NavigationWindow → Page / 控件。

1.2 WPF 编译原理

  • .xaml 文件编译为 .baml（二进制资源文件），再嵌入到程序集生成的二进制文件中。
  • .xaml.cs（Code-Behind 代码隐藏文件）编译为普通的 .cs 二进制代码。

二、XAML 语法

2.1 XAML 概述

  • XAML（Extensible Application Markup Language）是一种声明性标记语言，类似 HTML/XML。
  • .xaml 文件本质上是 XML 文件，区分大小写。

2.2 常用命名空间

命名空间 前缀 用途
http://schemas.microsoft.com/winfx/2006/xaml/presentation 默认 WPF 核心控件/元素
http://schemas.microsoft.com/winfx/2006/xaml x: XAML 基础关键字（x:Class, x:Name, x:Key, x:Array, x:Static 等）
http://schemas.microsoft.com/expression/blend/2008 d: 设计时预览属性（仅在 VS/Blend 中生效，运行时忽略）
http://schemas.openxmlformats.org/markup-compatibility/2006 mc: 标记兼容性，配合 mc:Ignorable="d" 告知编译器忽略 d: 前缀
clr-namespace:项目名 local: 引用当前项目的 CLR 命名空间

2.3 XAML 语法要点

  • 标签本质 ：是一个类（对象），WPF 中称为元素 或控件。
  • 标签类型：双标签（非空标签，闭合标签）、单标签（空标签）。
  • 属性 ：只出现在开始标签中，以键值对形式存在，官方称为特性语法。
  • 内容区：开始标签和结束标签之间的信息，可以包含文本或子标签。
  • 附加属性 ：标签本身没有的属性，由其他标签附加而来，如 Grid.Row、Grid.Column、DockPanel.Dock。
  • 标记扩展 ：使用 {} 语法，如 {StaticResource key}、{Binding Path}。

2.4 实体字符

实体字符 含义
&lt; 小于号 <
&gt; 大于号 >
&#160; 空格
&#165; 人民币符号 ￥
&#169; 版权符号 ©
&#174; 注册商标符号 ®

三、App.xaml 与窗体启动方式

3.1 三种启动方式

方式一：StartupUri 属性（推荐）

xml 复制代码 
<Application StartupUri="MainWindow.xaml">
  • 最简单、最常用的方式，不能传递参数。

方式二：Startup 事件（推荐）

xml 复制代码 
<Application Startup="Application_Startup">
csharp 复制代码 
private void Application_Startup(object sender, StartupEventArgs e)
{
    this.ShutdownMode = ShutdownMode.OnExplicitShutdown;
    Window1 w1 = new Window1(100);
    w1.ShowDialog();
    this.ShutdownMode = ShutdownMode.OnMainWindowClose;
}
  • 可以传递参数，灵活性更高。

方式三：自定义 Main 方法（不推荐）

csharp 复制代码 
[STAThread]
public static void Main(string[] args)
{
    Application app = new Application();
    app.StartupUri = new Uri("Window1.xaml", UriKind.Relative);
    app.Run();
}
  • 需要在 App.xaml 中设置生成操作为无，避免多个入口函数。
  • 必须加 [STAThread] 线程安全特性。

3.2 窗体显示方式

  • ShowDialog()：模态窗口（阻塞式）
  • Show()：非模态窗口
  • app.Run(win)：指定主窗口运行
  • app.MainWindow = win; win.Show(); app.Run()：先设置主窗口再运行

四、布局控件

4.1 Grid（网格布局）

  • 最常用的布局容器，支持行列定义。
  • 定义列 ：Grid.ColumnDefinitions + ColumnDefinition
  • 定义行 ：Grid.RowDefinitions + RowDefinition
  • 单元格合并 ：Grid.RowSpan、Grid.ColumnSpan
  • 列宽可以使用 *（比例关系），如 2*、3*。
xml 复制代码 
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <!-- 控件放置 -->
    <Button Grid.Row="0" Grid.Column="0" Content="按钮"/>
</Grid>

4.2 StackPanel（堆叠面板）

  • 子元素按水平或垂直方向依次排列（默认垂直）。
  • 适用于简单的线性布局。

4.3 WrapPanel（自动换行面板）

  • 子元素水平排列，超出宽度自动换行。

4.4 DockPanel（停靠面板）

  • 子元素可以停靠在上、下、左、右四个方向。
  • 最后一个子元素默认填充剩余空间。
xml 复制代码 
<DockPanel>
    <Button DockPanel.Dock="Top" Content="上"/>
    <Button DockPanel.Dock="Bottom" Content="下"/>
    <Button DockPanel.Dock="Left" Content="左"/>
    <Button DockPanel.Dock="Right" Content="右"/>
    <StackPanel Background="Orange"/>  <!-- 填充剩余空间 -->
</DockPanel>

4.5 Border（边框）

  • 用于为子元素添加边框和背景。
  • 常用属性：BorderBrush、BorderThickness、CornerRadius（圆角）、Background。

五、样式（Style）

5.1 三种样式级别（优先级从高到低）

  1. 行内样式：直接在控件标签上设置属性
  2. 局部样式 ：定义在 Window.Resources 中，仅当前窗体有效
  3. 全局样式 ：定义在 Application.Resources 中，整个应用程序有效

5.2 样式语法

xml 复制代码 
<Style x:Key="buttonStyle1" TargetType="Button">
    <Setter Property="Background" Value="Red"/>
    <Setter Property="Foreground" Value="Green"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="100"/>
</Style>

5.3 样式继承（BasedOn）

  • 通过 BasedOn="{StaticResource BaseStyle}" 继承基础样式。
xml 复制代码 
<Style x:Key="BaseStyle" TargetType="Control">
    <Setter Property="Width" Value="120"/>
    <Setter Property="Height" Value="30"/>
</Style>

<Style x:Key="TextBoxStyle1" BasedOn="{StaticResource BaseStyle}" TargetType="TextBox">
    <Setter Property="Grid.Row" Value="0"/>
    <Setter Property="Grid.Column" Value="1"/>
</Style>

5.4 使用样式

xml 复制代码 
<Button Style="{StaticResource buttonStyle1}" Content="按钮"/>

六、资源（Resources）

6.1 资源字典（ResourceDictionary）

  • 用于存储可重用的样式、模板、数据等。
  • 定义在 Application.Resources 或 Window.Resources 中。

6.2 合并资源字典

xml 复制代码 
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Resources/Dictionary1.xaml"/>
            <ResourceDictionary Source="/Resources/Dictionary2.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

6.3 资源字典文件示例

xml 复制代码 
<!-- Dictionary1.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="LabelStyle" TargetType="Label">
        <Setter Property="Content" Value="_Account"/>
        <Setter Property="Target" Value="{Binding ElementName= txtAccount}"/>
    </Style>
</ResourceDictionary>

6.4 快捷键设置（Label 的 Target 属性）

  • _Account 中的下划线表示快捷键为 Alt + A。
  • Target="{Binding ElementName= txtAccount}" 将焦点定位到对应的输入控件。

七、常用控件

7.1 内容控件

控件 说明 示例
Button 按钮 <Button Content="点击" Click="Button_Click"/>
Label 标签（支持快捷键） <Label Content="_Account"/>
TextBlock 文本块（轻量级） <TextBlock>文本内容</TextBlock>

7.2 输入控件

控件 说明
TextBox 文本框
PasswordBox 密码框
ListBox 列表选择框

7.3 列表控件

控件 说明
ListBox 列表控件，支持 ItemsSource 绑定数据源
ComboBox 下拉选择框

7.4 选项卡控件

xml 复制代码 
<TabControl>
    <TabItem Header="军事">
        <StackPanel>
            <TextBlock>军事界面</TextBlock>
        </StackPanel>
    </TabItem>
    <TabItem Header="娱乐">
        <TextBlock>娱乐界面</TextBlock>
    </TabItem>
</TabControl>

7.5 控件对齐方式

  • VerticalAlignment：垂直对齐（Top、Bottom、Center、Stretch）
  • HorizontalAlignment：水平对齐（Left、Right、Center、Stretch）
  • VerticalContentAlignment：内容垂直对齐
  • HorizontalContentAlignment：内容水平对齐
  • Margin：外边距（顺序：左、上、右、下）

八、数据绑定

8.1 静态资源绑定

  • 绑定到 Resources 中定义的资源。
xml 复制代码 
<Window.Resources>
    <sys:String x:Key="str1">成龙</sys:String>
    <x:Array x:Key="items" Type="sys:String">
        <sys:String>蔡徐坤</sys:String>
        <sys:String>小刚</sys:String>
    </x:Array>
</Window.Resources>

<TextBlock Text="{StaticResource str1}"/>
<ListBox ItemsSource="{StaticResource items}"/>

8.2 DataContext 绑定（数据上下文）

  • 通过 DataContext 设置数据源，使用 {Binding Property} 绑定属性。
xml 复制代码 
<!-- 引入命名空间 -->
xmlns:vm="clr-namespace:项目名.Model"

<Window.DataContext>
    <vm:DataViewModel/>
</Window.DataContext>

<TextBlock Text="{Binding Id}"/>
<TextBlock Text="{Binding Name}"/>
<ListBox ItemsSource="{Binding lists}"/>
csharp 复制代码 
// DataViewModel.cs
public class DataViewModel
{
    public int Id { get; set; } = 100;
    public string Name { get; set; } = "特朗普";
    public List<string> lists { get; set; } = new List<string>() { "金发", "商人", "川建国" };
}

8.3 代码动态添加数据

csharp 复制代码 
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    listbox.Items.Add("张三");
    listbox.Items.Add("李四");
    listbox.Items.Add("王五");
}

九、导航窗体

9.1 导航窗体结构

  • Window → NavigationWindow（导航窗体）
  • NavigationWindow 中包含多个 Page（页面）

9.2 设置导航窗体

xml 复制代码 
<!-- 将 Window 改为 NavigationWindow -->
<NavigationWindow x:Class="项目名.MainWindow"
                  Source="Pages/MainPage.xaml"
                  ShowsNavigationUI="False">
    <!-- ShowsNavigationUI="False" 隐藏默认导航箭头 -->
</NavigationWindow>
csharp 复制代码 
// Code-Behind 将 Window 改为 NavigationWindow
public partial class MainWindow : NavigationWindow

9.3 页面跳转

csharp 复制代码 
// 方式一：通过对象跳转
this.NavigationService.Navigate(new Page1());

// 方式二：通过 URI 跳转
this.NavigationService.Navigate(new Uri("pack://application:,,,/Pages/Page2.xaml"));

// 返回上一页
if (this.NavigationService.CanGoBack)
{
    this.NavigationService.GoBack();
}

十、渐变（Brush）

10.1 线性渐变（LinearGradientBrush）

xml 复制代码 
<Window.BorderBrush>
    <LinearGradientBrush>
        <GradientStopCollection>
            <GradientStop Offset="0.0" Color="Red"/>
            <GradientStop Offset="1.0" Color="Blue"/>
        </GradientStopCollection>
    </LinearGradientBrush>
</Window.BorderBrush>

10.2 径向渐变（RadialGradientBrush）

xml 复制代码 
<Window.Background>
    <RadialGradientBrush>
        <GradientStopCollection>
            <GradientStop Offset="0.0" Color="Red"/>
            <GradientStop Offset="0.5" Color="Yellow"/>
            <GradientStop Offset="1.0" Color="Pink"/>
        </GradientStopCollection>
    </RadialGradientBrush>
</Window.Background>

十一、用户控件（UserControl）

11.1 创建用户控件

  • 继承自 UserControl 类。
  • 包含独立的 .xaml 和 .xaml.cs 文件。
  • 可以封装可复用的界面组件。

11.2 使用用户控件

xml 复制代码 
<!-- 引入命名空间 -->
xmlns:uc="clr-namespace:项目名.UserControls"

<uc:UserControl1 Width="250" Height="180"/>

11.3 用户控件示例

xml 复制代码 
<UserControl x:Class="项目名.UserControls.UserControl1" ...>
    <Grid>
        <Border BorderBrush="Red" Background="LightGray" 
                BorderThickness="3" CornerRadius="5">
            <TextBlock Text="用户控件" FontWeight="Bold" FontSize="20"/>
        </Border>
    </Grid>
</UserControl>

十二、事件

12.1 路由事件分类

  1. 直接事件 ：事件直接由触发事件的元素处理（如 Click）。
  2. 冒泡事件 ：事件从内层标签向外层标签传播（如 MouseLeftButtonDown）。
  3. 隧道事件 ：事件从外层标签向内层标签传播（如 PreviewMouseDown）。

12.2 常用事件

csharp 复制代码 
// 按钮点击事件
private void Button_Click(object sender, RoutedEventArgs e)
{
    textblock1.Background = new SolidColorBrush(Colors.Green);
}

// 鼠标按下事件
private void Button_MouseDown(object sender, MouseButtonEventArgs e)
{
    Window2 w2 = new Window2();
    w2.ShowDialog();
}

// 选择改变事件
private void listbox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    MessageBox.Show(listbox.SelectedItem.ToString());
}

// 窗体加载事件
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // 初始化逻辑
}

十三、颜色与十六进制

13.1 颜色表示

  • 格式：#RRGGBB（红、绿、蓝各 2 位，范围 00-FF）
  • 示例：#007aa4、#636366

13.2 颜色资源

xml 复制代码 
<SolidColorBrush x:Key="s1" Color="#007aa4"/>
<x:Array x:Key="colors" Type="Color">
    <Color>Red</Color>
    <Color>Green</Color>
    <Color>Blue</Color>
</x:Array>

十四、文本装饰

xml 复制代码 
<TextBlock TextDecorations="Strikethrough"> 穿过文本 </TextBlock>
<TextBlock TextDecorations="Underline"> 下划线文本 </TextBlock>
  • TextDecorations 常用值：Strikethrough（删除线）、Underline（下划线）、OverLine（上划线）、Baseline（基线）。

十五、总结对比

知识点 关键点
XAML 标签即对象，属性即特性，内容区可嵌套
启动方式 StartupUri（简单）、Startup事件（灵活）、自定义Main（不推荐）
布局 Grid（行列）、StackPanel（堆叠）、DockPanel（停靠）、WrapPanel（自动换行）
样式 全局 > 局部 > 行内，支持 BasedOn 继承
资源 ResourceDictionary 可合并，支持多种数据类型
绑定 {StaticResource} 静态绑定，{Binding} DataContext 绑定
导航 NavigationWindow + Page，NavigationService 管理跳转
渐变 LinearGradientBrush（线性）、RadialGradientBrush（径向）
用户控件 封装可复用的 UI 组件，通过 xmlns 引入
路由事件 直接、冒泡、隧道三种事件传播方式
相关推荐
蒲锘42 分钟前
Devops项目笔记阶段 7：Jenkins CI/CD 自动化部署
笔记·jenkins·devops
KhalilRuan43 分钟前
秋招笔记——汇总
笔记
格林威1 小时前
C#高位深相机图像保存：12位16位图像保存方案，OpenCvSharp和Halcon实现
开发语言·人工智能·数码相机·计算机视觉·c#·视觉检测·工业相机
Zguigo1 小时前
【DL】神经网络学习目标|prediction|Loss|Gradient
人工智能·神经网络·学习
paopaokaka_luck1 小时前
基于springboot3+vue3+uniapp的剧本杀预约小程序（AI角色对话、协同过滤算法、地图Api、Echarts图形化分析）
java·前端·spring boot·学习·echarts
雪隐1 小时前
WPF + MVVM 实战系列03-MVVM 的边界之争，终于有人画了条“差不多”的线
c#
影寂ldy1 小时前
C# WinForm TCP聊天室（服务端+客户端）
windows·tcp/ip·c#
Logintern091 小时前
sklearn中pipeline学习
人工智能·学习·sklearn
math_hongfan1 小时前
鸿蒙ArkTS手势交互：拖拽、缩放、旋转与组合手势
学习·华为·交互·harmonyos·鸿蒙
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点032026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？04微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新05Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费06历年考研数学一、数学二、数学三真题试卷及答案PDF07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08如何新建文件夹？ 电脑新建文件夹的4种方法092026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片10VSCode+CodeX扩展，无法启动