Avalonia Canvas 画仪表盘3 段 XAML0 行 C#【免费下载链接】AvaloniaDevelop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The future of .NET UI项目地址: https://gitcode.com/GitHub_Trending/ava/Avalonia用 Avalonia 里的一个 Canvas 加四种基础图形做出一个带刻度、指针和读数的速度仪表盘。不写一行 C#不装任何额外依赖XAML 粘进任意窗口就能跑。先弄清 3 件事入口控件在哪画板是Canvas实现在 Canvas.cs直线、矩形、椭圆、路径这四种图形都放在 Shapes 目录里。原点和方向画板左上角是原点 (0,0)x 向右增大、y 向下增大和数学课的坐标系反着来。150,150就是向右 150、向下 150。单位是 DIPDIP 即设备无关像素跨平台统一的虚拟像素支持小数比如27.5。同一份 XAML 在 Windows、macOS、Linux 上渲染一致。Canvas 不做布局它不给子元素自动排列测量时自己报 0,0 大小所以能叠在任何面板上当绘图层。但反过来坐标不钉住子元素全堆在左上角。核心机制一个比喻讲透Canvas 像一块贴在窗口上的透明玻璃。玻璃本身没花纹、不占布局空间可以盖在任何面板上当绘图层。每个子控件是一张贴纸用Canvas.Left/Top手动按在玻璃某个位置。两张贴纸重叠时谁在上不是谁先贴的算而是ZIndex说了算数字大的在前。这个属性定义在 Visual.cs所有图形都能用。说白了Canvas 只回答一个问题在这个坐标上画什么。表盘、刻度、指针全是几何图形渲染器按 ZIndex 顺序遍历用Stroke描边用Fill填充内部。换个说法XAML 负责画什么Canvas 负责画在哪ZIndex 负责谁在前。上面是仓库里的一张几何渲染测试图两条弧线和表盘一样走的都是几何图形 填充/描边这套机制。API 速查一张表搞定名称干什么填什么值Canvas.Left/Canvas.Top钉住元素左边、上边位置像素数50Canvas.Right/Canvas.Bottom从右、下边缘反向锚定适合贴底元素像素数50StartPoint/EndPointLine 的两个端点点150,150Stroke/StrokeThickness轮廓颜色、粗细Black、2Fill/RadiusX/RadiusY内部颜色、圆角半径Red、12Data仅 Path任意轮廓命令串M 50,100 L 150,100 ZCanvas.ZIndex叠放层次大的在上整数1TextTextBlock读数文字60 km/hLeft 和 Right 同时设时 Left 生效Top 和 Bottom 同设时 Top 生效。你可能会问为什么不让两边平均一下——避免歧义每个方向只认一个。Data记住四个命令就够M移动画笔、L画直线、C贝塞尔曲线、Z闭合闭合后Fill才会填整个区域。从 0 到能跑三段递进照常新建一个 Avalonia 应用官方模板依赖都配好了把MainWindow.axaml里 Window 的内容换成下面每一段的 Canvas就能直接看效果。每段代码都是完整画板不用拼。八条刻度的坐标不是瞎编表盘中心 (150,150)刻度半径 1250° 方向就是 (150,25)45° 方向 125×0.707≈88所以拐角在 (239,61)其余六个点照此对称。铺底 打刻度这一段只画静态部分两个椭圆做出表盘八条线打出刻度。画到这儿仪表盘已经占了一半。!-- 外灰内白两个椭圆自然形成环形边框省掉描边 -- Canvas Width300 Height300 Ellipse Canvas.Left20 Canvas.Top20 Width260 Height260 Fill#D3D3D3/ Ellipse Canvas.Left28 Canvas.Top28 Width244 Height244 FillWhite/ !-- 刻度起点贴边、终点朝内收 15 像素比一整圈实线更好认 -- 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插一根会转的针这一步比上一段多了两个元素从中心伸到表盘边缘的红针和盖住针尾的中心红点。两者都用 ZIndex 显式声明层次后面无论怎么挪位置都不会被刻度压住。指针指向 (210,85)角度大约 35°正好对应后面 60 km/h 的读数指针朝哪都行它就是一根线段。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/ !-- 指针中心 (150,150) 到边缘ZIndex1 保证压在刻度之上 -- Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/ !-- 中心红点盖住针尾汇聚处ZIndex2 提到最前 -- Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ /Canvas贴上数字标签最后一步只多一行表盘下方放一个TextBlock显示速度。文字和图形互不干扰它在 Canvas 眼里也只是又一个子元素。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/ !-- 指针与中心点ZIndex 锁住层次指针不会掉到刻度下面 -- Line StartPoint150,150 EndPoint210,85 StrokeRed StrokeThickness4 Canvas.ZIndex1/ Ellipse Canvas.Left142 Canvas.Top142 Width16 Height16 FillRed Canvas.ZIndex2/ !-- 读数放在表盘下方文字只是 Canvas 的又一个子元素 -- TextBlock Canvas.Left120 Canvas.Top285 Text60 km/h FontSize14/ /Canvas到这儿仪表盘成型了椭圆、直线、红点、文字四种元素加上两层 ZIndex静态部分齐活。新手最常翻车的 3 个点这三个坑最多人栽看一行就能避开。不写坐标子元素叠成一层❌Ellipse Width80 Height80 FillRed/✅Ellipse Canvas.Left50 Canvas.Top50 Width80 Height80 FillRed/Canvas 不做布局Left/Top 缺了所有子元素全堆在原点 (0,0)看起来像没渲染。Left 和 Right 同设Right 被忽略❌Rectangle Canvas.Left50 Canvas.Right50 Width100/✅Rectangle Canvas.Left50 Width100/同设时 Left 生效、Right 直接无视Top 和 Bottom 同理。每个方向只写一个。靠 XAML 顺序调层次一挪全乱❌ 把指针挪到刻度前面一行结果指针被刻度盖住 ✅ 指针显式加Canvas.ZIndex1默认后写的在上但元素一旦移动顺序就跟着乱了重要层次用 ZIndex 钉死。下一步能玩什么给指针挂上RotateTransform用DoubleAnimation驱动AngleProperty改角度仪表盘指针就能随读数真实摆动这条能力只管转图形大小不变。把Slider的Value绑到某个图形的Width和Height拖动滑块看几何实时变化这就是数据驱动图形的入口。仪表盘到这里就算跑通了。坐标系、层次、绑定这几套机制在 Avalonia 其他控件上完全通用这套 Canvas 经验可以整个带走。【免费下载链接】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），仅供参考