Avalolnia如何创建自定义控件库

B站影视 内地电影 2025-08-27 16:40 2

摘要:自定义控件库是一个独立的项目(通常是类库项目),其核心目的是封装和提供可重用的自定义控件。

什么是自定义控件库

自定义控件库是一个独立的项目(通常是类库项目),其核心目的是封装和提供可重用的自定义控件。

你可以把它理解为:

一个工具箱:里面装着你为自己或团队量身打造的专业工具(控件),这些工具在标准工具箱(Avalonia 自带控件)里找不到,或者标准工具不能满足你的特定需求。

一个 UI 组件包:比如包含一个特殊的图表控件、一个支持复杂动画的按钮、一个公司所有项目统一风格的文本框,或者一个视频播放器控件。

一种架构方式:它将控件的实现细节(代码、样式、资源)与使用它的主应用程序分离开,符合软件工程的高内聚、低耦合原则,极大地提升了代码的可维护性和可复用性。

它的作用是什么

创建自定义控件库的主要目的和作用包括:

代码复用与共享:

避免在不同项目中重复编写相同的控件代码。

可以在多个 Avalonia 项目(甚至解决方案)中通过 NuGet 包引用的方式轻松共享和使用这些控件。

保持 UI 一致性:

将公司或产品的设计规范(如主题、配色、字体、控件行为)封装到控件库中。所有开发人员都使用同一套控件库,能确保所有应用程序具有统一的外观和体验。

封装复杂逻辑与样式:

将复杂的视觉呈现逻辑(如自定义绘制 OnDraw)或交互行为封装起来,对外提供简单的属性接口。使用者无需关心内部实现,只需设置属性即可。

提升可维护性:

当需要修改控件样式或逻辑时,只需在控件库项目中修改一次,所有引用了该库的项目在更新后都会自动获得更改,无需逐个项目修改。

团队协作:

前端/UI 开发人员可以专注于开发和维护控件库,而业务开发人员则可以直接使用这些现成的组件来构建界面,分工明确,提高效率。

如何创建自定义控件库

这里以使用 Visual Studio 和 .NET 8 为例。

第 1 步:创建项目

打开 Visual Studio。

选择“创建新项目”。

在搜索框中输入类库,选择类库(记住我们要选择的是面向.Net或者.Net Standard的类库项目)

为你的控件库起一个合适的名字,例如 MyCompany,然后创建项目

这个时候我们就可以看到一个干净的Avalonia控件库项目

我们删掉Class1.cs,这个时候我们就有一个干净的库,在编写控件库我们需要使用Avalonia的几个包就可以进行样式编写了

Avalonia中 Nuget 包引用

Avalonia

Avalonia.Desktop

Avalonia.Themes.Fluent

Avalonia.Fonts.Inter

Avalonia.Skia

Avalonia.Diagnostics

第 2 步:理解项目结构

├── Assets/ # (可选) 可以存放图片、字体等静态资源├── Styles/ # (可选) 可以存放全局样式、主题文件├── CustomControl1.cs # 一个自定义控件的示例代码└── CustomControl1.aXAML # 对应控件的XAML样式模板(如果它是TemplatedControl)

核心文件是 .cs和 .axaml文件对。它们共同定义了一个控件。

第 3 步:编写自定义控件

这是最常用的一种。它将控件的逻辑与视觉外观分离。逻辑在 .cs文件中定义,外观在 .axaml文件中用 XAML 定义。

在 .cs文件中:定义属性、事件、命令和核心逻辑。

public class Message : TemplatedControl { /// /// Text StyledProperty definition /// public static readonly StyledPropertystring> TextProperty = AvaloniaProperty.Register /// /// Gets or sets the Text property. This StyledProperty /// indicates .... /// public string Text { get => this.GetValue(TextProperty); set => SetValue(TextProperty, value); } }

在 .axaml文件中:定义控件的默认视觉模板(这里创建的类型是 Avalonia Styles)

在Message.axaml的Styles顶级节点引用当前控件的命名空间以及编写对应的样式代码

Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:lay="using:MyCompany"> Design.PreviewWith> Border Padding="20"> Border> Design.PreviewWith> Style Selector="lay|Message"> Setter Property="Template"> ControlTemplate> Border Name="PART_Border" Background="{TemplateBinding Background}" CornerRadius="5"> TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Text}" /> Border> ControlTemplate> Setter> Style>Styles>

第 4 步:编译

在解决方案内部引用:你可以在同一个解决方案中的其他 Avalonia 项目里,直接添加对这个控件库项目的项目引用。

第 5 步:在应用中使用

添加引用:

项目引用:在应用程序项目中添加对控件库项目的引用(这里以我自己创建的Avalonia程序AvaloniaShell为例)。

在 XAML 中引入命名空间:

App.axaml引用样式:

Application.Styles> FluentTheme /> StyleInclude Source="avares://MyCompany/Styles/Message.axaml" /> Application.Styles>

在 XAML页面 中引入控件的命名空间并且直接使用(这里就以MainWindow为例):

Window x:Class="AvaloniaShell.MainWindow" xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:lay="using:MyCompany" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="AvaloniaShell" d:DesignHeight="450" d:DesignWidth="800" mc:Ignorable="d"> lay:Message Margin="20" Background="#ccc" Text="这是自定义控件" />Window>

运行项目即可看到我们的控件效果

来源:opendotnet

相关推荐