Dessiner et enregistrer des signatures dans les applications Xamarin.Forms

janvier 25, 2022

Bonjour à tous 🙋‍♀️ et bonne année. La première version de l'interface utilisateur Telerik pour Xamarin pour 2022 est ici avec un tout nouveau contrôle. Désormais, vous pouvez facilement dessiner une signature dans vos applications mobiles et de bureau à l'aide du Telerik SignaturePad pour Xamarin.Forms. Attendez, ce n'est pas tout. Nous avons également une API d'enregistrement flexible afin que vous puissiez exporter la signature au format PNG ou JPEG. 👌

Dans cet article de blog, je vais vous montrer en détail toutes les fonctionnalités, personnalisations et options d'enregistrement disponibles dans le contrôle. Et, bien sûr, à la fin, une application de démonstration avec SignaturePad en action. 😉

Une explication détaillée de la façon de démarrer avec le contrôle peut être trouvée dans la documentation Telerik SignaturePad pour Xamarin.

Configurer la signature

Facilement configurez la signature comme vous le souhaitez. Modifiez la couleur et l'épaisseur du trait de signature à l'aide des propriétés StrokeColor et StrokeThicknessainsi que la couleur d'arrière-plan à l'aide de la propriété BackgroundColor.

De plus, il y a une bordure. qui enveloppe la signature. Vous pouvez entièrement personnaliser son apparence à l'aide des propriétés suivantes :

BorderColor
BorderThickness
CornerRadius

La vidéo montre l'exemple de configuration du SignaturePad. Vous pouvez trouver le code source dans le Telerik Xamarin Samples GitHub repo.

Enregistrer la signature en tant qu'image

L'API d'enregistrement flexible vous permet d'exporter la signature au format PNG ou JPEG via la méthode SaveImageAsyng. La méthode a deux surcharges :

SaveImageAsync(Stream outputStream)
SaveImageAsync(Stream outputStream, SaveImageSettings settings)

La classe SaveImageSettings[13] options d'économie supplémentaires. Lors de l'exportation de la signature sous forme d'image, vous pouvez modifier le format de l'image, la couleur d'arrière-plan, la qualité et l'échelle, ainsi que la couleur et l'épaisseur du trait de la signature.

Exportons la signature au format JPEG et enregistrons-la en haute qualité. Notre structure XAML :

SignaturePad pour dessiner la signature
RadButton pour exporter la signature sous forme d'image et l'enregistrer en haute qualité
Image pour afficher l'image exportée

<Grid RowDefinitions ="*,Auto,Auto">

<telerikInput : RadSignature[14969023]telerikInput : RadSignature[14969023] :Nom="signaturePad"

Épaisseur de la bordure==

BorderColor="LightGray"/>[590159][09459006] < Telerikinput: Radbutton Cliquez sur = "RADBUTTON_CLICKED"

Grille.Ligne="1"/>

[59][592 ]<Image x:Name="signatureImage"

[19659062]var settings = new SaveImageSettings()

{

= ImageFormat.Jpeg,

Facteur d'échelle = 0,7,

]ImageQuality = 1,

Arrière-plan dCouleur = Couleur.Gris Clair,

StrokeColor = Couleur.Bleu Foncé,

] Épaisseur de trait = 5

} ;

octet[] tableau ;

var stream = nouveau MemoryStream())

{

[29459029][29459029][29459029][29459029] 19659023]this.signaturePad.SaveImageAsync(stream, settings);

array = stream.ToArray();[4965908] ]this.signatureImage.Source = ImageSource.FromStream(() => new MemoryStream(array));

}

Events and Clear Command

Le SignaturePad expose l'événement StrokeStarted pour déterminer quand un nouveau trait est commencé et l'événement StrokeCompleted lorsque le trait est terminé.

Vous pouvez effacer la signature dessinée à l'aide de ClearCommand. Lorsque la surface est effacée, un autre événement est déclenché : Événement Effacé.

Heure de la démo

Dans la démo, j'ajouterai un contrôle SignaturePad, un bouton qui m'aidera à effacer la signature dessinée et une étiquette qui affichera l'affichage en temps réel lors du dessin de la signature.

D'abord le résultat final, puis la mise en œuvre. 😍

Voici la définition XAML :

<Grid RowDefinitions="100,60]"100,60 >

<Grille>

[9059027]<telerikInput :RadSignaturePad x :Name="signaturePad"

[29045][29459028][29459028] Borderthickness = "1"

= "LightGray"

StrokeStarted="RadSignaturePad_StrokeStarted"[19659] 002] StrokeCompleted = "RadSignaturePad_StrokeCompleted"

Effacé="RadSignaturePad_Cleared"/>

<Bouton x : Nom=[09659026]"clearButton"[19419029][596419] ] Texte="X"

[35459028] ]Taille de police="20"

Couleur d'arrière-plan=======

Commande="{Binding Source={x:Reference signaturePad}, Path=Cle arCommand}"

HorizontalOptions="Fin" VerticalesOptions = "Démarrer"

Marge ]="0,10,10,0"/>


        <Étiquette x : Nom="Étiquette d'horodatage"[19659002]

Horizontaloptions = = "fin" VerticalOptions="Fin"

Marge[19659069=[19025]0 10,10"/>

</Grille>

<< Clic="RadButton_Clicked"

Texte=Save46"=

TextColor="Blanc"

[2] Couleur de fond="#42A5F5"

[1945=9025]Grid[29][1945=9025]Grid[29] 19659026]"1"/>

<Image x : Nom[196] 19659026]"sauvéSignatrue"[19659002] Grille.Rang="2"/>

[1945]45921][29459021][2</Grid>

L'espace de noms utilisé en XAML :

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

Et le code-behind avec la logique d'enregistrement de la signature en tant qu'image et les événements StrokeStarted et StrokeCompleted de SignaturePad :

private void RadSignaturePad_StrokeStarted(object ]expéditeur, EventArgs e)

{

ce. .Now.ToString();

}

privé void RadSignaturePad_StrokeCompleted(objet expéditeur, EventArgs e) expéditeur, EventArgs e) ]{

ceci.timeStampLabel.Text = DateTime.Now.ToString();[2]96590 } Void RadsignaturePad_Cleared ( Sender, Eventargs e)

[1945902] {

ceci.timeStampLabel.Text = "";[0][6] 19659002] this.savedSignatrue.Source = null;

Private Async Void RADBUTTON_CLICKED ( Sender, eventargs e) {

var settings = new SaveImageSettings( )

{

ImageFormat = imageFormat.jpeg,

Souchefactor = 0,7, ImageQuality = 1,

Couleur de fond = Color.LightGray,[19415902] ] StrokeColor = Couleur.