C# WPF开发教程

WPF学习曲线

• C#基础

- 语法基础：变量、数据类型、流程控制（if/for/while）、操作符等基础内容

- 面向对象编程（OOP）：类、对象、封装、继承、多态、接口、抽象类

- 高级特性:
	- 委托与事件（处理异步操作和回调）
	- LINQ（数据查询集成）
	- 异步编程（async/await）
	

• WPF核心概念与框架

- XAML 基础：掌握布局控件（Grid、StackPanel）、基础控件（Button、TextBox）及事件绑定

- WPF核心机制
	- 依赖属性：支持绑定、动画的动态属性系统
	- 路由事件：冒泡/隧道事件传递机制
	- 数据绑定：单向/双向绑定、转换器（Converter）、集合绑定（如 ObservableCollection）

- 样式与模板
	- ControlTemplate（自定义控件外观）
	- DataTemplate（数据展示模板）
	
- 命令系统
	- ICommand 接口实现业务逻辑与 UI 解耦

• MVVM 架构模式

- 核心思想
	- 分离 View（界面）、ViewModel（逻辑）、Model（数据）

- 实现要点
	- ViewModel 通知属性变更（INotifyPropertyChanged）
	- 命令绑定（如 DelegateCommand）
	- 使用框架（如 Prism、MVVM Light）简化开发27

• 跨平台扩展技术

- .NET Core/.NET 5+
	- 支持跨平台部署（Windows/Linux/macOS）

- 移动端开发
	- Xamarin：使用 C# 开发 Android/iOS 应用，共享业务逻辑层代码
	- MAUI（.NET 6+）：Xamarin 的进化版，统一移动/桌面开发体验
	
- web端开发
	- Blazor：基于 C# 的前端框架，可复用 WPF 的 ViewModel 逻辑

• 进阶与优化

- 性能优化：布局渲染优化、异步加载、资源回收
- 跨框架代码共享：通过 .NET Standard 封装核心逻辑，供 WPF/Xamarin/Blazor 共用
- 容器化与部署：Docker 打包、云服务（Azure/AWS）部署

小结

- 基础入门:	C# 语法 + WPF/XAML 基础布局与控件使用
- 核心进阶:	数据绑定 + MVVM + 命令系统 + 自定义样式/模板
- 跨平台扩展: .NET Core 迁移 + Xamarin/MAUI 移动开发 + Blazor Web 集成
- 企业级实战: 性能优化 + 跨框架共享 + 容器化部署 + 复杂项目架构（如微服务）

WPF自定义控件模板

• 可以利用自定义控件模板的功能,实现精美的自定义控件外观

<Window x:Class="WpfApp2.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:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">


    <Window.Resources>
        <!-- 自定义按钮控件模板 -->
        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
            <!-- 定义按钮的可视化结构 -->
            <Border x:Name="border" 
                    CornerRadius="15" 
                Background="#4CAF50"
                BorderThickness="1"
                    BorderBrush="#388E3C">
                <!-- 内容展示区域（显示按钮文字） -->
                <ContentPresenter x:Name="contentPresenter"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Margin="10,5"/>
            </Border>

            <!-- 定义不同状态下的视觉效果(触发器实现) -->
            <ControlTemplate.Triggers>
                <!-- 鼠标悬停效果 -->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="#66BB6A"/>
                    <Setter TargetName="border" Property="BorderBrush" Value="#2E7D32"/>
                    <Setter TargetName="contentPresenter" Property="TextBlock.Foreground" Value="White"/>
                </Trigger>

                <!-- 按钮按下效果 -->
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="border" Property="Background" Value="#2E7D32"/>
                    <Setter TargetName="border" Property="BorderBrush" Value="#1B5E20"/>
                    <Setter TargetName="contentPresenter" Property="RenderTransform">
                        <Setter.Value>
                            <!-- 按下时文字轻微下移 -->
                            <TranslateTransform Y="1"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>

                <!-- 禁用状态效果 -->
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="border" Property="Opacity" Value="0.6"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>




    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button Template="{StaticResource RoundButtonTemplate}" Content="点击我" Padding="20,10" Foreground="White" FontWeight="Bold" />
        <Button Template="{StaticResource RoundButtonTemplate}" Content="禁用按钮" Padding="20,10" Foreground="White" FontWeight="Bold" 
                Margin="0,15,0,0"
                IsEnabled="False" />
    </StackPanel>
    
    
