跨平台WPF框架Avalonia教程 三

打印 上一主题 下一主题

主题 901|帖子 901|积分 2703

控件

在 Avalonia UI 中,控件是创建用户界面的根本构建块。它们代表各种交互元素,如按钮、文本框、滑块等。了解控件对于利用 Avalonia UI 开发应用程序至关重要。
什么是控件?​

控件是用户界面元素,答应用户与应用程序交互。它们提供输入、表现和操作数据的功能。根据其目标和活动,控件可以分为多种类型。


  • 按钮(Button):按钮常用于在单击或触摸时触发操作。它们可以包含文本、图标或两者,并经常用于提交表单、打开对话框或执行命令等使命。
  • 文本框(TextBox):文本框答应用户输入和编辑文本。它们用于捕获用户输入,例如用户名、暗码或任何形式的文本信息。文本框还可以根据特定输入模式和验证进行自界说。
  • 标签(Label):标签用于表现静态文本或其他控件的标题。它们为用户提供额外的信息或上下文,通常是不可交互的。
  • 复选框(CheckBox)和单选按钮(RadioButton):复选框和单选按钮用于选择和多选项。复选框答应用户选择一个或多个选项,而单选按钮答应用户从一组选项中选择一个。
  • 滑动条(Slider):滑动条用于从范围中选择一个值。它们提供了一个可视化表示值的方式,可以通过拖动滑块的手柄来调解值。滑块通常用于设置诸如音量控制或图像调解等设置。
  • 列表框(ListBox)和下拉列表框(ComboBox):列表框和下拉列表框答应用户从列表或下拉菜单中选择项目。列表框同时表现多个项目,而下拉列表框在初始状态下表现一个项目,并在点击时展开表现列表。
这些只是 Avalonia UI 中浩繁可用控件的一些例子。每个控件都有本身的一组属性、方法和变乱,答应开发职员根据应用程序的需求自界说其外观和活动。
开始利用内置控件​

要开始利用 Avalonia UI 中的控件,您可以参考每种控件类型的文档。文档提供了具体的解释、示例和代码片断,帮助您有效地理解和利用这些控件。


  • 按钮控件文档
  • 文本框控件文档
  • 标签控件文档
  • 复选框控件文档
  • 滑动条控件文档
  • 列表框控件文档
通过探索这些资源,您将对 Avalonia UI 中的控件利用建立坚实的底子,并能够为应用程序创建丰富且交互性强的用户界面。
内置控件的类型​

Avalonia UI 的内置控件可以大体分类为以下类型:


  • 绘制控件(Drawn Controls)
  • 结构控件(Layout Controls)
  • 用户控件(User Controls)*
  • 模板化控件(Templated Controls)

    • 完全可定制(Fully Customizable)
    • 部分可定制(Partially Customizable)

*User controls are only available for apps.
备注
这些分类与 选择自界说控件类型 中的讨论有一定关联。
绘制控件​

绘制控件负责天生其本身的几何图形或位图并进行渲染。这些控件的示例包括 Border、TextBlock 和 Image。绘制控件是用于构建其他所有内容的底子控件。
大多数绘制控件具有可以用于调解其外观和大小的标准属性,但它们不答应重新模板化。这意味着作为应用程序开发职员,您不能在不陷入 C#、派生新版本的控件并拦截渲染方法的情况下更改这些控件的功能或样式。
结构控件​

结构控件是特别的,由于它们本身没有外观。像 Grid、StackPanel 等结构控件负责界说其子元素的结构,并充当父容器。子控件负责渲染 UI,而结构父控件只设置大小和位置(它们本身没有外观)。
应用程序开发职员很少修改框架提供的结构控件。
备注
某些结构控件,如 Grid,具有诸如 Background 之类的属性,以简化常见用例。利用这些属性确实为这些控件提供了一些外观。
用户控件​

Avalonia UI 自身不会提供 UserControl,由于这不通用。有关在应用程序中创建和利用 UserControl 的更多信息,请参阅 选择自界说控件类型。
模板化控件​

Avalonia UI 中的大多数标准控件都是模板化控件,这意味着它们的视觉外观是在与功能分离的 XAML 控件模板中界说的。这是 WPF 中起源的无外观控件概念的底子。
应用程序开发职员可以更改模板化控件的 XAML 模板,使其外观完全不同。这种功能并非所有 UI 框架都具备的,是基于 XAML 的 UI 框架中最强大的功能之一。
备注
重新模板化控件是应用程序开发职员的最后本领。这还意味着您将负责将模板与上游的任何更改保持同步。相反,更好的做法是:

  • 尝试利用现有属性自界说控件
  • 利用 Avalonia UI 强大的样式选择器创建新样式,以修改现有模板中所需的内容
  • 作为最后本领,重新模板化
