Partager via

Résumé du chapitre 15. Interface interactive

  • Article

Remarque

Ce livre a été publié au printemps 2016 et n’a pas été mis à jour depuis. Il y a beaucoup dans le livre qui reste précieux, mais certains documents sont obsolètes, et certains sujets ne sont plus entièrement corrects ou complets.

Ce chapitre explore huit View dérivés qui permettent l’interaction avec l’utilisateur.

Vue d’ensemble

Xamarin.Forms contient 20 classes instanciables qui dérivent de View mais pas Layout. Six d’entre eux ont été abordés dans les chapitres précédents :

Les huit vues de ce chapitre permettent efficacement à l’utilisateur d’interagir avec les types de données .NET de base :

Type de données Views
Double Slider, Stepper
Boolean Switch
String Entry, , EditorSearchBar
DateTime DatePicker, TimePicker

Vous pouvez considérer ces vues comme des représentations interactives visuelles des types de données sous-jacents. Ce concept est exploré plus dans le chapitre suivant, chapitre 16. Liaison de données.

Les six autres vues sont abordées dans les chapitres suivants :

Curseur et pas à pas

Les deux Slider et Stepper permettre à l’utilisateur de choisir une valeur numérique à partir d’une plage. Il Slider s’agit d’une plage continue, tandis que les Stepper valeurs discrètes sont comprises.

Concepts de base du curseur

Il Slider s’agit d’une barre horizontale représentant une plage de valeurs d’un minimum à gauche à un maximum à droite. Il définit trois propriétés publiques :

  • Value de type double, valeur par défaut de 0
  • Minimum de type double, valeur par défaut de 0
  • Maximum de type double, valeur par défaut de 1

Les propriétés pouvant être liées qui sauvegardent ces propriétés garantissent qu’elles sont cohérentes :

  • Pour les trois propriétés, la coerceValue méthode spécifiée pour la propriété pouvant être liée garantit qu’elle Value est comprise entre Minimum et Maximum.
  • La validateValue méthode sur MinimumProperty retourne false si Minimum elle est définie sur une valeur supérieure ou égale à Maximum, et similaire pour MaximumProperty. Le retour false de la validateValue méthode entraîne l’augmentation d’un ArgumentException élément.

Slider déclenche l’événement ValueChanged avec un ValueChangedEventArgs argument lorsque la Value propriété change, par programmation ou lorsque l’utilisateur manipule le Slider.

L’exemple SliderDemo illustre l’utilisation simple du Sliderfichier .

Pièges courants

Dans le code et en XAML, les propriétés et Maximum les Minimum propriétés sont définies dans l’ordre que vous spécifiez. Veillez à initialiser ces propriétés afin qu’elles Maximum soient toujours supérieures à Minimum. Dans le cas contraire, une exception est levée.

L’initialisation des Slider propriétés peut entraîner le déclenchement de la Value propriété et de l’événement ValueChanged . Vous devez vous assurer que le Slider gestionnaire d’événements n’accède pas aux vues qui n’ont pas encore été créées lors de l’initialisation de la page.

L’événement ValueChanged ne se déclenche pas lors Slider de l’initialisation, sauf si la Value propriété change. Vous pouvez appeler le ValueChanged gestionnaire directement à partir du code.

Sélection de couleur du curseur

Le programme RgbSliders contient trois Slider éléments qui vous permettent de sélectionner de manière interactive une couleur en spécifiant ses valeurs RVB :

Capture d’écran triple des curseurs R G B

L’exemple TextFade utilise deux éléments pour déplacer deux SliderLabel éléments d’un AbsoluteLayout élément à l’autre et en fondu l’un dans l’autre.

Différence de pas à pas

Définit Stepper les mêmes propriétés et événements que Slider , mais la Maximum propriété est initialisée à 100 et Stepper définit une quatrième propriété :

Visuellement, il Stepper se compose de deux boutons étiquetés : et +. Pression :diminue Value d’un Increment minimum de Minimum. En appuyant + sur Increment les augmentations Value jusqu’à un maximum de Maximum.

Ceci est illustré par l’exemple StepperDemo .

Switch et CheckBox

Permet Switch à l’utilisateur de spécifier une valeur booléenne.

Changer de base

Visuellement, il Switch se compose d’un bouton bascule qui peut être désactivé et activé. La classe définit une propriété :

Switch définit un événement :

Le programme SwitchDemo illustre le Switch.

Un CheckBox traditionnel

Certains développeurs peuvent préférer un plus traditionnel CheckBox à l’objet Switch. La Xamarin.Formsbibliothèque Book.Shared Computer Toolkit contient une CheckBox classe qui dérive de ContentView. CheckBox est implémenté par les fichiers CheckBox.xaml et CheckBox.xaml.cs . CheckBox définit trois propriétés (Text, FontSizeet IsChecked) et un CheckedChanged événement.

L’exemple CheckBoxDemo illustre ceci CheckBox.

Saisie de texte

