跨平台WPF框架Avalonia教程 十

ops/2024/11/19 14:44:01/

如何绘制图形

内容正在准备中。

图形​

Avalonia引入了一个广泛、可伸缩、灵活的图形功能集,具有以下优势:

  • 分辨率无关和设备无关的图形。Avalonia图形系统的基本测量单位是设备无关像素,即1/96英寸,与实际屏幕分辨率无关,并为分辨率无关和设备无关的渲染提供基础。每个设备无关像素会自动缩放以匹配所渲染系统的每英寸点数(dpi)设置。
  • 改进的精度。Avalonia坐标系统使用双精度浮点数进行测量,而不是单精度浮点数。变换和不透明度值也用双精度表示。
  • 高级图形和动画支持。Avalonia通过为您管理动画场景来简化图形编程;无需担心场景处理、渲染循环和双线性插值。此外,Avalonia提供了命中测试支持和完整的alpha合成支持。
  • Skia。Avalonia默认使用Skia渲染引擎,这是Google Chrome和Chrome OS、Android、Mozilla Firefox和Firefox OS以及许多其他产品所使用的相同渲染引擎。

2D形状和几何图形​

Avalonia提供了一组常见的矢量绘制2D形状,如Ellipse(椭圆)、Line(线)、Path(路径)、Polygon(多边形)和Rectangle(矩形)。

<Canvas Background="Yellow" Width="300" Height="400"><Rectangle Fill="Blue" Width="63" Height="41" Canvas.Left="40" Canvas.Top="31"><Rectangle.OpacityMask><LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%"><LinearGradientBrush.GradientStops><GradientStop Offset="0" Color="Black"/><GradientStop Offset="1" Color="Transparent"/></LinearGradientBrush.GradientStops></LinearGradientBrush></Rectangle.OpacityMask>     </Rectangle><Ellipse Fill="Green" Width="58" Height="58" Canvas.Left="88" Canvas.Top="100"/><Path Fill="Orange" Data="M 0,0 c 0,0 50,0 50,-50 c 0,0 50,0 50,50 h -50 v 50 l -50,-50 Z" Canvas.Left="30" Canvas.Top="250"/><Path Fill="OrangeRed" Canvas.Left="180" Canvas.Top="250"><Path.Data><PathGeometry><PathFigure StartPoint="0,0" IsClosed="True"><QuadraticBezierSegment Point1="50,0" Point2="50,-50" /><QuadraticBezierSegment Point1="100,-50" Point2="100,0" /><LineSegment Point="50,0" /><LineSegment Point="50,50" /></PathFigure></PathGeometry></Path.Data></Path><Line StartPoint="120,185" EndPoint="30,115" Stroke="Red" StrokeThickness="2"/><Polygon Points="75,0 120,120 0,45 150,45 30,120" Stroke="DarkBlue" StrokeThickness="1" Fill="Violet" Canvas.Left="150" Canvas.Top="31"/><Polyline Points="0,0 65,0 78,-26 91,39 104,-39 117,13 130,0 195,0" Stroke="Brown" Canvas.Left="30" Canvas.Top="350"/>
</Canvas>

添加动画​

Avalonia UI具有动画支持,可以让您的控件实现增长、抖动、旋转和淡出效果,从而创建有趣的页面过渡效果等。Avalonia使用类似CSS的动画系统,支持属性过渡和关键帧动画。

如何添加菜单图标

在 Avalonia 中,通过为菜单项添加图标,您可以增强应用程序的外观和用户体验。图标可以为菜单项的操作提供视觉提示,使用户更容易浏览您的应用程序。本指南将指导您如何在 Avalonia 中为菜单项添加图标。

添加菜单项图标​

使用 MenuItem.Icon 属性可以为菜单项设置图标。您可以使用各种类型的图像源作为图标,包括资源 URI、文件路径或 web URL。以下是一个将图标添加到菜单项的示例:

