Avalonia系列文章之控件简介

news/2025/2/6 14:12:49/文章来源:https://www.cnblogs.com/hsiang/p/18699932

对于GUI(图形用户页面)程序来说，控件是创建用户页面的基本构建块，不同的控件代表不同的功能，如按钮，文本框，滑块等。在Avalonia UI中，了解控件的使用及其特性对于创建应用程序至关重要。

什么是控件？

在图形用户页面出现之前，程序的输入输出都是通过命令行进行，输入输出的数据都是最原始的方式。在图形用户页面出现以后，输入输出变得越来越友好，且丰富多样，不仅可以输出格式化表格，图表，以及图像等形式，还能接受用户的输入指令，而这些输入输出都是通过控件实现的。在GUI程序中，控件是用户页面的基本元素，它提供输入，输出，以及操作数据的功能，所以它允许用户与应用程序进行交互，根据控件的目的和行为，可以分为以下几类：

  • 按钮（Button），按钮常用于在单击或触摸时触发操作。它们可以包含文本、图标或两者，并经常用于提交表单、打开对话框或执行命令等任务。
  • 文本框（TextBox），文本框允许用户输入和编辑文本。它们用于捕获用户输入，例如用户名、密码或任何形式的文本信息。文本框还可以根据特定输入模式和验证进行自定义。
  • 标签（Label），标签用于显示静态文本或其他控件的标题。它们为用户提供额外的信息或上下文，通常是不可交互的。
  • 复选框（CheckBox）和单选按钮（RadioButton），复选框和单选按钮用于选择和多选项。复选框允许用户选择一个或多个选项，而单选按钮允许用户从一组选项中选择一个。
  • 滑动条（Slider），滑动条用于从范围中选择一个值。它们提供了一个可视化表示值的方式，可以通过拖动滑块的手柄来调整值。滑块通常用于设置诸如音量控制或图像调整等设置。
  • 列表框（ListBox）和下来列表框（ComboBox），列表框和下拉列表框允许用户从列表或下拉菜单中选择项目。列表框同时显示多个项目，而下拉列表框在初始状态下显示一个项目，并在点击时展开显示列表。

上述列举的控件，是Avalonia UI中常用的一些控件，每个控件都有自己的一组属性，方法，和事件，允许开发人员根据应用程序的需求进行使用。

内置控件

在Avalonia UI中，提供了很多内置控件，可以直接使用，大体上可以分为以下几种类型：

  • 绘制控件（Drawn Controls），绘制控件负责生成其自己的几何图形或位图进行渲染，这些控件的示例包括Border，TextBlock，Image等。绘制控件是用于构建其他所有内容的基础控件。大多数的绘制控件具有可以调整其外观和大小的标准属性，但它们不允许重新模板化。
  • 布局控件（Layout Controls），布局控件是特殊的，它本身没有外观，但它可以定义子元素的布局，并充当父容器。子控件负责渲染UI，而布局父控件只设置大小和位置。
  • 用户控件（User Controls），Avalonia UI自身不会提供User Control，因为本身就是个性化的体现，并不具备通用性。
  • 模板化控件（Templated Controls ），在Avalonia UI中，大部分的标准控件都是模板化控件，在应用程序开发中，可以更改模板化控件的XAML模板，使其外观发生改变，而这也是基于XAML的UI框架中最强大的功能之一。

布局控件

常用的布局控件如下所示：

  1. Border    用边框和背景装饰单个子元素。
  2. Canvas    在指定位置显示子控件。
  3. Dock Panel    将子控件沿指定边缘（顶部、底部、左侧、右侧）排列，并使其中一个填充剩余空间。
  4. Expander    具有标题区域（始终可见）和可折叠的内容区域（单个子元素）。
  5. Grid    将子控件排列在网格的单元格中，按行和列定位。单元格可以跨行和跨列。
  6. Grid Splitter    可以添加到网格中，允许用户在运行时调整行或列大小。
  7. Panel    将子控件堆叠在一起。
  8. Relative Panel    允许多个子控件。子控件的位置和对齐方式可以相对于面板本身指定，也可以相对于其他子控件指定。可以指定子控件的大小，也可以根据关系和对齐方式计算大小。
  9. Scroll Viewer    如果（单个）子控件大于可用空间，则添加滚动条和滚动行为。
  10. Split View    在其（单个子控件）内容区域的边缘添加可折叠的窗格。
  11. Stack Panel    允许多个子控件，按顺序水平或垂直排列。
  12. Tab Control    标签控件允许将视图细分为标签项。
  13. Uniform Grid    允许多个子控件，以网格形式排列，单元格具有统一的列和行大小。
  14. Wrap Panel    将子控件从左到右按顺序排列，当宽度不足时，换行显示。

