# WPF_Learn

**Repository Path**: verifieroiz/wpf_-learn

## Basic Information

- **Project Name**: WPF_Learn
- **Description**: WPF学习
- **Primary Language**: C#
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-02
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WPF 学习项目

这是一个基于 .NET 8 和 WPF 的学习项目集合，展示了现代 WPF 应用开发的最佳实践和常见 UI 模式实现。

## 项目概览

本仓库包含两个独立的 WPF 示例项目：

1. **DrawerMenu** - 抽屉式侧边栏菜单应用
2. **MiniTheme** - 主题切换和多语言支持应用

两个项目都基于相同的现代化技术栈和架构模式，展示了企业级 WPF 应用的开发方法。

## 核心技术栈

### 共同技术栈

- **.NET 8.0** - 最新的 .NET 框架
- **WPF (Windows Presentation Foundation)** - 微软的桌面 UI 框架
- **MVVM 模式** - Model-View-ViewModel 架构
- **Microsoft.Extensions.Hosting** - 通用主机（Generic Host）
- **Microsoft.Extensions.DependencyInjection** - 依赖注入容器
- **CommunityToolkit.Mvvm** - MVVM 工具包（使用 Source Generator）

### 架构设计原则

- **依赖注入（DI）**：所有服务通过构造函数注入
- **关注点分离**：清晰的 View、ViewModel、Service 分层
- **接口抽象**：面向接口编程，便于测试和扩展
- **SOLID 原则**：单一职责、开闭原则、依赖倒置等
- **Source Generator**：利用编译时代码生成减少样板代码

## 项目一：DrawerMenu（抽屉菜单）

### 设计思路

**目标**：实现一个带有平滑动画效果的抽屉式侧边栏菜单，展示现代化的导航模式。

### 核心功能

- 抽屉式侧边栏导航
- 自定义窗口样式（无边框、圆角、阴影）
- 自定义窗口控制按钮
- 多页面导航系统
- 平滑的动画过渡效果

### 实现思路

#### 1. 抽屉菜单实现

```
思路：使用 Canvas.Left 属性 + DispatcherTimer 实现平滑动画
- 抽屉默认位置在屏幕左侧外（-280px）
- 打开时动画到 0px
- 关闭时动画回 -280px
- 使用缓动函数（EaseOut）实现平滑过渡
```

**关键代码逻辑**：

```csharp
// 使用 DispatcherTimer 实现帧动画
private void AnimateDrawer(bool open) {
    var timer = new DispatcherTimer();
    timer.Tick += (s, e) => {
        // 计算当前位置
        double progress = elapsed / duration;
        double easedProgress = 1 - Math.Pow(1 - progress, 3); // EaseOut
        double newLeft = startLeft + (targetLeft - startLeft) * easedProgress;
        Canvas.SetLeft(drawer, newLeft);
    };
}
```

#### 2. 自定义窗口样式

```
思路：使用 WindowStyle="None" + AllowsTransparency + Border 实现
- WindowStyle="None"：移除默认标题栏和边框
- AllowsTransparency="True"：允许透明和圆角
- Border + DropShadowEffect：实现圆角和阴影
- 手动实现窗口控制按钮（最小化、最大化、关闭）
```

**UI 结构**：

```
Window (Transparent Background)
  └─ Border (White, 8px CornerRadius, DropShadow)
      ├─ 自定义标题栏
      │   ├─ 菜单按钮
      │   ├─ 标题文字
      │   └─ 窗口控制按钮（-/□/×）
      └─ 内容区域
```

#### 3. 导航服务实现

```
思路：通过 ContentControl 绑定动态切换页面
- INavigationService 接口定义导航方法
- NavigationService 维护 CurrentView 属性
- 通过 IServiceProvider 解析 View 实例
- ViewModel 类型映射到 View 类型
```

**导航流程**：

```
用户点击菜单项
  → ViewModel 调用 NavigateTo<HomeViewModel>()
  → NavigationService 解析 HomePage 实例
  → 更新 CurrentView 属性
  → UI 自动更新（通过 INotifyPropertyChanged）
```

#### 4. 依赖注入架构

```csharp
// App.xaml.cs 中配置服务
var builder = Host.CreateApplicationBuilder();

// 注册服务（单例）
builder.Services.AddSingleton<INavigationService>(provider => 
    new NavigationService(provider));

// 注册 ViewModels（单例）
builder.Services.AddSingleton<MainViewModel>();
builder.Services.AddTransient<HomeViewModel>();

// 注册 Views（瞬态，每次导航创建新实例）
builder.Services.AddTransient<HomePage>();

// 构建宿主
_host = builder.Build();

// 显示主窗口
var mainWindow = _host.Services.GetRequiredService<MainWindow>();
mainWindow.Show();
```