<Menu><MenuItem Header="File"><MenuItem Header="Open" Command="{Binding OpenCommand}"><MenuItem.Icon><Image Width="16" Height="16" Source="avares://MyApp/Assets/open_icon.png" /></MenuItem.Icon></MenuItem></MenuItem>
</Menu>

在此示例中,MenuItem.Icon 属性被设置为一个 Image 控件,用于显示来自应用程序资源的图像。Image 控件的 Source 属性被设置为表示图像源的资源 URI。Width 和 Height 属性用于控制图像的大小。

如何使用图标

在Avalonia中,使用图标可以改善应用程序的外观,使其更加用户友好。图标可以提供动作或内容的视觉表示,帮助用户更容易理解应用程序的功能。本指南将向您展示如何在Avalonia应用程序中添加和使用图标。

在Avalonia中使用图标​

可以通过多种方式向Avalonia应用程序添加图标。本指南将介绍两种常见的方法:使用图像文件和使用图标字体。

使用图像文件​

一种在Avalonia中使用图标的方法是使用图像文件。您可以使用各种格式,如PNG,JPG或BMP。以下是如何将图像文件用作图标的示例:

<Image Width="16" Height="16" Source="avares://MyApp/Assets/icon.png" />

在此示例中,使用Image控件从应用程序资源中显示图像作为图标。Image控件的Source属性设置为指向图像文件的资源URI。

使用图标字体​

另一种在Avalonia中使用图标的方法是使用图标字体。图标字体允许您使用可缩放的矢量图标,可以使用CSS自定义其大小、颜色、阴影等。以下是如何在Avalonia中使用图标字体的示例:

<TextBlock FontFamily="avares://MyApp/Assets/#FontAwesome" Text="&#xf030;" />

在此示例中,使用TextBlock控件显示来自FontAwesome图标字体的图标。TextBlock控件的FontFamily属性设置为指向字体文件的资源URI,并且Text属性设置为所需图标的Unicode值。

最佳实践​

虽然使用图标可以增强应用程序的可用性,但明智地使用它们很重要。在使用图标时,请牢记以下提示:

  • 确保图标的大小适合,并且在背景下清晰可见。
  • 对于常见操作,请使用广为人知的图标,使您的应用程序更直观易懂。

如何使用关键帧动画

您可以使用关键帧动画来在时间轴上更改一个或多个控件属性。关键帧在动画的 持续时间 内由 Avalonia UI 样式中的 提示 点定义,并在某个时间点上设置属性的中间值。

关键帧之间的属性值根据 缓动函数 的曲线设置。默认的缓动函数是直线插值。

动画可以在启动后运行任意次数,也可以在正向或反向运行。还有选项可以延迟动画的启动,并进行重复。

信息

如果您熟悉 CSS 中的关键帧动画,您会注意到它在 Avalonia UI 中是如何实现的。

示例​

您可以使用样式定义关键帧动画。

信息

若要了解 Avalonia UI 如何使用样式,请查看 这里的概念。

按照以下步骤使用 XAML 定义一个简单的颜色渐变动画:

  • 在您选择的层级中创建一个样式集合。
  • 向集合中添加一个带有选择器的样式,以定位要进行动画的控件。
  • 添加一个 Setter 元素来定义您希望动画更改的属性。例如 <Setter Property="Fill" Value="Red"/>
  • 添加一个 Style.Animations 元素来包含您的动画。
  • 添加一个 Animation 元素,并设置其 Duration 属性。格式为 时:分:秒
  • 现在定义动画的关键帧。这个示例在 0% 和 100% 处设置了提示点。
  • 在每个关键帧上添加 Setter 元素来设置填充不透明度的值。这个示例在 0.0 和 1.0 之间进行动画。

完成后的代码如下所示:

<Window xmlns="https://github.com/avaloniaui"><Window.Styles><Style Selector="Rectangle.red"><Setter Property="Fill" Value="Red"/><Style.Animations><Animation Duration="0:0:3"> <KeyFrame Cue="0%"><Setter Property="Opacity" Value="0.0"/></KeyFrame><KeyFrame Cue="100%"><Setter Property="Opacity" Value="1.0"/></KeyFrame></Animation></Style.Animations></Style></Window.Styles><Rectangle Classes="red" Width="100" Height="100"/>
</Window>

动画效果如下:

该动画在矩形控件加载并被样式选择时就会运行。事实上,它在预览窗格中也能运行!

同时动画两个属性​

此示例展示了如何在同一时间轴上同时动画两个属性。

<Window.Styles><Style Selector="Rectangle.red"><Setter Property="Fill" Value="Red"/><Style.Animations><Animation Duration="0:0:3" IterationCount="4"><KeyFrame Cue="0%"><Setter Property="Opacity" Value="0.0"/><Setter Property="RotateTransform.Angle" Value="0.0"/></KeyFrame><KeyFrame Cue="100%"> <Setter Property="Opacity" Value="1.0"/><Setter Property="RotateTransform.Angle" Value="90.0"/></KeyFrame></Animation> </Style.Animations></Style></Window.Styles>

红色矩形同时进行淡入和旋转。

延迟​

您可以通过设置动画元素的延迟属性来延迟动画的启动。例如:

<Animation Duration="0:0:1"Delay="0:0:1"> ...
</Animation>

重复​

您可以使动画重复一定次数,或无限次数。要重复有限次数的动画,请在动画元素上设置 RepeatCount 属性,例如:

<Animation RepeatCount="5">...
</Animation>

要无限次地重复动画,请使用特殊值 INFINITE。例如:

<Animation RepeatCount="INFINITE">...
</Animation>

播放方向​

默认情况下,动画正向播放,即它按照缓动函数的曲线从左向右进行。您可以通过设置动画元素的 PlaybackDirection 属性来改变这种行为。例如:

<Animation RepeatCount="9" PlaybackDirection="AlternateReverse">...
</Animation>

以下表格描述了各个选项:

描述
Normal(默认)正向播放动画。
Reverse反向播放动画。
Alternate先正向播放动画,然后反向播放。
AlternateReverse先反向播放动画,然后正向播放。

填充模式​

动画的填充模式属性定义了动画运行后,属性如何持续保留或在运行之间的任何间隙中显示。例如:

<Animation RepeatCount="9" FillMode="Backward">...
</Animation>

以下表格描述了各个选项:

描述
None动画运行后,值不会保留,也不会在动画延迟时应用第一个值。
Forward最后的插值值将持续保留到目标属性。
Backward在动画延迟时,第一个插值值将显示。
Both将同时应用 Forward 和 Backward 行为。

缓动函数​

缓动函数定义了动画期间属性如何随时间变化。

默认的缓动函数是线性的(上图左),但您可以通过在缓动属性中设置所需函数的名称来使用其他模式。例如,要使用“弹跳淡入”函数(上图右):

<Animation Duration="0:0:1"Delay="0:0:1"Easing="BounceEaseIn"> ...
</Animation>

信息

要获取 Avalonia UI 缓动函数的完整列表,请参阅 此处的参考。

您还可以添加自定义的缓动函数类,如下所示:

<Animation Duration="0:0:1"Delay="0:0:1"><Animation.Easing><local:YourCustomEasingClassHere/></Animation.Easing> ...
</Animation>

 

如何使用过渡效果

Avalonia中的过渡效果也受到CSS动画的很大启发。它们监听目标属性的值的任何变化,并根据其参数对变化进行动画处理。可以通过Transitions属性在任何Control上定义过渡效果:

