L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Dessiner et enregistrer des signatures dans les applications Xamarin.Forms
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.
} ;
octet[] tableau ;
SaveImageAsync(stream, settings); Nous espérons que le nouveau contrôle aura sa place dans yo vos applications mobiles et de bureau. Comme toujours, nous vous encourageons à partager vos idées ou opinions sur les contrôles et ainsi jouer un rôle dans l'élaboration de notre feuille de route. Vous pouvez écrire dans le Telerik UI for Xamarin Feedback Portal ou simplement faire un ticket. Si vous n'avez pas encore essayé la Telerik UI for Xamarin suite, essayez-la avec un essai gratuit de 30 joursoffrant toutes les fonctionnalités et commandes à votre disposition sans frais. Bon codage avec nos commandes ! ❤ en utilisant ]nouveau MemoryStream()) array = stream.ToArray(); this.savedSignatrue.Source = ImageSource.FromStream(() => new MemoryStream(array)); } Les espaces de noms utilisés dans le code derrière : E/S ;en utilisant Telerik.XamarinForms.Input ;en utilisant Xamarin.Forms I Important—Dites-nous ce que vous en pensez
Source link