按钮

常用的按钮如下所示：

  1. Button    基本按钮控件 - 可以显示文本、图标或两者。具有标准的“点击”行为。
  2. Repeat Button    按钮在按下并保持按住时重复引发其点击事件。
  3. Radio Button    按钮具有选中状态。它可以放置在一组中，以使一个按钮的选择取消所有其他按钮的选择。
  4. Toggle Button    按钮具有选中状态和未选中状态。后续点击“切换”此状态。通过“checked”伪类可以为选中状态和未选中状态分配不同的样式。
  5. Button Spinner    一个带有两个旋转按钮和内容区域的控件。
  6. Split Button    此按钮具有主要和次要部分，可以独立按下。主要部分的行为类似于标准按钮，而次要部分则打开一个带有附加操作的弹出菜单。
  7. Toggle Split Button    此按钮具有主要和次要部分，可以独立按下。主要部分的行为类似于切换按钮，而次要部分打开一个带有附加操作的弹出菜单。

重复数据控件

对于重复的，固定格式的数据显示，常见的控件如下所示：

  1. Data Grid    在可自定义的网格中显示数据。
  2. Items Control    显示来自绑定数据源的项目集合。
  3. Items Repeater    显示来自绑定数据源的重复数据。它具有布局模板和数据模板。
  4. List Box    一个包含可选择项的控件。
  5. Combo Box    一个带有下拉列表的控件，其中的项目可以选择。

文本显示和编辑控件

文本显示和编辑控件是最常用的控件之一，也相对比较简单，主要有以下几个：

  1. Auto Complete Box    一个显示文本框用于用户输入和一个下拉框，其中包含根据已输入内容可能匹配的项的控件。
  2. Text Block    用于显示文本块的控件。只读。
  3. Text Box    用于显示或编辑文本的控件，没有格式限制。
  4. Masked Text Box    用于在掩码中显示文本；或用于使用掩码编辑文本，以防止无效的用户输入。

值选择控件

值选择控件常用于可枚举的类型的值，主要有以下几种：

  1. Check Box  ，  值类型为Boolean    以勾选标记形式表示的 True 值。点击交互切换值。具有显示“未知”值的选项。
  2. Slider ，   值类型为Double    相对于最大值和最小值的相对值，以滑动条按钮在滑动条轨道上的位置表示。拖动滑动条按钮可以在最大值和最小值之间更改值。键盘和点击交互也可以微调值。
  3. Calendar ，   值类型为DateTime    日历是用户选择日期或日期范围的控件。
  4. Calendar Date Picker ，   值类型为DateTime    日期选择器的扩展，包括文本框和按钮。
  5. Color Picker，    值类型为Color / HsvColor    颜色选择器支持用户使用光谱、调色板和组件滑块选择和编辑颜色。它还支持可选的 alpha 分量、RGB 或 HSV 颜色模型和十六进制颜色值。
  6. Date Picker  ，  值类型为DateTime    日期选择器有三个“微调”控件，允许用户选择日期值。
  7. Time Picker ，   值类型为TimeSpan    时间选择器有三个“微调”控件，允许用户选择小时、分钟和秒钟。

图像控件

图像控件通常用于显示位图或矢量图，常用的控件为：

  1. Image    显示位图或矢量图像。
  2. Path Icon    使用当前的Foreground绘制矢量图像。

菜单和弹出框

菜单也是比较常用的控件之一，主要有以下几种：

  1. Menu    显示应用程序菜单。
  2. Flyouts    将弹出菜单或上下文菜单附加到控件。
  3. Tool Tip    当鼠标悬停在控件上时显示工具提示。

