I'm trying to replicate the signature pad control at this page: https://docs.telerik.com/devtools/maui/controls/signaturepad/events
On the control it shows an 'X' button to clear the signature but the XAML does not seem to include this or set any property etc. If I copy the example XAML into a View it also does not show up (tested in Android and Windows emulator).
So how is this rendered? Is there a property the XAML is missing or did you do some fancy XAML with a separate 'X' button overlaid?
Either way, that page need to be updated either with the correct XAML or to make it clear how the 'X' is being rendered.
Thanks,
Mike
1 Answer, 1 is accepted
Hello Mike,
Thank you for your interest in Telerik SignaturePad control.
The complete code from the example can be found here: https://github.com/telerik/maui-samples/blob/main/Samples/SdkBrowser/Examples/SignaturePadControl/EventsCategory/EventsExample/Events.xaml
There is a clear button that is positioned above the control.
I am pasting the code here:
<Grid RowDefinitions="Auto,*">
<Label x:Name="logInfo"/>
<Grid Grid.Row="1">
<!-- >> signaturepad-events -->
<telerik:RadSignaturePad x:Name="signaturePad" BorderThickness="1"
BorderColor="LightGray"
StrokeStarted="RadSignaturePad_StrokeStarted"
StrokeCompleted="RadSignaturePad_StrokeCompleted"
Cleared="RadSignaturePad_Cleared"/>
<!-- << signaturepad-events -->
<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>This clear button command executes the SignaturePad ClearCommand.
The documentation page will be updated. Thank you for your feedback on this.
Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thank you Mike for your feedback.
Let me explain how the documentation is organized: We write the articles per feature, where applicable and use same documentation structure for each control. This way is easier for the users to navigate to different controls and check different features.
The Overview explains what is the main usage of the control and its key features. You can check the main features the control provides in the Overview article -> Key Features section.
The Getting started article explains the main steps you need to follow to add the control to your project -> how to start using it.
And other articles explain the separate features the control has: features like sorting, filtering, grouping, expand collapse states, events, commands, styling, etc.
Having control's all features and all examples code in just one article is confusing. For example, we have demos with many classes, converters, xaml, ViewModels, and having all these in just one article will grab the focus from the separate feature explanation.
The examples in the documentation are from the SDK Browser demo application: https://docs.telerik.com/devtools/maui/demos-and-sample-apps/sdkbrowser-app The examples also follow the docs structure. Examples for each control are separate per feature.
I hope with this explanation, you will navigate easier in the documentation. If you have any additional feedback, please let me know.