Fermer

mars 9, 2020

Nouveau contrôle de clavier virtuel pour vos applications WinForms


Votre application WinForms a-t-elle besoin d'une entrée de données à l'écran? Ne cherchez pas plus loin que le clavier virtuel riche en fonctionnalités, qui fait maintenant partie de l'interface utilisateur de Telerik pour WinForms.

Développez-vous une application pour les appareils à écran tactile qui nécessite une méthode alternative pour la saisie de données? Vous êtes au bon endroit! Avec la version R1 2020 de Telerik UI pour WinForms nous avons expédié un tout nouveau contrôle pour de tels cas d'utilisation – le Clavier virtuel .

Le RadVirtualKeyboard est un composant logiciel conçu pour fournir aux utilisateurs un clavier numérique complet et prendre en charge les différents cas d'utilisation pour une méthode de saisie à l'écran pour divers appareils à écran tactile tels que des kiosques, des terminaux de point de vente, etc.

 clavier virtuel

L'interface utilisateur Telerik pour WinForms peut être utilisée de deux manières différentes:

Clavier virtuel comme contrôle

Le RadVirtualKeyboard peut être implémenté dans un Form avec un ] TextBox ou tout autre contrôle d'édition ajouté au formulaire. Lorsque la zone de texte est mise au point, son texte est entièrement modifiable par le clavier virtuel.

VirtualKeyboardForm

En plus du contrôle RadVirtualKeyboard, nous avons également introduit le composant RadVirtualKeyboardForm . Il peut être utilisé comme une forme autonome ou il peut être facilement associé à chaque contrôle focalisable (par exemple RadTextBox ) / ou à plusieurs contrôles. Vous avez juste besoin de sélectionner le contrôle et dans la grille de propriétés dans VisualStudio, définissez AssociatedKeyboardType sur AssociatedControl. Lorsqu'un contrôle associé est activé, VirtualKeyboardForm s'affiche.

La propriété OpenUnderAssociatedControl permet de positionner la forme de clavier associée à côté du contrôle d'édition. Si vous le définissez sur false, le clavier aura une taille et un emplacement statiques et l'utilisateur pourra le repositionner facilement.

 Clavier virtuel AssociatedControl

Caractéristiques principales

Structure

dans le squelette du RadVirtualKeyboard.

  • La clé est la plus petite pièce du contrôle clavier et représente un bouton. Les clés sont divisées en cinq types différents:
        

    • Normal – Une touche régulière avec un ou deux symboles.
    • Spécial – Une touche, qui ne peut pas être basculée et représente une commande (comme Tab, Enter, Backspace, PageUp / PageDown).
    • Pavé numérique – La touche change son texte / symbole et son action lorsque NumLock est modifié.
    • Modificateur – Une touche à bascule utilisée pour les touches de modification comme Ctrl, Shift, Alt.
    • Lock – Utilisé pour basculer les touches de verrouillage comme le verrouillage des majuscules, le verrouillage numérique, le verrouillage du défilement .
  • VirtualKeyboardLayout est l'élément qui contient toutes les clés. Les clés sont divisées en lignes logiques, ce qui permet d'ajouter une étendue de lignes différente à chaque clé.
        

    • L'espacement entre les touches peut être ajusté en définissant la propriété KeySpacing. L'espacement par défaut est de 10% de la largeur d'une seule clé.
  • VirtualKeyboardLayoutPanel est le parent des autres VirtualKeyboardLayoutPanels et / ou VIrtualKeyboardLayouts. Ce panneau peut avoir une orientation horizontale ou verticale.
        

    • L'espacement entre les différents panneaux de disposition peut être ajusté en définissant la propriété LayoutSpacing. Par défaut, l'espacement est de 30% de la largeur d'une seule clé.
  • RadVirtualKeyboardElement – Possède une propriété MainLayoutPanel qui contient le VirtualKeboardLayoutPanel affiché.

Pour plus d'informations sur la structure de RadVirtualKeyboard, consultez notre documentation en ligne .

Disposition

De plus, le clavier tactile a un mécanisme de disposition unique. Chaque clé a ses propres limites logiques. Ces limites sont mises à jour uniquement lorsqu'une clé, une disposition et / ou un panneau est ajouté ou supprimé. Ainsi, lorsque le contrôle du clavier virtuel doit être organisé et peint, les limites logiques de la touche sont mises à l'échelle pour s'adapter à l'espace disponible en pixels.

Personnalisation de la disposition

Touches personnalisées

Le code suivant illustre comment ajouter simplement deux clés avec des textes prédéfinis.
À côté des touches Entrée et Maj, nous ajouterons deux nouveaux boutons avec «www». et textes «telerik».
Premièrement, nous allons accéder à VirtualKeyboardLayout, puis rendre les touches Entrée et Maj un peu plus fines. Après cela, nous créerons nos nouvelles clés et les ajouterons aux lignes correspondantes. Ceci est illustré ci-dessous:

VirtualKeyboardLayout mainButtonsLayout = virtualKeyboard.MainLayoutPanel.KeyboardLayouts [0] as VirtualKeyboardLayout;

Row row2 = mainButtonsLayout.Rows

IKey enterKey = row2.Keys.LastOrDefault ();

enterKey.KeyWidth = 1;

] Clé wwwKey = nouveau Clé (-1, "www." KeyType.Normal, 1, 1);

row2.Keys .Insert (row2.Keys.Count, wwwKey);

Row row3 = mainButtonsLayout.Rows [3];

IKey shiftKey = row3.Keys.LastOrDefault ();

shiftKey. KeyWidth = 1;

Key telerikKey = new Key (-1, "telerik" KeyType.Normal, 1.5f, 1) ;

row3.Keys.Insert (row3.Keys.Count, telerikKey);

mainButtonsLayout.ResetLayout ();

Après avoir ajouté les nouvelles clés, nous devons réinitialiser la disposition des boutons, afin que les limites logiques des clés soient correctement mises à jour. Voici à quoi ressemble le clavier modifié:

 Ajouter des touches personnalisées

Disposition personnalisée

L'extrait de code suivant montrera comment créer une disposition de clavier PIN numérique. Cette fois, nous allons créer un tout nouveau VirtualKeyboardLayoutPanel et y ajouter deux instances VirtualKeyboardLayout. Le premier maintiendra les touches numériques pour le code PIN, et le second maintiendra les boutons annuler, effacer et entrer.

VirtualKeyboardLayoutPanel panel = nouveau VirtualKeyboardLayoutPanel ();

panel.Orientation = Orientation.Horizontal;

VirtualKeyboardLayout digitsLayout = VirtualKeyboardLayout ();

digitsLayout.AddKey (Keys.D7, KeyType.Normal);

digitsLayout.AddKey (Keys.D8, KeyType .Normal);

digitsLayout.AddKey (Keys.D9, KeyType.Normal);

digitsLayout.AddNewLine ();

digitsLayout.AddKey (Keys.D4, KeyType.Normal);

digitsLayout.AddKey (Keys.D5, KeyType.Normal);

digitsLayout.AddKey (Keys.D6, KeyType.Normal);

digitsLayout.AddNewLine ();

digitsLayout.AddKey (Keys.D1, KeyType.Normal);

digitsLayout.AddKey (Keys.D2, KeyType.Normal);

digitsLayout.AddKey (Keys.D3, KeyType.Normal);

digitsLayout.AddNewLine ();

digitsLayout.AddEmptySpace ();

digitsLayout.AddKey (Keys.D0, KeyType.Normal);

panel.KeyboardLayouts.Add (digitsLayout);

VirtualKeyboardLayout commandesLayout = nouveau [19659034] VirtualKeyboardLayout ();

float buttonWidth = 1.1f;

Key button = commandesLayout.AddSpecialKey (Keys.Back, "Cancel" KeyType.Special, buttonWidth, 1, true ) as Key;

button.DrawFill = vrai ;

bout à bout on.GradientStyle = Telerik.WinControls.GradientStyles.Solid;

button.BackColor = Color.Red;

commandesLayout.AddNewLine ();

Key clear = new Key (-1, "Clear" KeyType.Normal, buttonWidth, 1, true false ]);

clear.DrawFill = true ;

clear.GradientStyle = Telerik.WinControls.GradientStyles.Solid ;

clear.BackColor = Color.Yellow;

commandLayout.AddKey (clear);

commandLayout.AddNewLine ();

Key enter = new Key (-1, "Enter" KeyType.Normal, buttonWidth, 1, true [19659042] false );

enter.DrawFill = true [19659042];

enter.GradientStyle = Telerik.WinControls.GradientStyles.Solid;

enter.BackColor = Color.Green;

commandesLayout.AddKey (entrée);

commandesLayout.AddNewLine ();

panel.KeyboardLayouts. Add (commandesLayout);

this .radVirtualKeyboard1.MainLayoutPanel = panel;

Et voici le résultat:

 PIN enter form

Try it Out

Essayez-le

Essayez-le

Make it assurez-vous de télécharger et d'essayer la dernière version de Telerik UI for WinForms pour explorer toutes les nouvelles fonctionnalités et thèmes .

Commencez votre essai

Nous aimerions pour savoir comment tout cela fonctionne pour vous, veuillez nous faire part de vos réflexions en visitant notre portail de rétroaction ou en laissant un commentaire ci-dessous.





Source link