[Proposal] DrawingView

DrawingView

• Proposed
• Prototype
• Implementation
  • iOS Support
  • Android Support
  • macOS Support
  • Windows Support
• Unit Tests
• Sample
• Documentation

Summary

Allows you to draw one or multiple lines on a canvas

Detailed Design

DrawingView.shared.cs

public class DrawingView : View
{
  public static readonly BindableProperty ClearOnFinishProperty;
  public static readonly BindableProperty MultiLineModeProperty;
  public static readonly BindableProperty LinesProperty;
  public static readonly BindableProperty DrawingLineCompletedCommandProperty;
  public static readonly BindableProperty DefaultLineColorProperty;
  public static readonly BindableProperty DefaultLineWidthProperty;
  
  public event EventHandler<DrawingLineCompletedEventArgs>? DrawingLineCompleted;
  
  public Color DefaultLineColor { get; set; }
  public float DefaultLineWidth { get; set; }
  public ICommand? DrawingLineCompletedCommand { get; set; }
  public ObservableCollection<Line> Lines { get; set; }
  public bool MultiLineMode { get; set; }
  public bool ClearOnFinish { get; set; }
  
  public Stream GetImageStream(double imageSizeWidth, double imageSizeHeight);
  public static Stream GetImageStream(IEnumerable<Line> lines, Size imageSize, Color backgroundColor);
}

Usage Syntax

XAML Usage

<views:DrawingView x:Name="DrawingViewControl" 
   BackgroundColor="LightGray" 
   HeightRequest="200"
   DefaultLineColor="Red"
   DefaultLineWidth="3"
   Lines="{Binding Lines, Mode=TwoWay}"
   ClearOnFinish="{Binding Source={x:Reference ClearOnFinish}, Path=IsToggled}"
   MultiLineMode="{Binding Source={x:Reference MultiLineMode}, Path=IsToggled}"/>

C# Usage

new DrawingView
{
   BackgroundColor = Colors.LightGray,
   HeightRequest = 200,
   DefaultLineColor = Colors.Red,
   DefaultLineWidth = 3
}.Bind(DrawingView.Lines, nameof(ViewModel.Lines))
 .Bind(DrawingView.ClearOnFinish, nameof(ViewModel.ShouldClear))
 .Bind(DrawingView.MultiLineMode, nameof(ViewModel.ShouldAllowMultiLine));

Alternatives

Might be a duplicate of Microsoft.Maui.Graphics?

Unresolved Questions

Is DrawingView still necessary? Or has it been superseded by Microsoft.Maui.Graphics?

[jsuarezruiz]

I think could be part of the Toolkit or maybe also of .NET MAUI Graphics. What does make sense to me is directly use Maui Graphics in GraphicsView. Could simplified the code and at the end benefits also Graphics.

[msftbot[bot]]

Reopening Proposal.

Only Proposals moved to the Closed Project Column and Completed Project Column can be closed.