Skip to main content

动态切换主题

应用启动过程​

展开 Bee 项目文件夹，我们的应用首先从 Program.cs 文件中的 Main() 方法开始执行。

在应用程序启动过程中，会依次调用以下关键方法：

方法说明
AppBuilder.Configure<App>此方法用于配置 Avalonia 应用程序。
UsePlatformDetect方法根据运行的平台来加载相应的配置
WithInterFont此方法用于注册 Inter 字体资源
LogToTrace这个方法负责配置应用程序的日志记录级别

右键在 App 类上点击转到定义，可以看到 OnFrameworkInitializationCompleted 方法，应用执行到该方法时，意味着 Avalonia 框架已完成初始化。在此方法中，主窗口 MainWindow 被创建，同时将视图模型 MainWindowViewModel 作为数据上下文传递给视图。也就是将 MainWindowViewModel 与 MainWindow.axaml 视图文件建立了绑定关系。因此，可以在 MainWindow.axaml 视图文件中，直接绑定 MainWindowViewModel 中的公开属性。

动态主题切换​

1. 设置 TextBlock 属性​

  • 属性: Background 和 Foreground
    • 用途: 分别表示背景色与文本颜色
    • 绑定: 使用 DynamicResource 标记来绑定
    • 特点: 当绑定值发生变化时，背景色与文本颜色会相应更新

2. 创建主题资源文件​

  • 命令: 使用 cd 命令进入 Assets 目录
  • 创建: 输入 dotnet new avalonia.resource -n Themes
    • 结果: 生成 Themes.axaml 主题资源文件

3. 编辑主题资源文件​

  • 文件: Themes.axaml
  • 内容:
    • ResourceDictionary.ThemeDictionaries 表示主题变体资源
    • 定义了 Default 和 Dark 两种主题变体
    • 每个变体下定义了 BgBody 和 TextPrimary 的资源

4. 引入主题资源​

  • 文件: App.axaml
  • 步骤:
    • 添加 Application.Resources 配置节
    • 在配置节下引入 Themes.axaml 文件
    • 通过修改 Application.RequestedThemeVariant 属性值来切换主题
      • 默认值: Default
      • 切换: 可改为 Dark

5. 测试主题变化​

  • 初始状态: 运行项目查看 default 主题下的效果
  • 修改:
    • 打开 Themes.axaml 文件
    • 修改 Default 变体中的 BgBody 资源的 Color 值为 Blue
    • 修改 TextPrimary 资源的 Color 值为 White
    • 修改 Dark 变体中的 BgBody 资源的 Color 值为 Red
  • 重新运行: 使用 dotnet run 查看效果

6. 添加动态切换按钮​

  • 文件: MainWindow.axaml
  • 步骤:
    • 在 TextBlock 外层添加 StackPanel 布局控件
    • 在 StackPanel 下方添加 Button 控件
    • 移动 HorizontalAlignment 和 VerticalAlignment 属性到 StackPanel 控件上

7. 实现切换方法​

  • 文件: MainWindowViewModel.cs
  • 内容:
    • ChangeTheme 方法: 在应用运行时动态修改 RequestedThemeVariant 的值
    • 使用 RelayCommand 特性自动生成中继命令 ChangeThemeCommand
    • 将 ChangeThemeCommand 绑定到 Button 控件的 Command 属性上
    • 设置 Button 的 Content 属性为 “切换主题”

8. 运行测试​

  • 结果: 点击 “切换主题” 按钮时，界面主题会发生变化

总结​

通过上述步骤，我们成功实现了 Avalonia 应用程序中的动态主题切换功能。