How to draw a line or create any image

[arunvishwa24]

I used below code but it's not working (can't see any line drawn while no error) if anything missing please let me know

  public class MyFirstDrawing : IDrawable
  {
      public void Draw(ICanvas canvas, RectF dirtyRect)
      {
          canvas.StrokeColor = Colors.Red;
          canvas.StrokeSize = 6;
          canvas.DrawLine(10, 10, 90, 100);
      }
  }

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:drawable="clr-namespace:MauiAppD"
             x:Class="MauiAppD.MainPage">

    <ContentPage.Resources>
        <drawable:MyFirstDrawing x:Key="MyDrawable" />
    </ContentPage.Resources>
--
--
</ContentPage>

[stephenquan]

An IDrawable must be used with a GraphicsView. For more information see https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/graphicsview?view=net-maui-8.0.

<GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />

I usually create an object that subclasses GraphicsView with an IDrawable interface. This will simplify the XAML usage. It also simplifies access between your object's bindable properties (including GraphicsView's Width and Height) with your IDrawable.

// MyFirstDrawing.cs
public class MyFirstDrawing : GraphicsView, IDrawable
{
    public MyFirstDrawing() { Drawable = this; }
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
#region Example of IDrawable accessing bindable properties from GraphicsView
        canvas.FillColor = Colors.DarkBlue;
        canvas.FillRectangle(0, 0, Width, Height);
#endregion
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);
    }
}

<!-- MainPage.xaml -->
<local:MyFirstDrawing HeightRequest="300" WidthRequest="400" />

However, I recommend against using GraphicsView for simple graphics.

A much better starting point would be with Shapes https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/shapes/?view=net-maui-8.0, particularly Path https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/shapes/path?view=net-maui-8.0 and the Path markup syntax https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/shapes/path-markup-syntax?view=net-maui-8.0.

<Path
    Stroke="Red"
    StrokeThickness="6"
    Data="M 10 10 L 90 100"
    HeightRequest="300"
    WidthRequest="400" />