Xaml 在SkiaSharp（UWP）中正确对齐UI元素

我正在尝试使用SkiaSharp以循环方式对齐几个按钮。我的代码如下所示

 <skia:SKXamlCanvas x:Name="test" PaintSurface="Test_OnPaintSurface"   />

代码隐藏

   private void Test_OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
    {
        // the canvas and properties
        var canvas = e.Surface.Canvas;
        // get the screen density for scaling
        var display = DisplayInformation.GetForCurrentView();
        var scale = display.LogicalDpi / 96.0f;
        var scaledSize = new SKSize(e.Info.Width / scale, e.Info.Height / scale);

        // handle the device screen density
        canvas.Scale(scale);

        // make sure the canvas is blank
        canvas.Clear(SKColors.Transparent);

        // draw some text
        var paintSmallCircle = new SKPaint
        {
            Color = SKColors.CornflowerBlue,
            IsAntialias = true,
            Style = SKPaintStyle.Fill,
            TextAlign = SKTextAlign.Center,
            TextSize = 24
        };
        var paintCircle = new SKPaint
        {
            Color = SKColors.LightGray,
            IsAntialias = true,
            Style = SKPaintStyle.Fill,
            TextAlign = SKTextAlign.Center,
            TextSize = 24
        };

        var coord = new SKPoint(
            scaledSize.Width / 2,
            (scaledSize.Height) / 2);


        canvas.DrawCircle(coord, 120, paintCircle);
     
        int r = 100;

        int angle = 90;
        for (int i = 0; i < 12; i++)
        {
            double x1 = scaledSize.Width / 2 + r * Math.Cos(Math.PI * angle / 180.0) ;
            double y1 = scaledSize.Height / 2 - r * Math.Sin(Math.PI * angle / 180.0) ;

           var  coord1 = new SKPoint((float)  x1, (float)y1);
             canvas.DrawCircle(coord1, 10, paintSmallCircle);
             Button btn = new Button { Content = i, Height = 25, Width = 25, };
             btn.SetValue(SKXamlCanvas.LeftProperty, coord1.X);
             btn.SetValue(SKXamlCanvas.TopProperty, coord1.Y);
             test.Children.Add(btn);

             angle = angle - 30;
        }

    }

漆面上的私有无效测试（对象发送器，SKPAINTSURFACHEEVENTARGS e） { //画布和属性 var canvas=e.Surface.canvas； //获取用于缩放的屏幕密度 var display=DisplayInformation.GetForCurrentView（）； 变量刻度=display.LogicalDpi/96.0f； var scaledSize=新SKSize（e.Info.Width/scale，e.Info.Height/scale）； //处理设备屏幕密度 画布。比例（比例）； //确保画布是空白的 帆布。透明（SKColors。透明）； //画一些文字 var paintSmallCircle=新SKPaint { Color=SKColors.CornflowerBlue， Isatarias=正确， Style=SKPaintStyle.Fill， TextAlign=SKTextAlign.Center， TextSize=24 }; var paintCircle=新SKPaint { Color=SKColors.LightGray， Isatarias=正确， Style=SKPaintStyle.Fill， TextAlign=SKTextAlign.Center， TextSize=24 }; var coord=新的SKPoint( 缩放大小。宽度/2， （缩放尺寸、高度）/2）； 帆布画圈（coord，120，paintCircle）； int r=100； 内倾角=90； 对于（int i=0；i<12；i++） { double x1=缩放尺寸。宽度/2+r*数学系数（数学系数*角度/180.0）； 双y1=缩放尺寸。高度/2-r*Math.Sin（Math.PI*角度/180.0）； var coord1=新SKPoint（（浮点）x1，（浮点）y1）； 画布.画圈（坐标1，10，画圈）； 按钮btn=新按钮{内容=i，高度=25，宽度=25，}； SetValue（SKXamlCanvas.LeftProperty，coord1.X）； btn.SetValue（SKXamlCanvas.TopProperty，coord1.Y）； test.Children.Add（btn）； 角度=角度-30； } } 有了这段代码，我能够正确地画出蓝色的圆圈，但是按钮对齐错误。我如何解决这个问题？ 现在我的输出是这样的

 <skia:SKXamlCanvas x:Name="test" PaintSurface="Test_OnPaintSurface"   />

正如您所看到的，蓝色的小圆圈是正确对齐的，但不是按钮

---

预期的行为是按钮出现在渲染蓝色圆圈的同一位置

点是您将

按钮的
属性放置在左侧
&
顶部

当您使用canvas.DrawCircle（coord1，10，paintSmallCircle）时

要绘制一个

圆

，中心点是

coord1

然后在

圆的中心点

绘制

按钮

s

左

和

顶

。

因此，您可以使用

btn.SetValue(SKXamlCanvas.LeftProperty, coord1.X - 25 /2);
btn.SetValue(SKXamlCanvas.TopProperty, coord1.Y - 25 / 2);

25是您的

按钮的
高度和
宽度

看看结果