Search code examples
c#xamlxamaringeometryfigure

Can I draw circles, ellipses or square in XAML in a Xamarin Project?


Good, I want to draw circles, squares, ellipses and triangles in a Xamarin project but I can not find how, in UWP it can be done like this:

<StackPanel>
     <Ellipse Fill="Yellow"
              Height="100"
              Width="200"
              StrokeThickness="2"
              Stroke="Black"/>
</StackPanel>

the question is that I do not know if I need a NuGet package or some complement for it in Xamarin


Solution

  • If you want to draw circle (only achieved by code), you could refer to the following code.

    public class SimpleCirclePage : ContentPage
    {
        public SimpleCirclePage()
        {
    
    
            SKCanvasView canvasView = new SKCanvasView();
            canvasView.PaintSurface += OnCanvasViewPaintSurface;
            Content = canvasView;
        }
    
        void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;
    
            canvas.Clear();
    
            SKPaint paint = new SKPaint
            {
                Style = SKPaintStyle.Stroke,
                Color = Color.Red.ToSKColor(),
                StrokeWidth = 10
            };
            canvas.DrawCircle(info.Width / 3, info.Height / 2, 100, paint);
    
        }
    }
    

    Details:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/basics/circle

    If you want to use XAML and code to draw Ellipse,you could refer to the following code.

    In XAML

     <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr- namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.Basics.EllipseFillPage"
             Title="Ellipse Fill">
    
    <skia:SKCanvasView PaintSurface="OnCanvasViewPaintSurface" />
    

    code

    public partial class EllipseFillPage : ContentPage
    {
        public EllipseFillPage()
        {
            InitializeComponent();
        }
    
        void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;
    
            canvas.Clear();
    
            float strokeWidth = 5;
            float xRadius = (info.Width - strokeWidth) / 3;
            float yRadius = (info.Height - strokeWidth) / 3;
    
            SKPaint paint = new SKPaint
            {
                Style = SKPaintStyle.Stroke,
                Color = SKColors.Black,
                StrokeWidth = strokeWidth
            };
            canvas.DrawOval(info.Width / 2, info.Height / 2, xRadius, yRadius, paint);
        }
    }
    

    If you want to draw sharps ways that only use XAML (like in UWP), you could download this plugin .