### 技术亮点

1. **帧动画实现**：使用 DispatcherTimer 而非 Storyboard，更灵活的动画控制
2. **服务定位模式**：NavigationService 通过 IServiceProvider 动态解析视图
3. **通用主机模式**：借鉴 ASP.NET Core 的宿主模式，统一生命周期管理
4. **Source Generator**：CommunityToolkit.Mvvm 自动生成属性和命令代码

---

## 项目二：MiniTheme（主题切换）

### 设计思路

**目标**：实现一个支持动态主题切换、系统主题跟随和多语言切换的应用，展示 WPF 资源字典动态管理。

### 核心功能

- 亮色/暗色主题切换
- 自动跟随系统主题
- 多语言动态切换（中/英/日/韩）
- 自定义标题栏（跟随主题）
- 配置持久化

### 实现思路

#### 1. 主题系统架构

```
思路：使用 ResourceDictionary 动态加载主题资源
- 定义主题资源字典（LightTheme.xaml / DarkTheme.xaml）
- 使用 DynamicResource 绑定主题颜色
- 运行时动态切换 MergedDictionaries
```

**主题资源结构**：

```xml
<!-- LightTheme.xaml -->
<ResourceDictionary>
    <SolidColorBrush x:Key="BackgroundBrush" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="ForegroundBrush" Color="#000000"/>
    <SolidColorBrush x:Key="AccentBrush" Color="#3F51B5"/>
    ...
</ResourceDictionary>
```

**切换逻辑**：

```csharp
// ThemeService.cs
public void ApplyTheme(ThemeMode mode) {
    // 1. 移除旧主题
    var oldTheme = Application.Current.Resources.MergedDictionaries
        .FirstOrDefault(d => d.Source?.OriginalString.Contains("Theme.xaml"));
    if (oldTheme != null) {
        Application.Current.Resources.MergedDictionaries.Remove(oldTheme);
    }
    
    // 2. 加载新主题
    var themePath = mode == ThemeMode.Light 
        ? "Themes/LightTheme.xaml" 
        : "Themes/DarkTheme.xaml";
    var newTheme = new ResourceDictionary { 
        Source = new Uri(themePath, UriKind.Relative) 
    };
    
    // 3. 应用新主题
    Application.Current.Resources.MergedDictionaries.Add(newTheme);
}
```

#### 2. 系统主题监控

```
思路：监听 Windows 注册表变化
- 监控路径：HKEY_CURRENT_USER\Software\Microsoft\Windows\
              CurrentVersion\Themes\Personalize
- 监控键值：AppsUseLightTheme
- 值变化时触发主题切换事件
```

**实现代码**：

```csharp
// SystemThemeMonitor.cs
public class SystemThemeMonitor {
    private RegistryMonitor? _monitor;
    public event EventHandler<ThemeMode>? ThemeChanged;
    
    public void Start() {
        _monitor = new RegistryMonitor(
            RegistryHive.CurrentUser,
            @"Software\Microsoft\Windows\CurrentVersion\Themes\Personalize"
        );
        _monitor.RegChanged += OnRegistryChanged;
        _monitor.Start();
    }
    
    private void OnRegistryChanged(object sender, EventArgs e) {
        var isLight = GetSystemTheme();
        ThemeChanged?.Invoke(this, isLight ? ThemeMode.Light : ThemeMode.Dark);
    }
}
```

#### 3. 多语言支持

```
思路：使用 ResourceDictionary 存储语言资源
- 每种语言一个 XAML 文件（zh-CN.xaml, en-US.xaml...）
- 使用 DynamicResource 绑定文本
- 运行时切换语言资源字典
```

**语言资源示例**：

```xml
<!-- zh-CN.xaml -->
<ResourceDictionary>
    <system:String x:Key="AppTitle">主题切换演示</system:String>
    <system:String x:Key="ThemeSettings">主题设置</system:String>
    ...
</ResourceDictionary>
```

**XAML 使用**：

```xml
<TextBlock Text="{DynamicResource AppTitle}"/>
```

#### 4. 配置持久化

```
思路：使用 Options Pattern + JSON 配置文件
- appsettings.json 存储配置
- IOptionsMonitor<AppSettings> 读取配置
- ConfigService 负责配置的读写
```

**配置流程**：

```
用户切换主题
  → ThemeService.ApplyTheme()
  → ConfigService.SaveThemeMode()
  → 更新 appsettings.json
  → IOptionsMonitor 触发配置变更事件
```

**配置代码**：

```csharp
// ConfigService.cs
public void SaveThemeMode(ThemeMode mode) {
    var settings = _options.CurrentValue;
    settings.ThemeMode = mode;
    
    var json = JsonSerializer.Serialize(new { AppSettings = settings });
    File.WriteAllText("appsettings.json", json);
    
    // Options 系统会自动重新加载配置
}
```

