Avalonia Canvas：用 XAML 画出跨平台图形仪表盘

Avalonia Canvas用 XAML 画出跨平台图形仪表盘【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/AvaloniaAvalonia 用同一套 XAML 在 Windows、macOS、Linux 上渲染一致界面但仪表盘这类自由图形要靠 Avalonia Canvas 画布手动摆坐标。读完本文你能不写一行 C#仅用 XAML 搭出带表盘、刻度、指针和读数的速度仪表盘。最小示例Avalonia Canvas 画布怎么配置先把画布和几个基础图形放进任意 Avalonia 窗口。新建 Avalonia 项目后把下面这段贴进窗口.axaml文件的根元素内即可运行Canvas Width300 Height300 Background#F0F0F0 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ Line StartPoint150,150 EndPoint150,45 StrokeBlack StrokeThickness3/ Path DataM 120,260 L 150,230 L 180,260 Z Fill#4EC9B0 StrokeBlack/ TextBlock Canvas.Left115 Canvas.Top140 Text0 FontSize20/ /Canvas跑起来你会看到灰色圆环垫底白色圆面居中一条黑色竖线从中心指向上边缘下方是绿色小三角数字压在圆心。注意每个子元素都靠Canvas.Left和Canvas.Top钉住位置尺寸由自己的Width、Height决定。Canvas不做任何自动排列Canvas.cs 里的ArrangeChild只是照坐标摆放。定位规则与图形参数说明坐标原点在画布左上角x 轴向右、y 轴向下单位是 DIP设备无关像素支持小数。定位只用四个附加属性属性作用方向定位基准Canvas.Left水平左边缘到画布左缘的距离Canvas.Top垂直上边缘到画布上缘的距离Canvas.Right水平右边缘到画布右缘的距离Canvas.Bottom垂直下边缘到画布下缘的距离两条规则要记住同一方向Left和Right都设时Left生效Top和Bottom都设时Top生效四个都不设元素落在左上角。另外画布自身测量时返回0,0不占父容器布局空间可以放心叠在其他面板上当纯绘图层。常用图形集中在 Shapes 目录关键属性如下图形关键属性说明LineStartPoint、EndPoint两点间直线可当刻度和指针RectangleRadiusX、RadiusY直角矩形设圆角半径变圆角EllipseWidth、Height椭圆宽高相等即正圆PathData路径命令字符串画任意轮廓Path的Data记住四个命令就够M移动画笔到起点不画线L画直线到指定点C画三次贝塞尔曲线带两对控制点Z直线连回起点并标记闭合影响Fill的填充范围。上图是仓库里的渲染测试基线展示Data中曲线命令的描边效果。同一份几何数据在所有平台的渲染结果一致。仪表盘搭建表盘、刻度、指针、读数以300×300画布为例中心点是 (150,150)。这一步做表盘和刻度两个同心Ellipse叠出环形边框外圈灰、内圈白8 条Line沿 0°、45°、90° 等角度摆开每条长15像素。Canvas Width300 Height300 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ Line StartPoint150,25 EndPoint150,40 StrokeBlack StrokeThickness2/ Line StartPoint239,61 EndPoint228,72 StrokeBlack StrokeThickness2/ Line StartPoint275,150 EndPoint260,150 StrokeBlack StrokeThickness2/ Line StartPoint239,239 EndPoint228,228 StrokeBlack StrokeThickness2/ Line StartPoint150,275 EndPoint150,260 StrokeBlack StrokeThickness2/ Line StartPoint61,239 EndPoint72,228 StrokeBlack StrokeThickness2/ Line StartPoint25,150 EndPoint40,150 StrokeBlack StrokeThickness2/ Line StartPoint61,61 EndPoint72,72 StrokeBlack StrokeThickness2/ /Canvas跑起来你会看到 8 条短刻度均匀贴在表盘边缘。45° 方向端点写成239,61是中心向外推约 125 像素再减去 15 像素刻度长算出来的。下一步做指针和读数红色Line从中心指向表盘中心压一个红点盖住线条汇聚处下方TextBlock显示速度值。把下面三段追加到上面画布的闭合标签之前即可。Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/ Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ TextBlock Canvas.Left112 Canvas.Top282 Text60 km/h FontSize14/此时指针压在刻度之上文字与图形各管各的互不干扰。进阶与避坑Avalonia Canvas 的 ZIndex、绑定与性能用ZIndex控层别挪 XAML 行序。ZIndex定义在Visual上见 Visual.cs所有图形都能用值大的渲染在上层。写Canvas.ZIndex3就能压过同坐标的其他元素图层调整不用动元素顺序。把指针角度绑到数据上。给指针Line挂RotateTransform把Angle绑到滑块指针随数值摆动Line StartPoint150,150 EndPoint150,60 StrokeRed StrokeThickness4 Line.RenderTransform RotateTransform CenterX150 CenterY150 Angle{Binding ElementNameslider, PathValue}/ /Line.RenderTransform /Line滑块从0拖到180指针从 12 点方向扫到 6 点方向中心点由CenterX、CenterY指定为表盘圆心。密集刻度合并进单个Path。上百条Line会明显拖慢重绘。把全部刻度写进一条Data多个M...L...子路径绘制对象数从上百降到 1。更复杂的轮廓在代码里用StreamGeometry构建避免反复拼接字符串。速记原点左上角x 向右 y 向下单位 DIP小数可用Left/Top钉位置Right/Bottom贴边冲突时Left/Top胜出Line画线、Rectangle成面、Ellipse画圆、Path兜底轮廓同坐标压层靠ZIndex值大在上密集小元素合并进一个Path别堆Line下一步把TextBlock的Text绑到 ViewModel 的速度属性再给指针的RotateTransform.Angle挂一个DoubleAnimation就能做出随数值平滑回弹的仪表盘指针。【免费下载链接】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），仅供参考