Xamarin.Forms définit trois vues qui permettent à l’utilisateur d’entrer et de modifier du texte :

  • Entry pour une seule ligne de texte
  • Editor pour plusieurs lignes de texte
  • SearchBar pour une seule ligne de texte à des fins de recherche.

Entry et Editor dérivent de InputView, qui dérive de View. SearchBar dérive directement de View.

Clavier et focus

Sur les téléphones et tablettes sans claviers physiques, les Entryéléments , Editoret SearchBar tous provoquent une fenêtre contextuelle d’un clavier virtuel. La présence de ce clavier sur l’écran est liée au focus d’entrée. Une vue doit avoir à la fois ses propriétés et IsEnabled ses IsVisible propriétés définies pour true obtenir le focus d’entrée.

Deux méthodes, une propriété en lecture seule et deux événements sont impliqués dans le focus d’entrée. Celles-ci sont toutes définies par VisualElement:

  • La Focus méthode tente de définir le focus d’entrée sur un élément et retourne true si elle réussit
  • La méthode supprime le Unfocus focus d’entrée d’un élément
  • La IsFocused propriété en lecture seule indique si l’élément a le focus d’entrée
  • L’événement Focused indique quand un élément obtient le focus d’entrée
  • L’événement Unfocused indique quand un élément perd le focus d’entrée

Choix du clavier

La InputView classe à partir de laquelle Entry et Editor dérivent ne définit qu’une seule propriété :

Cela indique le type de clavier affiché. Certains claviers sont optimisés pour les URI ou les nombres.

La Keyboard classe permet de définir un clavier avec une méthode statique Keyboard.Create avec un argument de type KeyboardFlags, une énumération avec les indicateurs de bits suivants :

Lorsque vous utilisez le multiligne Editor lorsqu’un paragraphe ou un plus de texte est attendu, l’appel Keyboard.Create est une bonne approche de la sélection d’un clavier. Pour la seule ligne Entry, les propriétés Keyboard statiques en lecture seule suivantes sont utiles :

Permet KeyboardTypeConverter de spécifier ces propriétés en XAML, comme illustré par le programme EntryKeyboards .

Propriétés et événements d’entrée

La ligne Entry unique définit les propriétés suivantes :

Il Entry définit également deux événements :

  • TextChanged avec un TextChangedEventArgs objet, déclenché chaque fois que la Text propriété change
  • Completed, déclenché lorsque l’utilisateur est terminé et que le clavier est ignoré. L’utilisateur indique l’achèvement d’une manière spécifique à la plateforme

L’exemple QuadraticEquations illustre ces deux événements.

Différence de l’éditeur

Le multiligne Editor définit les mêmes Text propriétés Font que Entry les autres propriétés, mais pas les autres. Editor définit également les deux mêmes propriétés que Entry.

JustNotes est un programme de prise de notes de forme libre qui enregistre et restaure le contenu du Editor.

Le SearchBar n’est pas dérivé de InputView, il n’a donc pas de Keyboard propriété. Mais il a tout le Text, Fontet Placeholder les propriétés qui définissent Entry . En outre, SearchBar définit trois propriétés supplémentaires :

Le bouton d’annulation spécifique à la plateforme efface le texte. Il SearchBar dispose également d’un bouton de recherche spécifique à la plateforme. Appuyez sur l’un de ces boutons pour déclencher l’un des deux événements qui définissent SearchBar :

L’exemple SearchBarDemo illustre le SearchBar.

Sélection de date et d’heure

Les DatePicker vues implémentent TimePicker des contrôles spécifiques à la plateforme qui permettent à l’utilisateur de spécifier une date ou une heure.

The DatePicker

DatePicker définit quatre propriétés :

  • MinimumDate de type DateTime, initialisé au 1er janvier 1900
  • MaximumDate de type DateTime, initialisé au 31 décembre 2100
  • Date de type DateTime, initialisé à DateTime.Today
  • Format de type string, la chaîne de mise en forme .NET initialisée sur « d », le modèle de date court, ce qui entraîne un affichage de date comme « 7/20/1969 » aux États-Unis.

Vous pouvez définir les DateTime propriétés en XAML en exprimant les propriétés en tant qu’éléments de propriété et en utilisant le format de date courte variable de culture (« 7/20/1969 »).

L’exemple DaysBetweenDates calcule le nombre de jours entre deux dates sélectionnées par l’utilisateur.

TimePicker (ou s’agit-il d’un TimeSpanPicker ?)

TimePicker définit deux propriétés et aucun événement :

  • Time est de type TimeSpan plutôt que DateTime, indiquant le temps écoulé depuis minuit
  • Format de type string, la chaîne de mise en forme .NET initialisée sur « t », le modèle de temps court, ce qui entraîne un affichage temporel tel que « 1 :45 PM » aux États-Unis.

Le programme SetTimer montre comment utiliser le TimePicker paramètre pour spécifier une heure pour un minuteur. Le programme fonctionne uniquement si vous le conservez au premier plan.

SetTimer illustre également l’utilisation de la DisplayAlert méthode permettant d’afficher Page une zone d’alerte.