Align UI lements correctly in SkiaSharp (UWP)

Question

I am trying to align a few buttons in a circular manner using SkiaSharp. My code looks like this

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

Code behind

   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;
        }

    }

With this code, I am able to draw Blue circles correctly, but the button alignment comes wrong. How can I solve this issue? right now my output looks like this

As you can see blue small circles are aligned correctly, but not buttons.

The expected behavior is that buttons come in the same place where blue circles are rendered

Answer 1

The point is you place the Button's Left & Top property.

When you use canvas.DrawCircle(coord1, 10, paintSmallCircle); to draw a Circle, the center point is coord1.

And you draw the Buttons Left & Top at the center point of the Circle.

So you can draw Button using

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

25 is the Height and Width of your Button.

See the result.