创建控件

在实际应用中，如果默认提供的控件不能满足业务需求，则需要创建新的控件，创建控件主要分为四个步骤：

选择自定义控件的类型

Avalonia提供了多种方法来创建自定义控件以满足应用程序的特定需求，常见的自定义控件类型有用户控件（UserControl），模板控件（TemplatedControl）和自绘控件。

用户控件（UserControl），用户控件是在Avalonia中创建自定义控件的一种高级方法。它允许您通过组合现有控件并使用XAML定义布局来构建一个控件。用户控件充当一个容器，封装了多个控件，并提供了一个连贯的用户界面。创建用户控件的步骤如下：

  1. 定义XAML：创建一个新的UserControl XAML文件，通过放置控件、设置属性和应用样式来定义控件的布局和外观。
  2. Code-behind：可选项，您可以定义额外的代码后台逻辑来处理事件、修改行为或为用户控件提供额外的功能。
  3. 重用和定制: 用户控件可以在应用程序中轻松重用和定制。当您希望封装一组特定的控件和行为为可重用的组件或"视图"时，它们特别有用。

模板控件（TemplatedControl），模板控件（也称为“Lookless控件”）为在Avalonia中创建自定义控件提供了更高级和可自定义的方法。模板控件将控件的行为和逻辑与其可视外观分离，允许应用程序开发人员通过控件模板进行样式化和模板化。对于模板控件，您在code-behind类中定义控件的行为和属性，而视觉外观则通过在XAML中定义控件模板来指定。这种分离允许应用程序开发人员自定义控件的外观和给人的感觉，而不会修改其底层行为。创建模板控件需要以下步骤：

  1. 定义控件类：创建一个新的类，该类派生自TemplatedControl。这个类定义了控件的行为、属性和事件。
  2. 控件模板：在XAML中创建一个ControlTheme，指定控件的视觉外观和结构。控件模板定义了控件的部分以及它们应该如何被样式化。
  3. 样式和模板化：应用程序开发人员可以通过修改控件模板或应用样式来自定义控件的外观。这样可以实现应用程序中统一和统一的视觉设计。

模板控件提供了更大的灵活性和可重用性，使它们非常适合您希望提供一个可以根据不同视觉主题进行样式化或适应各种用户偏好的控件的场景。

自绘控件，自绘控件在Avalonia中提供了最高级别的定制。使用自绘控件，您可以完全控制控件的视觉元素的渲染，从而创建独特而复杂的视觉外观。要创建自绘控件，您需要重写控件的Render方法，并使用低级别的绘制API（例如DrawingContext）来定义控件的外观。这种方法可以对控件的每个像素进行精细控制，实现高度个性化的可视化。创建自绘控件的步骤如下：

  1. 定义控件类：创建一个新的类，该类派生自Control。这个类将定义控件的行为和渲染逻辑。
  2. 重写Render方法：在控件类中重写Render方法，并使用DrawingContext来绘制控件的内容。

定义属性

在Avalonia UI中，控件的属性可以设置控件的行为和外观，而样式化属性为控件提供了一种强大而灵活的属性定义方式。这些属性专门设计用于支持Avalonia的样式化系统和数据绑定。样式化属性通过使用AvaloniaProperty类进行注册，它具有如下特点：

  1. 样式支持：可以通过样式和在XAML或编程中定义的setter轻松地进行定位和修改。
  2. 继承：支持继承，这意味着在父控件上定义的属性值可以自动继承到其子控件上，除非明确覆盖。
  3. 默认值：可以在控件级别或控件模板中指定默认值，确保在多个控件实例中保持一致的行为。
  4. 属性值优先级：它们遵循明确定义的优先级顺序，允许根据本地值、样式setter、触发器和默认值等因素解析值。
  5. 验证和强制转换：样式化属性允许控件验证和强制转换传递给它的值，确保控件永远不会处于无效状态。

在Avalonia中，样式化属性通常用于控件的属性，这些属性旨在通过样式轻松定制，从而实现基于各种条件的外观和行为的动态变化。样式化属性定义示例如下所示：

