Signatures using DrawingView in MAUI .NET?

Question

Hello,
I want a signature pad to save images locally after a submit button click event in MAUI .NET 8 Android 34. Can you provide a solution?

Answer 1

Hello,

You mean DrawingView in CommunityToolKit package, right? And you can save the image using FileSaver in that package.

Please refer to the following code:

XML

<toolkit:DrawingView
Lines="{Binding Lines, Mode=TwoWay}"
BackgroundColor="Yellow"
HeightRequest="200"
LineColor="Red"
IsMultiLineModeEnabled="true"

LineWidth="5"/>

Binding Lines

public ObservableCollection<IDrawingLine> Lines { get; } = [];
   public MainPage()
   {
       InitializeComponent();
       this.BindingContext = this;
   }

Save event

private async void OnCounterClicked(object sender, EventArgs e)
{
    // save image
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(120));// if you don't save the image within 120 seconds, it will be canceled
    var cancellationToken = cts.Token;
 
    try
    {
        await using var stream = await DrawingView.GetImageStream(Lines, new Size(1920, 1080), Brush.Blue, cancellationToken);// new size and blue background
        await Permissions.RequestAsync<Permissions.StorageRead>().WaitAsync(cancellationToken);// request permission to save
        await Permissions.RequestAsync<Permissions.StorageWrite>().WaitAsync(cancellationToken);
        var fileSaverResult = await FileSaver.Default.SaveAsync("drawing.png", stream, cancellationToken);
        if (fileSaverResult.IsSuccessful)
        {
            await Toast.Make($"The file was saved successfully to location: {fileSaverResult.FilePath}").Show(cancellationToken);
        }
        else
        {
            await Toast.Make($"The file was not saved successfully with error: {fileSaverResult.Exception.Message}").Show(cancellationToken);
        }
 
        
    }
    catch (PermissionException ex)
    {
        await Toast.Make($"Save Failed: {ex.Message}").Show(cancellationToken);
    }
    catch (InvalidOperationException)
    {
        await Toast.Make("Save Failed: No Lines Drawn").Show(cancellationToken);
    }
 
}

Note that CommunityToolKit package is a third-party tool. I understand that you want to run the app on Android 34, when your app targets Android API level 34 and up, no additional permissions are required. If your target device API level is less than 33 add permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.