#### 5. ApplicationHostService

```
思路：使用 IHostedService 统一管理启动流程
- 实现 StartAsync：初始化服务、应用配置、显示窗口
- 实现 StopAsync：清理资源、停止监控
```

**启动流程**：

```csharp
public async Task StartAsync(CancellationToken cancellationToken) {
    // 1. 应用保存的语言配置
    _languageService.ApplyLanguage(_settings.Language);
    
    // 2. 应用保存的主题配置
    await ApplyThemeAsync(_settings.ThemeMode);
    
    // 3. 启动系统主题监控（如果是 Auto 模式）
    if (_settings.ThemeMode == ThemeMode.Auto) {
        _systemThemeMonitor.Start();
    }
    
    // 4. 初始化 ViewModel（首次导航）
    _mainViewModel.Initialize();
    
    // 5. 显示主窗口
    _mainWindow.Show();
}
```

#### 6. 自定义标题栏

```
思路：使用 WindowChrome 实现自定义标题栏
- WindowChrome.IsHitTestVisibleInChrome="True"：允许标题栏交互
- 手动实现窗口控制按钮
- 按钮颜色跟随主题变化
```

**XAML 结构**：

```xml
<Window>
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="40"
                      ResizeBorderThickness="5"
                      GlassFrameThickness="0"
                      CornerRadius="0"/>
    </WindowChrome.WindowChrome>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>  <!-- 标题栏 -->
            <RowDefinition Height="*"/>   <!-- 内容 -->
        </Grid.RowDefinitions>
        
        <!-- 标题栏 -->
        <Border Background="{DynamicResource TitleBarBackgroundBrush}">
            <Grid>
                <TextBlock Text="{DynamicResource AppTitle}"
                           Foreground="{DynamicResource TitleBarForegroundBrush}"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
                            WindowChrome.IsHitTestVisibleInChrome="True">
                    <Button Content="─" Click="MinimizeWindow"/>
                    <Button Content="□" Click="MaximizeRestoreWindow"/>
                    <Button Content="×" Click="CloseWindow"/>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</Window>
```

### 技术亮点

1. **ResourceDictionary 动态管理**：实现无需重启的主题和语言切换
2. **注册表监控**：实时跟随系统主题变化
3. **Options Pattern**：强类型配置管理，支持热重载
4. **IHostedService**：统一的生命周期管理
5. **DynamicResource**：运行时资源绑定，实现动态 UI 更新

---

## 共同的架构模式

### 1. Generic Host 模式

两个项目都使用 `Host.CreateApplicationBuilder()` 构建应用宿主：

```csharp
// 统一的宿主构建模式
var builder = Host.CreateApplicationBuilder();

// 注册服务
builder.Services.AddSingleton<IService, ServiceImpl>();

// 注册 ViewModels
builder.Services.AddSingleton<MainViewModel>();

// 注册 Views
builder.Services.AddTransient<View>();

// 构建并运行
var host = builder.Build();
await host.RunAsync();
```

**优势**：

- 统一的依赖注入容器
- 生命周期管理（IHostedService）
- 配置系统集成
- 日志系统集成（可扩展）
- 与 ASP.NET Core 一致的开发体验

### 2. MVVM 模式

使用 CommunityToolkit.Mvvm 实现 MVVM：

```csharp
// 传统写法
public class ViewModel : INotifyPropertyChanged {
    private string _title;
    public string Title {
        get => _title;
        set {
            _title = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Title)));
        }
    }
    public event PropertyChangedEventHandler? PropertyChanged;
}

// 使用 CommunityToolkit.Mvvm（Source Generator）
public partial class ViewModel : ObservableObject {
    [ObservableProperty]  // 自动生成上面的所有代码
    private string _title;
}
```

**优势**：

- 减少 80% 的样板代码
- 编译时生成，零运行时开销
- 类型安全，无字符串魔法值
- 自动生成命令代码（RelayCommand）

### 3. 服务层设计

清晰的服务接口定义：

```
Services/
├── Interfaces/
│   ├── INavigationService.cs
│   ├── IThemeService.cs
│   └── IConfigService.cs
└── Implementations/
    ├── NavigationService.cs
    ├── ThemeService.cs
    └── ConfigService.cs
```

**设计原则**：

- 每个服务单一职责
- 面向接口编程
- 通过构造函数注入依赖
- 便于单元测试和模拟

### 4. 导航服务模式

统一的导航接口：

```csharp
public interface INavigationService {
    object? CurrentView { get; }
    event EventHandler? CurrentViewChanged;
    void NavigateTo<TViewModel>() where TViewModel : class;
}
```

**实现思路**：