<Window xmlns="https://github.com/avaloniaui"><Window.Styles><Style Selector="Rectangle.red"><Setter Property="Height" Value="100"/><Setter Property="Width" Value="100"/><Setter Property="Fill" Value="Red"/><Setter Property="Opacity" Value="0.5"/></Style><Style Selector="Rectangle.red:pointerover"><Setter Property="Opacity" Value="1"/></Style></Window.Styles><Rectangle Classes="red"><Rectangle.Transitions><Transitions><DoubleTransition Property="Opacity" Duration="0:0:0.2"/></Transitions></Rectangle.Transitions></Rectangle></Window>

上述示例将监听RectangleOpacity属性的变化,并在值变化时,在2秒内将其平滑地过渡从旧值到新值。

过渡效果也可以在任何样式中使用Setter来定义,目标属性设为Transitions,并将它们封装在Transitions对象中,如下所示:

<Window xmlns="https://github.com/avaloniaui"><Window.Styles><Style Selector="Rectangle.red"><Setter Property="Height" Value="100"/><Setter Property="Width" Value="100"/><Setter Property="Fill" Value="Red"/><Setter Property="Opacity" Value="0.5"/><Setter Property="Transitions"><Transitions><DoubleTransition Property="Opacity" Duration="0:0:0.2"/></Transitions></Setter></Style><Style Selector="Rectangle.red:pointerover"><Setter Property="Opacity" Value="1"/></Style></Window.Styles><Rectangle Classes="red"/></Window>

每个过渡效果都有PropertyDelayDuration和可选的Easing属性。

Property表示过渡效果的目标属性,用于监听和动画处理值。

Delay表示过渡效果应用于目标之前的等待时间。

Duration表示过渡效果播放的时间长度。

缓动函数与 关键帧动画 中描述的相同。

以下是可用的过渡效果类型。必须根据要动画处理的属性类型选择正确的类型。

  • BoxShadowsTransition:用于 BoxShadows 目标属性
  • BrushTransition:用于 IBrush 目标属性
  • ColorTransition:用于 Color 目标属性
  • CornerRadiusTransition:用于 CornerRadius 目标属性
  • DoubleTransitions:用于 double 目标属性
  • FloatTransitions:用于 float 目标属性
  • IntegerTransitions:用于 int 目标属性
  • PointTransition:用于 Point 目标属性
  • SizeTransition:用于 Size 目标属性
  • ThicknessTransition:用于 Thickness 目标属性
  • TransformOperationsTransition:用于 ITransform 目标属性
  • VectorTransition:用于 Vector 目标属性

过渡渲染变换​

可以过渡应用于使用类似CSS语法的控件的渲染变换。以下示例显示了一个边框,在指针悬停在其上方时旋转45度:

XAML

<Border Width="100" Height="100" Background="Red"><Border.Styles><Style Selector="Border"><Setter Property="RenderTransform" Value="rotate(0)"/></Style><Style Selector="Border:pointerover"><Setter Property="RenderTransform" Value="rotate(45deg)"/></Style></Border.Styles><Border.Transitions><Transitions><TransformOperationsTransition Property="RenderTransform" Duration="0:0:1"/></Transitions></Border.Transitions>
</Border>

C#

new Border
{Width = 100,Height = 100,Background = Brushes.Red,Styles ={new Style(x => x.OfType<Border>()){Setters ={new Setter(Border.RenderTransformProperty,TransformOperations.Parse("rotate(0)"))},},new Style(x => x.OfType<Border>().Class(":pointerover")){Setters ={new Setter(Border.RenderTransformProperty,TransformOperations.Parse("rotate(45deg)"))},},},Transitions = new Transitions{new TransformOperationsTransition{Property = Border.RenderTransformProperty,Duration = TimeSpan.FromSeconds(1),}}
};

可用的过渡效果如下:

