.NET 免费、美观的 Avalonia UI 原生控件-Semi Avalonia

小码编匠
2,011 阅读6分钟

前言

Avalonia UI作为一个开源、跨平台的UI框架，已经成为了许多.NET 开发的选择。然而，为了进一步提升用户体验和界面美观度，一个高质量的控件库是不可或缺的。

本文将介绍Semi Avalonia——一款专为Avalonia UI设计的免费且美观的原生控件库。

Semi Avalonia介绍

Semi Avalonia 是一款灵感源自 Semi Design 的开源、免费Avalonia UI控件主题库。

它致力于帮助大家快速为Avalonia UI应用打造简洁、灵活且现代的视觉风格。通过一系列精心设计的控件，Semi Avalonia不仅简化了界面开发过程，还确保了应用程序拥有专业而优雅的外观。

设计理念

Semi 代表"一半"，这一名称体现了 Semi Design 所遵循的核心设计原则：在保持优质稳定的基础之上（不变），同时提供高度的自定义灵活性（多变）。Semi Avalonia 同样秉承了这一设计理念。

Avalonia UI 的内置控件采用了无样式（lookless）的设计理念，这意味着开发者可以在理解控件基本功能的基础上，自由地定制控件的外观。

基于这一理念，Semi Avalonia 对 Avalonia UI 的所有内置组件进行了全面的重新设计。

在设计和开发 Semi Avalonia 时，我们注重以下几点：

1、深入探索：充分利用 Avalonia UI 的模板与样式系统，明确哪些设计元素是必需的，哪些是可以简化或舍弃的。

2、深刻理解：深入研究 Semi Design 的设计令牌（Design Token）和设计系统管理（DSM）体系，确保 Semi Avalonia 能够准确体现 Semi Design 的精髓。

3、灵活支持：最大化地为开发者提供自由度，使他们能够轻松掌握并定制应用的视觉风格。

一个优秀的设计系统应当是动态发展的，能够随着业务需求的变化而不断进化。

因此，Semi Avalonia 不仅提供了强大的默认配置，还通过模块化解耦和开放的自定义选项，允许用户根据自己的需要进行裁剪和定制，从而构建出适合不同产品形态的前端资源。

Semi.Avalonia 使用

安装

dotnet add package Semi.Avalonia

在样式中引用 Semi 主题：

<Application
    ...
    xmlns:semi="https://irihi.tech/semi">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
    </Application.Styles>
</Application>

Semi Avalonia 是完全独立的样式库，引用后程序不再需要使用FluentTheme或SimpleTheme。可以放心地将它们移除。

其他控件兼容方案

ColorPicker、DataGrid 和 TreeDataGrid 的样式单独分发，如果需要请安装并引用。

dotnet add package Semi.Avalonia.ColorPicker
dotnet add package Semi.Avalonia.DataGrid
dotnet add package Semi.Avalonia.TreeDataGrid

<Application.Styles>
    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
    <StyleInclude Source="avares://Semi.Avalonia.TreeDataGrid/Index.axaml" />
</Application.Styles>

基本用法

Semi Avalonia 的使用非常直观简单。只需按照安装指南操作，并引用 Semi Avalonia 的样式文件，即可实现 Avalonia 应用程序全局样式的升级。

主题配置

Semi Avalonia 提供了亮色（Light）和暗色（Dark）两种内置主题。您可以通过设置 Application 的 RequestedThemeVariant 属性来选择应用的默认主题。支持的选项包括 Light（亮色）、Dark（暗色）以及 Default（跟随系统颜色）。

<Application
    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:semi="https://irihi.tech/semi"
    RequestedThemeVariant="Light">
    <Application.Styles>
        <semi:SemiTheme />
    </Application.Styles>
</Application>

本地化设置

Avalonia 的部分内置控件包含文本信息（例如 TextBox 默认右键菜单）。

可以设置 SemiTheme 的 Locale 属性来指定这些文本的语言。

Semi Avalonia 默认使用中文，若需切换至英文，可按如下方式配置：

<Application
    x:Class="Semi.Avalonia.Demo.App"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:semi="https://irihi.tech/semi">
    <Application.Styles>
        <semi:SemiTheme Locale="en-US" />
    </Application.Styles>
</Application>

不支持本地化的平台

对于不支持全球化功能的特定环境（如项目中定义了 <InvariantGlobalization>true</InvariantGlobalization> 或者操作系统本身不支持该特性），您可以分别引入 Semi Avalonia 的样式资源与本地化资源以确保兼容性。

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <locale:en_us /> <!-- 导入本地化相关资源 -->
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
<Application.Styles>
    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
</Application.Styles>

进度环

Avalonia 中默认提供了进度条，但没有提供进度环。

使用 Semi Avalonia 后可以使用如下方式将进度条的样式改为进度环。

<ProgressBar
  Width="100"
  Height="100"
  Value="30"
  Theme="{DynamicResource ProgressRing}"/>

警告色按钮

通过设置 Button 的样式类，可以将默认按钮的前景色改为表示警告的橙色

<Button Classes="Warning">Warning</Button>

控件效果

控件效果

RepeatButton

DropDownButton

ToggleSplitButton

ListBox

ColorPicker

Label

项目地址

GitHub：github.com/irihitech/S…

在线文档：irihitech.github.io/Semi.Avalon…

总结

希望这跨平台UI框架，能够帮助大家提高开发效率，简化开发流程。更多实用功能，请查看项目地址。

通过本文希望能为大家在Avalonia UI开发方面提供有价值的参考。欢迎在评论区留言交流，分享您的宝贵经验和建议。

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

avatar
文章
阅读
粉丝