完全可定制​

Avalonia UI 中的大多数模板化控件都是完全可定制的。这意味着可以完全更换控件的模板并更改其外观。Button 控件是一个很好的例子,但 Avalonia UI 中的所有模板化控件都试图默认情况下是完全可定制的。对于完全可定制的模板化控件,应用程序几乎可以完全自由地样式或更改 UI 中所见的一切。
部分可定制​

实际上,不总是有完全可更换的控件模板。在控件设计中,在支持常见用例和使控件完全可重新模板化之间存在一种平衡。对于高复杂性控件(例如 DataGrid),该平衡方向于支持预期用例,并且不应该完全重新模板化控件。这些控件通常还具有非常多的模板部件(由 C# 控件实现直接利用的必须控件元素)。
在 DataGrid 如许的控件中,仍然可以重新模板化控件的各个组件或部分。只是完全改变它的外观和功能是极其困难的。
像 DataGrid 如许的部分可定制的模板化控件在由框架本身提供的第一方控件中很少见。
创建控件​

在 Avalonia 中,您可以灵活地根据应用程序的特定要求创建所有类型的自界说控件。有关更多信息,请参阅创建控件。

内置控件

以下是一些常用的 Avalonia 控件,按种别列出:
结构控件​

控件描述Border用边框和背景装饰单个子元素。Canvas在指定位置表现子控件。Dock Panel将子控件沿指定边沿(顶部、底部、左侧、右侧)分列,并使其中一个填充剩余空间。Expander具有标题地区(始终可见)和可折叠的内容地区(单个子元素)。Grid将子控件分列在网格的单元格中,按行和列定位。单元格可以跨行和跨列。Grid Splitter可以添加到网格中,答应用户在运行时调解行或列大小。Panel将子控件堆叠在一起。Relative Panel答应多个子控件。子控件的位置和对齐方式可以相对于面板本身指定,也可以相对于其他子控件指定。可以指定子控件的大小,也可以根据关系和对齐方式盘算大小。Scroll Viewer如果(单个)子控件大于可用空间,则添加滚动条和滚动活动。Split View在其(单个子控件)内容地区的边沿添加可折叠的窗格。Stack Panel答应多个子控件,按顺序水平或垂直分列。Tab Control标签控件答应将视图细分为标签项。Uniform Grid答应多个子控件,以网格形式分列,单元格具有统一的列和行大小。Wrap Panel将子控件从左到右按顺序分列,当宽度不敷时,换行表现。 按钮​

控件描述Button根本按钮控件 - 可以表现文本、图标或两者。具有标准的“点击”活动。Repeat Button按钮在按下并保持按住时重复引发其点击变乱。Radio Button按钮具有选中状态。它可以放置在一组中,以使一个按钮的选择取消所有其他按钮的选择。Toggle Button按钮具有选中状态和未选中状态。后续点击“切换”此状态。通过“checked”伪类可以为选中状态和未选中状态分配不同的样式。Button Spinner一个带有两个旋转按钮和内容地区的控件。Split Button此按钮具有主要和次要部分,可以独立按下。主要部分的活动雷同于标准按钮,而次要部分则打开一个带有附加操作的弹出菜单。Toggle Split Button此按钮具有主要和次要部分,可以独立按下。主要部分的活动雷同于切换按钮,而次要部分打开一个带有附加操作的弹出菜单。 重复数据控件​

这些控件以表格或列表格式表现重复数据:
控件描述Data Grid在可自界说的网格中表现数据。Items Control表现来自绑定数据源的项目聚集。Items Repeater表现来自绑定数据源的重复数据。它具有结构模板和数据模板。List Box一个包含可选择项的控件。Combo Box一个带有下拉列表的控件,其中的项目可以选择。 文本表现和编辑​

ControlDescriptionAuto Complete Box一个表现文本框用于用户输入和一个下拉框,其中包含根据已输入内容可能匹配的项的控件。Text Block用于表现文本块的控件。只读。Text Box用于表现或编辑文本的控件,没有格式限定。Masked Text Box用于在掩码中表现文本;或用于利用掩码编辑文本,以防止无效的用户输入。 值选择​

控件类型描述Check BoxBoolean以勾选标志形式表示的 True 值。点击交互切换值。具有表现“未知”值的选项。SliderDouble相对于最大值和最小值的相对值,以滑动条按钮在滑动条轨道上的位置表示。拖动滑动条按钮可以在最大值和最小值之间更改值。键盘和点击交互也可以微调值。CalendarDateTime日历是用户选择日期或日期范围的控件。Calendar Date PickerDateTime日期选择器的扩展,包括文本框和按钮。Color PickerColor / HsvColor颜色选择器支持用户利用光谱、调色板和组件滑块选择和编辑颜色。它还支持可选的 alpha 分量、RGB 或 HSV 颜色模子和十六进制颜色值。Date PickerDateTime日期选择器有三个“微调”控件,答应用户选择日期值。Time PickerTimeSpan时间选择器有三个“微调”控件,答应用户选择小时、分钟和秒钟。 表现图像​

控件描述Image表现位图或矢量图像。Path Icon利用当前的Foreground绘制矢量图像。 菜单和弹出框​

控件描述Menu表现应用程序菜单。Flyouts将弹出菜单或上下文菜单附加到控件。Tool Tip当鼠标悬停在控件上时表现工具提示。
选择自界说控件类型

Avalonia提供了多种方法来创建自界说控件以满足应用程序的特定需求。了解不同类型的自界说控件将帮助您选择最合适的方法来满足您的需求。在Avalonia中,常见的自界说控件类型有效户控件(UserControl)、模板控件(TemplatedControl)和自绘控件。
用户控件(UserControl)​

用户控件是在Avalonia中创建自界说控件的一种高级方法。它答应您通过组合现有控件并利用XAML界说结构来构建一个控件。用户控件充当一个容器,封装了多个控件,并提供了一个连贯的用户界面。
信息
通常,用户控件用于表示应用程序中的专用视图,比如“用户具体信息视图”,而不是用作通用的用户界面元素。
创建用户控件需要以下步骤:

  • 界说XAML:创建一个新的UserControl XAML文件,通过放置控件、设置属性和应用样式来界说控件的结构和外观。
  • Code-behind:可选项,您可以界说额外的代码后台逻辑来处理惩罚变乱、修改活动或为用户控件提供额外的功能。
  • 重用和定制: 用户控件可以在应用程序中轻松重用和定制。当您希望封装一组特定的控件和活动为可重用的组件或"视图"时,它们特别有效。
信息
要了解这些概念的完整、可运行的示例,请查看示例应用程序.
模板控件(Templated/Lookless Controls)​

模板控件(也称为“Lookless控件”)为在Avalonia中创建自界说控件提供了更高级和可自界说的方法。模板控件将控件的活动和逻辑与其可视外观分离,答应应用程序开发职员通过控件模板进行样式化和模板化。
对于模板控件,您在code-behind类中界说控件的活动和属性,而视觉外观则通过在XAML中界说控件模板来指定。这种分离答应应用程序开发职员自界说控件的外观和给人的感觉,而不会修改其底层活动。
信息
模板控件通常用于通用的用户界面元素,不特定于业务逻辑,可能需要不同的主题或视觉样式。Avalonia提供的大多数内置控件都是模板控件。
创建模板控件需要以下步骤:

  • 界说控件类:创建一个新的类,该类派生自TemplatedControl。这个类界说了控件的活动、属性和变乱。
  • 控件模板:在XAML中创建一个ControlTheme,指定控件的视觉外观和结构。控件模板界说了控件的部分以及它们应该如何被样式化。
  • 样式和模板化:应用程序开发职员可以通过修改控件模板或应用样式来自界说控件的外观。如许可以实现应用程序中统一和统一的视觉设计。
模板控件提供了更大的灵活性和可重用性,使它们非常适合您希望提供一个可以根据不同视觉主题进行样式化或顺应各种用户偏好的控件的场景。
自绘控件​

自绘控件在Avalonia中提供了最高级别的定制。利用自绘控件,您可以完全控制控件的视觉元素的渲染,从而创建独特而复杂的视觉外观。
信息
自绘控件通常用于表示大部分非交互式的图形元素,不需要进行主题化。
要创建自绘控件,您需要重写控件的Render方法,并利用低级别的绘制API(例如DrawingContext)来界说控件的外观。这种方法可以对控件的每个像素进行精细控制,实现高度个性化的可视化。
创建自绘控件的步骤如下:

  • 界说控件类:创建一个新的类,该类派生自Control。这个类将界说控件的活动和渲染逻辑。
  • 重写Render方法:在控件类中重写Render方法,并利用DrawingContext来绘制控件的内容。

界说属性

在Avalonia UI中,控件属性答应您公开自界说控件的可配置方面,使您的控件的用户能够定制其活动和外观。本文档将介绍如何为自界说控件界说属性。
样式化属性​

Avalonia中的样式化属性为控件提供了一种强大而灵活的界说属性的方式。这些属性专门设计用于支持Avalonia的样式化系统和数据绑定。在Avalonia中,样式化属性通过利用AvaloniaProperty类进行注册。
Avalonia的样式化属性具有以下主要特点:


  • 样式支持:可以通过样式和在XAML或编程中界说的setter轻松地进行定位和修改。
  • 继续:支持继续,这意味着在父控件上界说的属性值可以自动继续到其子控件上,除非明确覆盖。
  • 默认值:可以在控件级别或控件模板中指定默认值,确保在多个控件实例中保持一致的活动。
  • 属性值优先级:它们依照明确界说的优先级顺序,答应根据当地值、样式setter、触发器和默认值等因素解析值。
  • 验证和强制转换:样式化属性答应控件验证和强制转换传递给它的值,确保控件永远不会处于无效状态。
在Avalonia中,样式化属性通常用于控件的属性,这些属性旨在通过样式轻松定制,从而实现基于各种条件的外观和活动的动态变化。
示例​

以下是如何为假设的自界说按钮控件界说自界说样式化属性的示例:
  1. public class MyCustomButton : Button
  2. {
  3.     public static readonly StyledProperty<int> RepeatCountProperty =
  4.         AvaloniaProperty.Register<MyCustomButton, int>(nameof(RepeatCount), defaultValue: 1);
  5.     public int RepeatCount
  6.     {
  7.         get => GetValue(RepeatCountProperty);
  8.         set => SetValue(RepeatCountProperty, value);
  9.     }
  10. }
复制代码

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


界说变乱

在Avalonia中,变乱答应您的自界说控件进行通信并通知用户特定的操作或变乱发生。通过界说变乱,您为控件的利用者提供了一种在其应用程序中响应和处理惩罚这些变乱的方法。本文档将引导您如何为自界说控件界说变乱。
路由变乱​

Avalonia中的路由变乱提供了一种处理惩罚变乱的机制,这些变乱可以在控件树中传播(或“路由”),答应多个控件对雷同的变乱做出响应。路由变乱提供以下关键特性:


  • 变乱路由:路由变乱可以沿着树向上(冒泡)或向下(隧道)传播,使得不同级别的控件可以处理惩罚雷同的变乱。这答应更灵活和集中的变乱处理惩罚。
  • 变乱处理惩罚程序:路由变乱利用变乱处理惩罚程序来响应变乱。变乱处理惩罚程序可以与特定控件关联,也可以附加到视觉树中的更高级别以处理惩罚来自多个控件的变乱。
  • 已处理惩罚状态:路由变乱具有Handled属性,可用于标志变乱为已处理惩罚,制止进一步的传播。这答应对变乱处理惩罚进行精细的控制。
  • 变乱路由策略:Avalonia支持不同的路由策略,如冒泡、隧道和直接路由。这些策略决定了控件吸收和处理惩罚变乱的顺序。 Avalonia的路由变乱在需要处理惩罚可能发生在嵌套控件内部的变乱时特别有效,大概当您希望在视觉树的较高级别集中变乱处理惩罚逻辑时。
示例​

以下是为假设的自界说滑块控件界说路由变乱的示例:
  1. public class MyCustomSlider : Control
  2. {
  3.     public static readonly RoutedEvent<RoutedEventArgs> ValueChangedEvent =
  4.         RoutedEvent.Register<MyCustomSlider, RoutedEventArgs>(nameof(ValueChanged), RoutingStrategies.Direct);
  5.     public event EventHandler<RoutedEventArgs> ValueChanged
  6.     {
  7.         add => AddHandler(ValueChangedEvent, value);
  8.         remove => RemoveHandler(ValueChangedEvent, value);
  9.     }
  10.     protected virtual void OnValueChanged()
  11.     {
  12.         RoutedEventArgs args = new RoutedEventArgs(ValueChangedEvent);
  13.         RaiseEvent(args);
  14.     }
  15. }
复制代码

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



 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大号在练葵花宝典

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表