Ursa全局主题控制

1. 删除Avalonia.Themes.Fluent软件包,这是Avalonia 自带的,应用第三方控件和主题需要把官方的删除,否则主题会有冲突

2. 安装Ursa框架,包含三个,Irihi.Ursa,Irihi.Ursa.Themes.Semi(Ursa 控件的适配主题包),semi.avalonia(基础主题包),后两个是主题相关的,第一个是控件相关的。

注意:semi.avalonia.datagrid(数据表格),semi.avalonia.treedatagrid(树形表格),semi.avalonia.avaloniaedit(代码编辑器),semi.avalonia.colorpicker(颜色选择器),semi.avalonia.dock(停靠面板),这些控件需要单独安装,不包含在Irihi.Ursa内。

3. App.axaml文件中Styles部分需要做对应修改

<Application.Styles>
<!-- 删除这行 -->
<!-- <FluentTheme /> -->

<!-- 添加这两行 -->
<semi:SemiTheme Locale="zh-CN" />
<u-semi:SemiTheme Locale="zh-CN" />
</Application.Styles>

4. App.axaml文件中根元素Application部分需要做对应修改,添加 xmlns:semi和 xmlns:u-semi的命名空间声明

<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:semi="https://irihi.tech/semi" <!-- 添加这行 -->
xmlns:u-semi="https://irihi.tech/ursa/themes/semi" <!-- 添加这行 -->

5. 增加切换主题的按钮及代码(项目为MVVM,事件也同样采用MVVM方式)

<!-- Views中的MainWindow.axaml 文件增加下面按钮-->
<Button Content="切换主题" Command="{Binding ToggleThemeCommand}"/>

<!-- ViewModels中的MainWindowViewModel.cs文件增加下面代码-->
// 主题切换命令
[RelayCommand]
private void ToggleTheme()
{
// 获取当前应用实例
var app = Application.Current;

if (app == null) return;

// 切换主题逻辑
app.RequestedThemeVariant =
app.RequestedThemeVariant == ThemeVariant.Dark
? ThemeVariant.Light
: ThemeVariant.Dark;
}

<!-- ViewModels中增加命名空间-->
using Avalonia; // 用于 Application.Current
using Avalonia.Styling; // 用于 ThemeVariant
using CommunityToolkit.Mvvm.Input;

6. 构建并运行

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注