企业官网建设流程全解析

Avalonia 图形绘制：3 段增量 XAML 拼出完整环形进度条

【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia

Avalonia 图形绘制只需要纯 XAML，不写一行 C#：一个Canvas画板加Arc、Ellipse、TextBlock三种基础元素，就能画出带轨道和百分比读数的环形进度条，在 Windows、macOS、Linux 上跨平台一致渲染。

成品先行

下面是一份可直接粘进任意 Avalonia 窗口的完整代码：

<!-- 环形进度条：65% 进度，纯 XAML 实现 --> <Canvas Width="300" Height="300"> <!-- 底轨道：灰色完整圆环 --> <Arc Canvas.Left="24" Canvas.Top="24" Width="252" Height="252" Stroke="#D8D8D8" StrokeThickness="16" StartAngle="0" SweepAngle="360"/> <!-- 白色圆心 --> <Ellipse Canvas.Left="40" Canvas.Top="40" Width="220" Height="220" Fill="White"/> <!-- 进度弧：顺时针扫过 234 度，即 65% --> <Arc Canvas.Left="24" Canvas.Top="24" Width="252" Height="252" Stroke="#4EC9B0" StrokeThickness="16" StartAngle="0" SweepAngle="234" Canvas.ZIndex="1"/> <!-- 读数 --> <TextBlock Canvas.Left="118" Canvas.Top="136" Text="65%" FontSize="32"/> <TextBlock Canvas.Left="114" Canvas.Top="180" Text="加载进度" FontSize="13" Foreground="Gray"/> </Canvas>

画面构成一眼看穿：灰色底环兜底，青色弧段从右侧 3 点钟方向顺时针铺满 65%，圆心白底上压着两行文字。

概念对齐：一张表看懂坐标系与定位属性

最小示例，感受一下Arc的角度：

<Canvas Width="200" Height="200"> <!-- 从 0 度顺时针画 90 度，正好是一个 1/4 圆弧 --> <Arc Width="160" Height="160" Stroke="Red" StrokeThickness="10" StartAngle="0" SweepAngle="90"/> </Canvas>

分步还原：三步拼出进度环

铺底轨道与白色圆心

先立一个 300x300 的Canvas，它自身不做任何排列，只负责把子元素钉在坐标上（src/Avalonia.Controls/Canvas.cs）；SweepAngle="360"时Arc会退化成一整圈环。

<Canvas Width="300" Height="300"> <!-- SweepAngle=360 画一整圈，当灰色底轨 --> <Arc Canvas.Left="24" Canvas.Top="24" Width="252" Height="252" Stroke="#D8D8D8" StrokeThickness="16" StartAngle="0" SweepAngle="360"/> <!-- 内圈白色圆心，盖住轨道中间的空洞 --> <Ellipse Canvas.Left="40" Canvas.Top="40" Width="220" Height="220" Fill="White"/> </Canvas>

跑起来会看到：一圈灰色粗环套着一个白色圆盘。

叠出进度弧

进度弧和底轨共用同一组坐标，只靠SweepAngle控制长短；百分比换算角度记住一行：角度 = 百分比 x 360 / 100，65% 就是 234 度。

<!-- 与底轨同坐标，扫 234 度覆盖 65%；ZIndex 保证压在灰环之上 --> <Arc Canvas.Left="24" Canvas.Top="24" Width="252" Height="252" Stroke="#4EC9B0" StrokeThickness="16" StartAngle="0" SweepAngle="234" Canvas.ZIndex="1"/>

跑起来会看到：青色弧段从 3 点钟方向沿顺时针铺过 234 度，灰环只露出剩下的 35%。

压上百分比读数

TextBlock直接钉在圆心附近，字号大一眼可读；文字层与图形层互不干扰。

<!-- 数字压在圆心，标签垫在下面 --> <TextBlock Canvas.Left="118" Canvas.Top="136" Text="65%" FontSize="32"/> <TextBlock Canvas.Left="114" Canvas.Top="180" Text="加载进度" FontSize="13" Foreground="Gray"/>

跑起来会看到：圆心出现大号 "65%"，下方一行小灰字标注含义，整图完成。

进阶三招

1. 叠放层次：ZIndex挂在Visual基类上，所有图形通吃，数值大的渲染在上层，同坐标竞争时靠它定胜负（src/Avalonia.Base/Visual.cs）。
2. 让弧段跟着数据动：把SweepAngle绑到Slider的Value，写{Binding ElementName=slider, Path=Value, Converter={StaticResource PercentToAngle}}配一个换算器，拖动滑块弧段实时伸缩（src/Avalonia.Controls/Slider.cs）。
3. 渲染性能：多个短弧刻度别各建一条Arc，合并进一个Path的Data，绘制对象从 N 个减到 1 个；复杂轮廓用StreamGeometry流式构建，少做字符串拼接（src/Avalonia.Base/Media/StreamGeometry.cs）。

速记与延伸

• 左上原点，x 右 y 下，单位 DIP。
• 角度 = 百分比 x 360 / 100。
• 同坐标竞争，ZIndex大的在上。

延伸方向：给进度弧挂RenderTransform，用RotateTransform.AngleProperty配DoubleAnimation（src/Avalonia.Base/Media/RotateTransform.cs），环就能像加载指示器一样持续旋转。

【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia