.NET MAUI SignaturePad Events

The SignaturePad for .NET MAUI exposes the following events:

• StrokeStarted event is raised when a new stroke is started. The StrokeStarted event handler receives two parameters:

  • The Sender which is of type Telerik.Maui.Controls.RadSignaturePad.
  • and EventArgs

• StrokeCompleted event is raised when a new stroke is completed. The StrokeCompleted event handler receives two parameters:

  • The Sender which is of type Telerik.Maui.Controls.RadSignaturePad.
  • and EventArgs

• Cleared event is raised when the surface of Telerik.Maui.Controls.RadSignaturePad is cleared.

Example

The example contains an X Button, two Labels and a RadSignaturePad.

1. The control's definition in XAML:

<Grid RowDefinitions="Auto,*">
    <Label x:Name="logInfo"/>
    <Grid Grid.Row="1">
        <telerik:RadSignaturePad x:Name="signaturePad" BorderThickness="1" 
                                 BorderColor="LightGray"
                                 StrokeStarted="RadSignaturePad_StrokeStarted"
                                 StrokeCompleted="RadSignaturePad_StrokeCompleted"
                                 Cleared="RadSignaturePad_Cleared"/>
        <Button x:Name="clearButton" 
                Text="X"
                BackgroundColor="Transparent" 
                Command="{Binding Source={x:Reference signaturePad}, Path=ClearCommand}" 
                HorizontalOptions="End" 
                VerticalOptions="Start" 
                Margin="0,10,10,0">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="DarkGray" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="LightGray" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>

        <Label x:Name="timeStampLabel" 
               HorizontalOptions="End"
               VerticalOptions="End" 
               Margin="0,0,10,10"/>
    </Grid>
</Grid>

2. Add the following namespace:

3. Add the events:

The RadSignaturePad.StrokeStarted event. When stroke starts we will display a timestamp using a Label:

private void RadSignaturePad_StrokeStarted(object sender, EventArgs e)
{
    this.timeStampLabel.Text = DateTime.Now.ToString();
    this.logInfo.Text = "";

}

The RadSignaturePad.StrokeCompleted event. When stroke completes the timestamp Label text is updated.

private void RadSignaturePad_StrokeCompleted(object sender, EventArgs e)
{
    this.timeStampLabel.Text = DateTime.Now.ToString();
}

The SignaturePad.Cleared event, When Cleared event is fired, Label with Text="Cleared" is displayed.

private void RadSignaturePad_Cleared(object sender, EventArgs e)
{
    this.logInfo.Text = "Cleared";
    this.timeStampLabel.Text = "";
}

For the SignaturePad Events example refer to the SDKBrowser Demo Application.

See Also

• Configure the Signature
• Commands
• Save Signature