public class MyCustomButton : Button
{public static readonly StyledProperty<int> RepeatCountProperty =AvaloniaProperty.Register<MyCustomButton, int>(nameof(RepeatCount), defaultValue: 1);public int RepeatCount{get => GetValue(RepeatCountProperty);set => SetValue(RepeatCountProperty, value);}
}

在此示例中，为MyCustomButton控件定义了一个名为RepeatCount的自定义整数属性。该属性通过AvaloniaProperty系统进行注册，使得用户可以访问、修改、应用样式和进行数据绑定。还定义了CLR属性，以方便使用该属性，使其在使用上与标准.NET API一致。

定义事件

通过定义事件，可以为控件的使用者提供一种在应用程序中响应和处理这些事件的方法。路由事件提供了一种处理事件的机制，这些事件可以在控件树中传播（或“路由”），允许多个控件对相同的事件做出响应。路由事件提供以下关键特性：

  1. 事件路由：路由事件可以沿着树向上（冒泡）或向下（隧道）传播，使得不同级别的控件可以处理相同的事件。这允许更灵活和集中的事件处理。
  2. 事件处理程序：路由事件使用事件处理程序来响应事件。事件处理程序可以与特定控件关联，也可以附加到视觉树中的更高级别以处理来自多个控件的事件。
  3. 已处理状态：路由事件具有Handled属性，可用于标记事件为已处理，阻止进一步的传播。这允许对事件处理进行精细的控制。
  4. 事件路由策略：Avalonia支持不同的路由策略，如冒泡、隧道和直接路由。这些策略决定了控件接收和处理事件的顺序。 Avalonia的路由事件在需要处理可能发生在嵌套控件内部的事件时特别有用，或者当您希望在视觉树的较高级别集中事件处理逻辑时。

路由事件示例如下所示：

public class MyCustomSlider : Control
{public static readonly RoutedEvent<RoutedEventArgs> ValueChangedEvent =RoutedEvent.Register<MyCustomSlider, RoutedEventArgs>(nameof(ValueChanged), RoutingStrategies.Direct);public event EventHandler<RoutedEventArgs> ValueChanged{add => AddHandler(ValueChangedEvent, value);remove => RemoveHandler(ValueChangedEvent, value);}protected virtual void OnValueChanged(){RoutedEventArgs args = new RoutedEventArgs(ValueChangedEvent);RaiseEvent(args);}
}

在此示例中，为MyCustomSlider控件定义了一个名为ValueChangedEvent的自定义路由事件。该事件通过RoutedEvent系统进行注册，使得用户可以订阅它。还定义了CLR事件，以方便使用该事件，使其在使用上与标准.NET API一致。

定义控件主题

Avalonia允许自定义控件主题，以定制控件的外观和样式。特别地，无外观的控件（lookless control）在没有控件主题的情况下将没有任何视觉外观；但是您可以为所有类型的控件定义控件主题。

以上就是《Avalonia系列文章之控件简介》的全部内容，旨在抛砖引玉，一起学习，共同进步，更多内容，请参考官方文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/879652.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DeepSeek+AnythingLLM打造自己大模型知识库

DeepSeek+AnythingLLM打造自己大模型知识库

有些用户或是专家在项目建设中提出来要提炼工艺库、模型库、算法库等知识库，可以试着让deepseek成为每个角色的助手，例如工艺的、信息化的、设备的、电气的等角色，让deepseek成为自己，再不断的迭代它。deepseek扮演AI助手的角色，应用越来越发挥出来应有的价值。 DeepSeek+…
阅读更多...
基于 AI 的代码审计工具，支持多种语言，支持DeepSeek-R1，ChatGPT-4o等多种大模型。

基于 AI 的代码审计工具，支持多种语言，支持DeepSeek-R1，ChatGPT-4o等多种大模型。

免责声明 仅供安全研究与学习之用，若将工具做其他用途，由使用者承担全部法律及连带责任，作者及发布者不承担任何法律及连带责任。工具介绍基于 AI 的代码安全审计工具，支持多种编程语言的代码分析，可以帮助开发者快速发现代码中的潜在安全漏洞。支持DeepSeek-R1，ChatGPT-…
阅读更多...
GEO SFxxxx系列振弦式应变计 混凝土结构监测应变和温度

