Ursa.Avalonia主题包：Themes.Semi的样式系统

2026-02-04 04:02:57作者：曹令琨Iris

概述

Ursa.Avalonia的Themes.Semi主题包是一个基于Avalonia UI框架的现代化样式系统，专为构建企业级桌面应用程序而设计。该系统提供了一套完整的UI组件样式、主题切换机制和多语言支持，帮助开发者快速构建美观、一致的用户界面。

核心架构

1. 分层样式系统

Themes.Semi采用分层架构设计，将样式资源组织为多个层级：

graph TB
    A[SemiTheme 主入口] --> B[主题字典 ThemeDictionaries]
    A --> C[合并字典 MergedDictionaries]
    
    B --> D[Dark 暗色主题]
    B --> E[Light 亮色主题]
    B --> F[Aquatic 高对比度]
    B --> G[Desert 高对比度]
    B --> H[Dusk 高对比度]
    B --> I[NightSky 高对比度]
    
    C --> J[Controls 控件样式]
    C --> K[Shared 共享资源]
    C --> L[Locale 本地化]
    C --> M[Compatibles 兼容性]
    
    J --> N[80+ 控件样式定义]
    K --> O[通用样式资源]
    L --> P[多语言支持]
    M --> Q[兼容性处理]

2. 主题切换机制

Themes.Semi支持动态主题切换，包括标准的Dark/Light主题和4种高对比度主题：

主题类型	主题名称	基础变体	适用场景
标准主题	Dark	Dark	夜间模式、护眼场景
标准主题	Light	Light	日间模式、常规使用
高对比度	Aquatic	Dark	视觉障碍用户、水下主题
高对比度	Desert	Light	视觉障碍用户、沙漠主题
高对比度	Dusk	Dark	视觉障碍用户、黄昏主题
高对比度	NightSky	Dark	视觉障碍用户、夜空主题

3. 多语言本地化支持

系统内置多语言支持，通过CultureInfo动态切换界面语言：

// 设置应用语言
var semiTheme = new SemiTheme();
semiTheme.Locale = new CultureInfo("zh-CN"); // 中文
// 或
semiTheme.Locale = new CultureInfo("en-US"); // 英文
// 或  
semiTheme.Locale = new CultureInfo("fr-FR"); // 法文

样式资源组织

1. 控件样式定义

Themes.Semi为80多个UI控件提供了完整的样式定义：

<!-- 控件样式索引文件结构 -->
<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="Anchor.axaml" />
        <ResourceInclude Source="AutoCompleteBox.axaml" />
        <ResourceInclude Source="Avatar.axaml" />
        <!-- 更多控件样式... -->
        <ResourceInclude Source="UrsaView.axaml" />
        <ResourceInclude Source="UrsaWindow.axaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

2. 主题特定样式

每个主题都有自己的样式覆盖机制：

<!-- Light主题索引示例 -->
<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="Avatar.axaml" />
        <ResourceInclude Source="Anchor.axaml" />
        <ResourceInclude Source="Badge.axaml" />
        <!-- 主题特定的样式覆盖 -->
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

3. 共享资源

跨主题共享的通用样式资源：

<!-- 共享资源定义 -->
<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="Avatar.axaml" />
        <ResourceInclude Source="Anchor.axaml" />
        <ResourceInclude Source="Badge.axaml" />
        <!-- 共享的控件样式 -->
    </ResourceDictionary.MergedDictionaries>
    
    <!-- 全局资源定义 -->
    <Thickness x:Key="ComboBoxPopupBorderMargin">4</Thickness>
</ResourceDictionary>

核心功能特性

1. 尺寸动画系统

Themes.Semi内置了专业的尺寸动画系统：

// 在构造函数中注册尺寸动画
public SemiTheme(IServiceProvider? provider = null)
{
    AvaloniaXamlLoader.Load(provider, this);
    Resources.MergedDictionaries.Add(new SizeAnimations.DefaultSizeAnimations());
    Resources.MergedDictionaries.Add(new SizeAnimations.NavMenuSizeAnimations());
}

2. 响应式设计支持

系统提供了多种响应式布局组件：

组件名称	功能描述	适用场景
ElasticWrapPanel	弹性换行面板	自适应布局
AspectRatioLayout	宽高比布局	媒体内容展示
Resizer	尺寸调节器	可调整大小区域

3. 丰富的转换器(Converters)

内置多种值转换器，简化样式逻辑：

转换器名称	功能描述	使用示例
BooleansToOpacityConverter	布尔值转透明度	禁用状态样式
BrushToColorConverter	画刷转颜色	颜色提取
CornerRadiusTakeConverter	圆角提取	部分圆角设置
FormContentHeightToAlignmentConverter	表单内容高度对齐	表单布局

使用指南

1. 基本配置

在Avalonia应用中启用Themes.Semi：

// Program.cs 或 App.axaml.cs
public override void OnFrameworkInitializationCompleted()
{
    if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
    {
        desktop.MainWindow = new MainWindow
        {
            Styles =
            {
                new SemiTheme() // 添加Semi主题
            }
        };
    }
    
    base.OnFrameworkInitializationCompleted();
}

2. 主题切换示例

// 动态切换主题
private void ToggleTheme()
{
    var currentTheme = Application.Current.ActualThemeVariant;
    var newTheme = currentTheme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
    Application.Current.RequestedThemeVariant = newTheme;
}

// 切换到高对比度主题
private void SetHighContrastTheme()
{
    Application.Current.RequestedThemeVariant = SemiTheme.Aquatic;
}

3. 自定义样式扩展

<!-- 自定义样式覆盖 -->
<Styles xmlns="https://github.com/avaloniaui">
    <Style Selector="Button.Primary">
        <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
    
    <!-- 继承并扩展Semi主题 -->
    <StyleInclude Source="Themes/Semi/Index.axaml"/>
</Styles>