1. 维护 ViewModel 到 View 的映射关系
2. 通过 IServiceProvider 解析 View 实例
3. 更新 CurrentView 属性触发 UI 更新
4. 支持泛型调用，类型安全

### 5. 样式和资源组织

统一的资源组织方式：

```
Resources/
├── Styles/
│   ├── WindowStyle.xaml
│   ├── ButtonStyle.xaml
│   └── TextBlockStyle.xaml
├── Themes/
│   ├── LightTheme.xaml
│   └── DarkTheme.xaml
└── Languages/
    ├── zh-CN.xaml
    ├── en-US.xaml
    └── ...
```

在 App.xaml 中统一合并：

```xml
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/WindowStyle.xaml"/>
            <ResourceDictionary Source="Resources/Styles/ButtonStyle.xaml"/>
            <ResourceDictionary Source="Themes/LightTheme.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
```

---

## 学习路径建议

### 第一步：理解基础架构

1. 学习 Generic Host 和依赖注入
2. 理解 MVVM 模式和数据绑定
3. 掌握 INotifyPropertyChanged 机制

### 第二步：从 DrawerMenu 开始

1. 学习自定义窗口样式
2. 实现简单的动画效果
3. 理解导航服务的实现

### 第三步：进阶到 MiniTheme

1. 学习 ResourceDictionary 动态管理
2. 实现主题切换功能
3. 理解系统 API 调用（注册表监控）
4. 掌握配置持久化

### 第四步：扩展和实践

1. 添加自己的页面和功能
2. 尝试实现新的动画效果
3. 集成其他服务（如数据库、API）
4. 实现单元测试

---

## 开发环境要求

- **.NET 8.0 SDK** 或更高版本
- **Windows 10/11** 操作系统
- **Visual Studio 2022** 或 **Rider** 或 **VS Code**（需安装 C# 扩展）

## 运行项目

### DrawerMenu

```bash
cd DrawerMenu/DrawerMenu
dotnet restore
dotnet build
dotnet run
```

### MiniTheme

```bash
cd MiniTheme/MiniTheme
dotnet restore
dotnet build
dotnet run
```

或者在 Visual Studio 中直接打开 `.sln` 文件运行。

---

## 核心概念总结

### 1. 依赖注入（DI）

- **为什么用**：解耦、可测试、可维护
- **怎么用**：通过构造函数注入依赖
- **何时用**：服务之间有依赖关系时

### 2. MVVM 模式

- **Model**：数据模型和业务逻辑
- **View**：XAML UI 定义
- **ViewModel**：UI 状态和交互逻辑
- **绑定**：View 通过 Binding 连接 ViewModel

### 3. ResourceDictionary

- **静态资源（StaticResource）**：编译时绑定，性能好
- **动态资源（DynamicResource）**：运行时绑定，可动态更新
- **合并字典（MergedDictionaries）**：组织和复用资源

### 4. 动画

- **Storyboard**：XAML 声明式动画
- **DispatcherTimer**：代码驱动的帧动画
- **缓动函数**：实现平滑的动画效果

### 5. 自定义窗口

- **WindowStyle="None"**：移除默认样式
- **AllowsTransparency**：允许透明和圆角
- **WindowChrome**：自定义标题栏区域
- **手动实现控制按钮**：完全的样式控制

---

## 扩展方向

### 功能扩展

1. **DrawerMenu**
   - 添加子菜单支持
   - 实现右侧抽屉
   - 添加页面过渡动画
   - 实现面包屑导航

2. **MiniTheme**
   - 支持自定义主题色
   - 添加更多预设主题
   - 实现主题导入/导出
   - 添加字体大小调节

### 技术扩展

1. **数据持久化**
   - 集成 SQLite 或 Entity Framework
   - 实现用户偏好保存
   - 添加数据缓存机制

2. **网络功能**
   - 集成 HttpClient
   - 实现 REST API 调用
   - 添加 WebSocket 支持

3. **测试**
   - 单元测试（xUnit + Moq）
   - UI 测试（Appium 或 WinAppDriver）
   - 集成测试

4. **性能优化**
   - 虚拟化长列表
   - 异步加载和懒加载
   - 内存优化

---

## 参考资源

### 官方文档

- [WPF 文档](https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/)
- [.NET Generic Host](https://learn.microsoft.com/zh-cn/dotnet/core/extensions/generic-host)
- [CommunityToolkit.Mvvm](https://learn.microsoft.com/zh-cn/dotnet/communitytoolkit/mvvm/)

### 推荐学习

- MVVM 模式详解
- WPF 数据绑定机制
- 依赖注入原理
- XAML 样式和模板

---

## 许可证

MIT License

## 作者

WPF 学习项目 - 展示现代 WPF 应用开发最佳实践