过渡效果示例可接受的单位
translatetranslate(10px)translate(0px, 10px)px
translateXtranslateX(10px)px
translateYtranslateY(10px)px
scalescale(10)scale(0, 10)
scaleXscaleX(10)
scaleYscaleY(10)
skewskew(90deg)skew(0, 90deg)deggradradturn
skewXskewX(90deg)deggradradturn
skewYskewY(90deg)deggradradturn
rotaterotate(90deg)deggradradturn
matrixmatrix(1,2,3,4,5,6)

信息

Avalonia还支持类似WPF的渲染变换,如RotateTransformScaleTransform等。这些变换不能进行过渡:如果要对渲染变换应用过渡效果,请始终使用类似CSS的格式。

How To Use Gradients

This guide explains how to effectively use LinearGradientBrush in Avalonia to create beautiful gradient effects.

Basic Syntax​

A LinearGradientBrush is defined using the following basic structure:

<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%"><GradientStop Color="#COLOR1" Offset="0.0"/><GradientStop Color="#COLOR2" Offset="1.0"/>
</LinearGradientBrush>

Key Properties​

StartPoint and EndPoint​

  • Defines the direction of the gradient
  • Uses percentage values (e.g., "0%,0%") or decimal values (0,0)
  • Common patterns:
    • Horizontal: StartPoint="0%,50%" EndPoint="100%,50%"
    • Vertical: StartPoint="50%,0%" EndPoint="50%,100%"
    • Diagonal: StartPoint="0%,0%" EndPoint="100%,100%"

GradientStop Elements​

  • Define colors and their positions in the gradient
  • Properties:
    • Color: The color value (Hex code or named color)
    • Offset: Position in the gradient (0.0 to 1.0)

Common Gradient Patterns​

1. Simple Horizontal Gradient​

<LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%"><GradientStop Color="#FF6B6B" Offset="0.0"/><GradientStop Color="#4ECDC4" Offset="1.0"/>
</LinearGradientBrush>

2. Multi-Color Gradient​

<LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%"><GradientStop Color="#FF6B6B" Offset="0.0"/><GradientStop Color="#FF8E53" Offset="0.3"/><GradientStop Color="#FF5E3A" Offset="0.6"/><GradientStop Color="#4ECDC4" Offset="1.0"/>
</LinearGradientBrush>

3. Vertical Gradient​

<LinearGradientBrush StartPoint="50%,0%" EndPoint="50%,100%"><GradientStop Color="#A8E6CF" Offset="0.0"/><GradientStop Color="#3D84A8" Offset="1.0"/>
</LinearGradientBrush>

Common Use Cases​

Button Backgrounds​

<Button><Button.Background><LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%"><GradientStop Color="#4CAF50" Offset="0.0"/><GradientStop Color="#45A049" Offset="1.0"/></LinearGradientBrush></Button.Background>
</Button>

Panel Backgrounds​

<Border CornerRadius="8"><Border.Background><LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%"><GradientStop Color="#FF9A9E" Offset="0.0"/><GradientStop Color="#FAD0C4" Offset="0.5"/><GradientStop Color="#FFD1FF" Offset="1.0"/></LinearGradientBrush></Border.Background>
</Border>

Example​

Below is the code to replicate the following sample.

Gradient Sample

