Question re RadSignaturePad example XAML

1 Answer 58 Views
SignaturePad
Mike
Top achievements
Rank 1
Mike asked on 06 May 2024, 05:37 AM | edited on 06 May 2024, 05:45 AM

 

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

Sort by
0
Didi
Telerik team
answered on 06 May 2024, 06:20 AM

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.

Mike
Top achievements
Rank 1
commented on 06 May 2024, 11:55 PM

Thanks Didi, that explains it.  The issue I have with the documentation is there are so many pages for each control - it would be so much simpler if Telerik could just have one page that has ALL the details, including the sample code.
Didi
Telerik team
commented on 07 May 2024, 07:12 AM

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. 

Tags
SignaturePad
Asked by
Mike
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or