</Window>

• 进阶实例: 把上面自定义样式的代码,打包成一个资源词典文件,这样可以从外部引入这个文件,实现视觉的简化

// 新建资源词典文件 ButtonTemplates.xaml

<!-- ButtonTemplates.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- 圆角按钮模板 -->
    <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
        <Border x:Name="border" 
                CornerRadius="15"
                Background="{TemplateBinding Background}"
                BorderThickness="1"
                BorderBrush="{TemplateBinding BorderBrush}">
            <Grid>
                <!-- 背景矩形 -->
                <Rectangle x:Name="bgRect" 
                           Fill="{TemplateBinding Background}"
                           RadiusX="15" RadiusY="15"/>

                <!-- 内容展示区域 -->
                <ContentPresenter x:Name="contentPresenter"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Margin="10,5"/>
            </Grid>
        </Border>

        <!-- 状态触发器 -->
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="bgRect" Property="Fill" Value="#66BB6A"/>
                <Setter TargetName="border" Property="BorderBrush" Value="#2E7D32"/>
                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="White"/>
            </Trigger>

            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="bgRect" Property="Fill" Value="#2E7D32"/>
                <Setter TargetName="border" Property="BorderBrush" Value="#1B5E20"/>
                <Setter TargetName="contentPresenter" Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform Y="1"/>
                    </Setter.Value>
                </Setter>
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="bgRect" Property="Opacity" Value="0.6"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- 按钮样式 -->
    <Style x:Key="PrimaryButtonStyle" TargetType="Button">
        <Setter Property="Template" Value="{StaticResource RoundButtonTemplate}"/>
        <Setter Property="Background" Value="#4CAF50"/>
        <Setter Property="BorderBrush" Value="#388E3C"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Padding" Value="20,10"/>
        <Setter Property="Margin" Value="10"/>
    </Style>

    <!-- 另一种风格的按钮 -->
    <Style x:Key="SecondaryButtonStyle" TargetType="Button">
        <Setter Property="Template" Value="{StaticResource RoundButtonTemplate}"/>
        <Setter Property="Background" Value="#2196F3"/>
        <Setter Property="BorderBrush" Value="#0D47A1"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Padding" Value="20,10"/>
        <Setter Property="Margin" Value="10"/>
    </Style>
</ResourceDictionary>


// 窗体引入文件

<Window x:Class="WpfApp2.ImportStyleControlWindow"
      ......
        Title="ImportStyleControlWindow" Height="450" Width="800">


    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
            	<!--引入文件-->
                <ResourceDictionary Source="ButtonTemplates.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid Background="#F5F5F5">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- 标题 -->
        <TextBlock Grid.Row="0" Text="按钮模板模块化示例" 
                   FontSize="20" FontWeight="Bold" Margin="10"
                   HorizontalAlignment="Center" Foreground="#333"/>

        <!-- 按钮展示区 -->
        <StackPanel Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Style="{StaticResource PrimaryButtonStyle}" 
                    Content="主要按钮"/>

            <Button Style="{StaticResource SecondaryButtonStyle}" 
                    Content="次要按钮" Margin="0,20,0,0"/>

            <Button Style="{StaticResource PrimaryButtonStyle}" 
                    Content="禁用按钮" Margin="0,20,0,0"
                    IsEnabled="False"/>
        </StackPanel>

        <!-- 状态信息 -->
        <TextBlock Grid.Row="2" Text="模板定义在ButtonTemplates.xaml文件中" 
                   Margin="10" HorizontalAlignment="Center"
                   Foreground="#666" FontStyle="Italic"/>

    </Grid>
</Window>

• 高级用法: 全局配置,使用通用样式,无需再单独引入

// app.xaml
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ButtonTemplates.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

• 动态加载资源字典: 在代码中动态切换主题(特别适合中大型项目开发)

private void LoadTheme(string themeName)
{
    var dict = new ResourceDictionary();
    dict.Source = new Uri($"Themes/{themeName}.xaml", UriKind.Relative);
    
    // 清除现有资源
    Application.Current.Resources.MergedDictionaries.Clear();
    // 添加新资源
    Application.Current.Resources.MergedDictionaries.Add(dict);
}