GEO SFxxxx系列振弦式应变计 混凝土结构监测应变和温度

GEO SFxxxx系列振弦式应变计 混凝土结构监测应变和温度振弦式应变计被广泛用于长期埋设在水工建筑物或其他混凝土结构物内部，如梁、柱、桩基、挡土墙、衬砌、墩以及基岩等，用于测量埋设点的线性变形（应变）和应力。同时，它也可以同时测量埋设点的温度。 GEO SFxxxx系列振弦…
阅读更多...
部署mysql

部署mysql

一、环境名称 备注操作命令对象 Docker 版本26.1.3远程操作系统 CentOS 7.9 64位远程管理工具 FinalShell 版本4.3.11安装软件名称 MySQL 版本8.3.0二、拉取镜像 2.1 查找 Docker Hub 上的 MySQL 镜像 docker search mysql2.2 拉取MySQL镜像 由于我本地用的是8.3.0的，所以服务…
阅读更多...
虚拟机安装麒麟操作系统

虚拟机安装麒麟操作系统

1.新建虚拟机 参考地址：https://blog.csdn.net/weixin_52799373/article/details/144770961
阅读更多...
7 个丑陋的利基网站，每月赚超过5000美元

7 个丑陋的利基网站，每月赚超过5000美元

​这张图由作者使用Ideogram制作。很难相信，但一些1999年的老旧丑陋网站依然存在。令人惊讶的是，它们的表现非常好。 这些网站有闪烁的文字、鲜艳的颜色和笨重的设计，让今天的网页设计师都感到不舒服。 但你猜怎么着？这些“丑陋”的网站正在为它们的拥有者赚取大量的钱。 现…
阅读更多...
VSCode 如何选中包含某个字母的所有行

VSCode 如何选中包含某个字母的所有行

阅读更多...
【榜单解析】2025年最具潜力的10大项目管理软件，你选对了吗？

【榜单解析】2025年最具潜力的10大项目管理软件，你选对了吗？

在当今竞争激烈的商业环境中，项目管理的高效性直接影响着企业的成败。一款合适的项目管理软件，能够帮助团队提升协作效率、优化资源分配、确保项目按时交付。随着科技的不断发展，市场上涌现出了各种各样的项目管理软件，让人眼花缭乱。今天，我们就为大家详细解析 2025 年最…
阅读更多...
高斯溅射和GIS融合之路- 将splat文件切片成3dtiles

高斯溅射和GIS融合之路- 将splat文件切片成3dtiles

这篇文章主要介绍了如何将高斯泼溅的splat文件切片成3DTiles格式，以便在Cesium等GIS引擎中高效渲染。通过GISBox工具实现切片，并讨论了Cesium对KHR_gaussian_splatting扩展的支持。在具体介绍山海鲸团队如何实现对高斯泼溅模型进行切片并在Cesium中渲染之前，我们先来回顾一下…
阅读更多...
MySQL常用编码格式详解utf8、utf8mb4、utf8mb4_unicode_ci 、utf8mb4_0900_ai_ci

MySQL常用编码格式详解utf8、utf8mb4、utf8mb4_unicode_ci 、utf8mb4_0900_ai_ci

前言常用字符集utf8utf8mb4排序规则（Collation）utf8mb4_general_ciutf8mb4_unicode_ciutf8mb4_0900_ai_ci总结对比使用建议示例前言 在使用MySQL创建数据库时候免不了选择字符集和排序规则，不同的字符集对应不同的排序规则，不同的排序规则的性能和效果是不一样的。一般我们…
阅读更多...
JS-50 事件类型之表单事件

JS-50 事件类型之表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件 ①input事件②select事件③Change事件④reset事件⑤submit事件 1、input事件input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（…
阅读更多...
第一章：计算机的历史

第一章：计算机的历史

计算机的历史 TL;DR因为有时工作量大，以及人类的懒惰性，所以诞生了计算机正文摒弃教材，来站在发明计算机的人的视角，考察为什么计算机会诞生。 思考题你是一个工程师，接到了一个任务：要求在两天之内计算十万个形如 2x+3=7 这样的方程，并返回结果，让上级进行下一步数据处…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023