<Window xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"x:Class="SampleApp.MainWindow"Title="Gradient Example"><StackPanel Spacing="20" Margin="20"><!-- Horizontal gradient with multiple color stops --><Border Height="100" CornerRadius="8"><Border.Background><LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%"><GradientStop Color="#FF6B6B" Offset="0.0"/><GradientStop Color="#FF8E53" Offset="0.3"/><GradientStop Color="#FF5E3A" Offset="0.6"/><GradientStop Color="#4ECDC4" Offset="1.0"/></LinearGradientBrush></Border.Background><TextBlock Text="Horizontal Gradient"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="White"/></Border><!-- Vertical gradient with smooth transitions --><Border Height="100" CornerRadius="8"><Border.Background><LinearGradientBrush StartPoint="50%,0%" EndPoint="50%,100%"><GradientStop Color="#A8E6CF" Offset="0.0"/><GradientStop Color="#3D84A8" Offset="0.5"/><GradientStop Color="#46CDCF" Offset="1.0"/></LinearGradientBrush></Border.Background><TextBlock Text="Vertical Gradient"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="White"/></Border><!-- Diagonal gradient with multiple stops --><Border Height="100" CornerRadius="8"><Border.Background><LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%"><GradientStop Color="#FF9A9E" Offset="0.0"/><GradientStop Color="#FAD0C4" Offset="0.25"/><GradientStop Color="#FFB6C1" Offset="0.5"/><GradientStop Color="#FFD1FF" Offset="1.0"/></LinearGradientBrush></Border.Background><TextBlock Text="Diagonal Gradient"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="Black"/></Border><!-- Custom angle gradient with cycling effect --><Border Height="100" CornerRadius="8"><Border.Background><LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,50%"><GradientStop Color="#08AEEA" Offset="0.0"/><GradientStop Color="#2AF598" Offset="0.3"/><GradientStop Color="#08AEEA" Offset="0.6"/><GradientStop Color="#2AF598" Offset="1.0"/></LinearGradientBrush></Border.Background><TextBlock Text="Custom Angle Gradient"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="White"/></Border></StackPanel>
</Window>


http://www.ppmy.cn/ops/135000.html

相关文章

Javascript高级篇 - 异步编程保姆级教程 Promise Async Await generator

Promise 1&#xff09;状态不可逆性&#xff1a; let p1 new Promise((resolve, reject) > {resolve(success)reject(fail) }) console.log(p1, p1)let p2 new Promise((resolve, reject) > {reject(success)resolve(fail) }) console.log(p2, p2)let p3 new Promis…

汽车资讯新动力:Spring Boot技术驱动

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

【青牛科技】D7312带 ALC 双通道前置放大器电路

概述&#xff1a; D7312是一块双极性集 成电路。可用于小型收录机中作前置放大电路。 主要特点&#xff1a; ● 含ALC电路和ALC检波电路。 ● 外接元件少。 ● 增益高&#xff0c;噪声低。 ● 静态电流小 ● 电源开关冲击噪音小、 反应快 ● 具有过热保护功能 ● 封装形式&…

【Python绘图】两种绘制混淆矩阵的方式 (ConfusionMatrixDisplay(), imshow()) 以及两种好看的colorbar

在机器学习领域&#xff0c;混淆矩阵是一个评估分类模型性能的重要工具。它不仅展示了模型预测的准确性&#xff0c;还揭示了模型在不同类别上的表现。本文介绍两种在Python中绘制混淆矩阵的方法&#xff1a;ConfusionMatrixDisplay() 和 imshow()&#xff0c;以及两种好看的co…

分布式cap理论学习

【分布式】CAP理论详解 一致性(Consistency) 代表数据在任何时刻&#xff0c;任何分布式节点&#xff0c;看到的都是符合预期的。有点类似于幂等&#xff0c;无论访问哪个节点&#xff0c;得到结果数据一致。 可用性(Availability) 强调的是任意时刻一定能读到数据&#xff…

自动驾驶系列—从数据采集到存储:解密自动驾驶传感器数据采集盒子的关键技术

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

Build event

libevent的基本操作单元是事件。每个事件代表一组条件的集合&#xff0c;这些条件包括&#xff1a; 文件描述符已经就绪&#xff0c;可以读取或者写入 文件描述符变为就绪状态&#xff0c;可以读取或者写入&#xff08;仅对于边沿触发IO&#xff09; 超时事件 发生某信号 用…

flink cdc 应用

SQLServer 1. The db history topic or its content is fully or partially missing. Please check database history topic configuration and re-execute the snapshot. 遇到了一下问题&#xff0c;多次尝试&#xff0c;最终发现是数据库大小写要一致。 Caused by: io.deb…