Signature Pad Using .NET MAUI Community Toolkit

Introduction

.NET MAUI is a powerful platform for building cross-platform mobile applications, and with the right tools and resources, it's easy to add signature pad functionality to your app. In this tutorial, we'll walk you through the steps of the signature pad in .NET MAUI using .NET MAUI Community Toolkit.

 

• Project Setup
• Implementation
• Demo
• Full Code
• Download Code

Project Setup

• Launch Visual Studio 2022, and in the start window, click Create a new project to create a new project.
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
• In the Configure your new project window, name your project, choose a suitable location for it, and click the Next button:
• In the Additional information window, click the Create button:
• Once the project is created, we can see the Android, iOS, Windows, and other running options in the toolbar. Press the emulator or run button to build and run the app

Implementation of .NET MAUI

.NET MAUI Community Toolkit is the key to achieving drawing in our App is to use Community.ToolKit.Maui NuGet package. It is a collection of reusable elements such as animations, and behavior converters, among others, for developing applications for iOS, Android, macOS, and WinUI using MAUI.

How to Install .NET MAUI Community Toolkit?

• Install the .NET MAUI Community Toolkit NuGet package on your .NET MAUI application.
• Now initialize the plugin. Go to your MauiProgram.cs file. In the CreateMauiApp method, place in the ".UseMauiApp<App>()" line, and just below it, add the following line of code.

var builder = MauiApp.CreateBuilder();
builder
	.UseMauiApp<App>()
	.UseMauiCommunityToolkit()
	.ConfigureFonts(fonts =>
	{
		fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
	});

DrawingView's properties

• WidthRequest and HeightRequest- These properties help to set the width and height, respectively.
• Remember that you must add both properties to your DrawingView for it to be displayed correctly in your app.
• LineColor- It's the color of the drawing line.
• LineWidth- It's the width of the drawing line.
• IsMultiLineModeEnabled- By default, the DrawingView allows only one stroke to be drawn at a time. The IsMultiLineModeEnabled property allows you to change this and draw multiple lines simultaneously. It receives Bool values. To activate it, you need to set the value to True.

Cleaning the DrawView

If you want to clear the DrawView, add the following.

DrawBoard.Lines.Clear();

The clear function can be called using the button click event, like below.

<Button Text="Clear Board" 
        Clicked="Button_Clicked"/>

void Button_Clicked(System.Object sender, System.EventArgs e)
{
	DrawBoard.Lines.Clear();
}

Previewing the signature or drawing from DrawView

Add an Image control to your XAML.

<Image x:Name="ImageView"
       WidthRequest="200"
       HeightRequest="200"/>

 Add an event for DrawingLineCompleted in the code behind.

private void DrawBoard_DrawingLineCompleted(System.Object sender, CommunityToolkit.Maui.Core.DrawingLineCompletedEventArgs e)
{
	ImageView.Dispatcher.Dispatch(async() =>
	{
		var stream = await DrawBoard.GetImageStream(300, 300);
		ImageView.Source = ImageSource.FromStream(() => stream);
	});
}

Full Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
             x:Class="MauiDrawingApp.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <mct:DrawingView x:Name="DrawBoard"
                   LineColor="Black"
                   LineWidth="5" 
                   HorizontalOptions="FillAndExpand"
                   VerticalOptions="FillAndExpand"
                             HeightRequest="250"
                   IsMultiLineModeEnabled="True"
                   DrawingLineCompleted="DrawBoard_DrawingLineCompleted"
                   BackgroundColor="AliceBlue"/>

            <Image x:Name="ImageView"
                    HorizontalOptions="FillAndExpand"
                   VerticalOptions="FillAndExpand"
                   BackgroundColor="White"
       HeightRequest="200"/>

            <Button Text="Clear Board" 
                    Clicked="Button_Clicked"/>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

namespace MauiDrawingApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
	}
    private void DrawBoard_DrawingLineCompleted(System.Object sender, CommunityToolkit.Maui.Core.DrawingLineCompletedEventArgs e)
    {
        ImageView.Dispatcher.Dispatch(async() =>
        {
            var stream = await DrawBoard.GetImageStream(300, 300);
            ImageView.Source = ImageSource.FromStream(() => stream);
        });
    }
    void Button_Clicked(System.Object sender, System.EventArgs e)
    {
        DrawBoard.Lines.Clear();
    }
}

using Microsoft.Extensions.Logging;
using CommunityToolkit.Maui;
namespace MauiDrawingApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Summary

You can download the code from GitHub. If you liked this article and it is helpful to you, do like, share the article & star the repository on GitHub. If you have any doubts, feel free to post a comment.