Avalonia 里 5 行 XAML 快速画出会动的环形进度条【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia刚拿到一个跨平台指标面板的需求Windows、macOS、Linux 上同一个界面中间一个会随数值变长的环形进度条。用 Avalonia 图形绘制实现它只需要三样东西Canvas当画布Path的弧线命令画弧TextBlock放读数——全程纯 XAML四个平台渲染结果一致。下面按先定位、再画弧、后叠层、最后让它动的顺序拆开讲。Canvas 在布局里管什么Avalonia 的面板Panel负责摆放子元素的容器大多会自己做排列Canvas是例外它对子元素不做任何排列每个子元素落在哪完全由四个附加属性决定Canvas.Left/Canvas.Top左边缘距画板左边缘、上边缘距画板上边缘的像素数最常用Canvas.Right/Canvas.Bottom反过来从右缘、下缘量起适合贴边的元素同一方向写了两边时Left 和 Top 优先一个都没写元素就落在(0,0)。坐标系约定原点在画板左上角x 向右、y 向下增长与数学坐标相反单位是 DIP设备无关像素可写小数1 个单位对应 1 个逻辑像素。另外Canvas自身测量结果为 0不占父容器的布局空间可以直接盖在任何面板上当纯绘图层。XAML 画形状先选对元件画形状前先用 src/Avalonia.Controls/Shapes/ 目录选对元件元件干什么的关键属性Path弧线、任意轮廓本例主角Data命令字符串、Stroke、StrokeLineCapLine指针、分隔线、短刻度StartPoint、EndPointEllipse中心圆帽、圆点标记Width、Height、FillRectangle直角或圆角底板RadiusX、RadiusY、Fill没有万能控件只有最省事的控件环形进度用Path加粗描边中心圆帽用Ellipse读数用TextBlock。弧线用哪条路径命令环形的环就是一条圆弧。Data属性是一串路径命令Path 标记解析器源码四个命令覆盖本例全部需求M x,y把画笔移到起点这一笔不画L x,y从当前位置画直线到 (x,y)A rx ry rot large sweep x,y画一段圆弧到 (x,y)rx ry是椭圆半径large选 180° 以上的大弧还是小弧sweep选走向Z直线回到起点并闭合。取 240 宽画板圆心 (120,120)、半径 90。135° 方向左下的弧端点算出来是 (75.9,184.1)45° 方向右下是 (184.1,184.1)两个点正好都落在 y184.1 上Canvas Width240 Height240 Path DataM 75.9,184.1 A 90,90 0 0 1 184.1,184.1 Stroke#2196F3 StrokeThickness16 StrokeLineCapRound/ /Canvas0 0 1这段里最后一个 1 决定从 75.9 到 184.1 走上方半圆写成 0 会从下方绕过去方向正好反了。StrokeLineCapRound给两端加上圆形端帽和 16 粗细的弧连成圆头效果。线条和文字谁压住谁Canvas 子元素按书写顺序渲染后写的盖在先写的上面想精确控制就加Canvas.ZIndexPath Canvas.Left12 DataM 37.9,146.1 A 70,70 0 0 1 142.1,146.1 Stroke#2196F3 StrokeThickness12 StrokeLineCapRound/ Ellipse Canvas.Left104 Canvas.Top104 Width32 Height32 Fill#FF5722 Canvas.ZIndex1/ TextBlock Canvas.Left84 Canvas.Top112 Text62% FontSize18 Canvas.ZIndex2/弧线、中心圆帽、读数三行就是整个组件的骨架圆帽盖在弧的交汇点上文字用ZIndex顶到最上层互相不打架。让它动起来静态环有了怎么变长把数值接到绑定上就行。Slider的Maximum默认就是 100把它的Value绑给一个圆环的宽度拖动滑块时圆环实时变化Ellipse Canvas.Left88 Canvas.Top88 Width64 Height64 Fill{Binding ElementNameknob, PathValue}/一行绑定不用写一行 C#。如果做的是指针式表盘思路换成旋转给指针Line挂RotateTransform围绕表盘中心设CenterX/CenterY作轴心动画驱动Angle属性即可。这些坑我替你踩过了只写了Canvas.Left忘了Canvas.TopTop 默认是 NaN元素会塌到 y0看起来像飞走了。显式写全两个方向。线条端点是方头和粗描边接茬难看加StrokeLineCapRound。读数被后面的图形盖住不是文字的问题是书写顺序的问题Canvas.ZIndex顶上去。想动态改弧长Data是Path的普通属性可以直接用绑定表达式拼命令串不必退回去手写StreamGeometry。画面里小图形很多把重复的短线段合并进一条Path的多个子路径里绘制对象少一半渲染压力小一半。完整组件就是上面三块拼在一起一个 240x240 的Canvas里面一条蓝色弧线Path、一个橙色中心圆帽Ellipse、一个百分比TextBlock再配一个Slider做数据源总共不到 20 行 XAML。最后三句话收束Canvas 只管钉坐标不管排列弧形走Path的A命令加粗描边不用任何高级技巧书写顺序加ZIndex决定谁压住谁。【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Avalonia 里 5 行 XAML 快速画出会动的环形进度条
Avalonia 里 5 行 XAML 快速画出会动的环形进度条【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia刚拿到一个跨平台指标面板的需求Windows、macOS、Linux 上同一个界面中间一个会随数值变长的环形进度条。用 Avalonia 图形绘制实现它只需要三样东西Canvas当画布Path的弧线命令画弧TextBlock放读数——全程纯 XAML四个平台渲染结果一致。下面按先定位、再画弧、后叠层、最后让它动的顺序拆开讲。Canvas 在布局里管什么Avalonia 的面板Panel负责摆放子元素的容器大多会自己做排列Canvas是例外它对子元素不做任何排列每个子元素落在哪完全由四个附加属性决定Canvas.Left/Canvas.Top左边缘距画板左边缘、上边缘距画板上边缘的像素数最常用Canvas.Right/Canvas.Bottom反过来从右缘、下缘量起适合贴边的元素同一方向写了两边时Left 和 Top 优先一个都没写元素就落在(0,0)。坐标系约定原点在画板左上角x 向右、y 向下增长与数学坐标相反单位是 DIP设备无关像素可写小数1 个单位对应 1 个逻辑像素。另外Canvas自身测量结果为 0不占父容器的布局空间可以直接盖在任何面板上当纯绘图层。XAML 画形状先选对元件画形状前先用 src/Avalonia.Controls/Shapes/ 目录选对元件元件干什么的关键属性Path弧线、任意轮廓本例主角Data命令字符串、Stroke、StrokeLineCapLine指针、分隔线、短刻度StartPoint、EndPointEllipse中心圆帽、圆点标记Width、Height、FillRectangle直角或圆角底板RadiusX、RadiusY、Fill没有万能控件只有最省事的控件环形进度用Path加粗描边中心圆帽用Ellipse读数用TextBlock。弧线用哪条路径命令环形的环就是一条圆弧。Data属性是一串路径命令Path 标记解析器源码四个命令覆盖本例全部需求M x,y把画笔移到起点这一笔不画L x,y从当前位置画直线到 (x,y)A rx ry rot large sweep x,y画一段圆弧到 (x,y)rx ry是椭圆半径large选 180° 以上的大弧还是小弧sweep选走向Z直线回到起点并闭合。取 240 宽画板圆心 (120,120)、半径 90。135° 方向左下的弧端点算出来是 (75.9,184.1)45° 方向右下是 (184.1,184.1)两个点正好都落在 y184.1 上Canvas Width240 Height240 Path DataM 75.9,184.1 A 90,90 0 0 1 184.1,184.1 Stroke#2196F3 StrokeThickness16 StrokeLineCapRound/ /Canvas0 0 1这段里最后一个 1 决定从 75.9 到 184.1 走上方半圆写成 0 会从下方绕过去方向正好反了。StrokeLineCapRound给两端加上圆形端帽和 16 粗细的弧连成圆头效果。线条和文字谁压住谁Canvas 子元素按书写顺序渲染后写的盖在先写的上面想精确控制就加Canvas.ZIndexPath Canvas.Left12 DataM 37.9,146.1 A 70,70 0 0 1 142.1,146.1 Stroke#2196F3 StrokeThickness12 StrokeLineCapRound/ Ellipse Canvas.Left104 Canvas.Top104 Width32 Height32 Fill#FF5722 Canvas.ZIndex1/ TextBlock Canvas.Left84 Canvas.Top112 Text62% FontSize18 Canvas.ZIndex2/弧线、中心圆帽、读数三行就是整个组件的骨架圆帽盖在弧的交汇点上文字用ZIndex顶到最上层互相不打架。让它动起来静态环有了怎么变长把数值接到绑定上就行。Slider的Maximum默认就是 100把它的Value绑给一个圆环的宽度拖动滑块时圆环实时变化Ellipse Canvas.Left88 Canvas.Top88 Width64 Height64 Fill{Binding ElementNameknob, PathValue}/一行绑定不用写一行 C#。如果做的是指针式表盘思路换成旋转给指针Line挂RotateTransform围绕表盘中心设CenterX/CenterY作轴心动画驱动Angle属性即可。这些坑我替你踩过了只写了Canvas.Left忘了Canvas.TopTop 默认是 NaN元素会塌到 y0看起来像飞走了。显式写全两个方向。线条端点是方头和粗描边接茬难看加StrokeLineCapRound。读数被后面的图形盖住不是文字的问题是书写顺序的问题Canvas.ZIndex顶上去。想动态改弧长Data是Path的普通属性可以直接用绑定表达式拼命令串不必退回去手写StreamGeometry。画面里小图形很多把重复的短线段合并进一条Path的多个子路径里绘制对象少一半渲染压力小一半。完整组件就是上面三块拼在一起一个 240x240 的Canvas里面一条蓝色弧线Path、一个橙色中心圆帽Ellipse、一个百分比TextBlock再配一个Slider做数据源总共不到 20 行 XAML。最后三句话收束Canvas 只管钉坐标不管排列弧形走Path的A命令加粗描边不用任何高级技巧书写顺序加ZIndex决定谁压住谁。【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考