Création D'applications Mobiles Avec Xamarin Forms PDF [PDF]

Zitiervorschau

Contents Création d’applications mobiles avec Xamarin.Forms 1. Comment Xamarin.Forms est-il intégré ? 2. Anatomie d’une application 3. Détails du texte 4. Défilement de la pile 5. Gestion des tailles 6. Clics de bouton 7. XAML et code 8. Code et XAML en harmonie 9. Appels d’API spécifiques de la plateforme 10. Extensions de balisage XAML 11. Infrastructure Bindable 12. Styles 13. Bitmaps 14. Disposition absolue 15. Interface interactive 16. Liaison de données 17. Maîtrise de la grille 18. MVVM 19. Vues de collection 20. E/S de fichier et asynchrone 21. Transformations 22. Animation 23. Déclencheurs et comportements 24. Navigation entre les pages 25. Types de page 26. Dispositions personnalisées 27. Renderers personnalisés 28. Emplacement et mappages

Création d’applications mobiles avec xamarin.Forms 11/01/2019 • 10 minutes to read • Edit Online

télécharger l’exemple Le livre création d’applications mobiles avec Xamarin.Forms par Charles Petzold est un guide pour apprendre à écrire des applications Xamarin.Forms. La seule condition requise est la base de connaissances de la C# langage de programmation. Ce livre fournit une exploration complète dans l’interface utilisateur de Xamarin.Forms et couvre également l’animation, MVVM, déclencheurs, les comportements, des dispositions personnalisées, des convertisseurs personnalisés et bien plus encore. Le livre a été publié dans le ressort de 2016 et n’a pas été mis à jour depuis. Il existe une grande partie dans le carnet qui seront utiles reste, mais certains le matériau est obsolète, et certaines rubriques ne sont plus entièrement correcte ou terminée.

Téléchargez le livre électronique gratuit Téléchargez votre format de livre électronique par défaut à partir de Microsoft Virtual Academy : PDF (56 Mo) ePub (151 Mo) Kindle Édition (325 Mo) Vous pouvez également Téléchargez des chapitres au format PDF.

Exemples Les exemples sont disponible sur githubet incluent des projets pour iOS, Android et la plateforme universelle Windows (UWP ). (Xamarin.Forms ne gère plus de Windows 10 Mobile, mais les applications Xamarin.Forms seront exécutera sur le bureau Windows 10).

Récapitulatif des chapitres Récapitulatif des chapitres sont disponibles dans le table du chapitre ci-dessous. Ces synthèses décrivent le contenu de chaque chapitre et incluent plusieurs types de liens : Liens vers les chapitres réelles du livre (en bas de la page) et aux articles connexes Des liens vers tous les exemples dans le xamarin-forms-livre-samples référentiel GitHub Liens vers la documentation API pour obtenir une description plus détaillée de Xamarin.Forms classes, structures, propriétés, énumérations, etc. Ces synthèses également indiquent quand le matériel dans le chapitre peut être quelque peu obsolète.

Téléchargez des chapitres et des résumés

CHAPITRE

TEX TE COMPLET

RÉCAPITULATIF

Chapitre 1. Fonctionnement de Xamarin.Forms ajuster ?

Télécharger PDF

Résumé

Chapitre 2. Anatomie d’une application

Télécharger PDF

Résumé

Chapitre 3. Détails du texte

Télécharger PDF

Résumé

Chapitre 4. Défilement de la pile

Télécharger PDF

Résumé

Chapitre 5. Gestion des tailles

Télécharger PDF

Résumé

Chapitre 6. Clics de bouton

Télécharger PDF

Résumé

Chapitre 7. Visual Studio XAML. Code

Télécharger PDF

Résumé

Chapitre 8. Code et XAML en harmonie

Télécharger PDF

Résumé

Chapitre 9. Appels d’API de plateforme spécifique

Télécharger PDF

Résumé

Chapitre 10. Extensions de balisage XAML

Télécharger PDF

Résumé

Chapitre 11. Infrastructure Bindable

Télécharger PDF

Résumé

Chapitre 12. Styles

Télécharger PDF

Résumé

Chapitre 13. Bitmaps

Télécharger PDF

Résumé

Chapitre 14. Disposition absolue

Télécharger PDF

Résumé

Chapitre 15. L’Interface Interactive

Télécharger PDF

Résumé

Chapitre 16. Liaison de données

Télécharger PDF

Résumé

Chapitre 17. Maîtrise de la grille

Télécharger PDF

Résumé

Chapitre 18. MVVM

Télécharger PDF

Résumé

Chapitre 19. Vues de collection

Télécharger PDF

Résumé

Chapitre 20. E/s de fichier et asynchrone

Télécharger PDF

Résumé

Chapitre 21. Transformations

Télécharger PDF

Résumé

Chapitre 22. Animation

Télécharger PDF

Résumé

Chapitre 23. Déclencheurs et comportements

Télécharger PDF

Résumé

Chapitre 24. Navigation entre les pages

Télécharger PDF

Résumé

CHAPITRE

TEX TE COMPLET

RÉCAPITULATIF

Chapitre 25. Types de page

Télécharger PDF

Résumé

Chapitre 26. Dispositions personnalisées

Télécharger PDF

Résumé

Chapitre 27. Renderers personnalisés

Télécharger PDF

Résumé

Chapitre 28. Emplacement et mappages

Télécharger PDF

Résumé

Façons dans lequel le livre est obsolète Depuis la publication de création d’applications mobiles avec Xamarin.Forms, plusieurs nouvelles fonctionnalités ont été ajoutées à Xamarin.Forms. Ces nouvelles fonctionnalités sont décrites dans les articles individuels dans le Xamarin.Forms documentation. Autres modifications ont provoqué le contenu de l’annuaire à être obsolètes : Bibliothèques .NET standard 2.0 ont remplacé les bibliothèques de classes portables En règle générale, une application Xamarin.Forms utilise une bibliothèque de partager du code entre les différentes plateformes. À l’origine, il s’agissait d’une bibliothèque de classes Portable (PCL ). Il existe de nombreuses références à des bibliothèques de classes portables tout au long de ce livre et les résumés de chapitre. La bibliothèque de classes Portable a été remplacée par une bibliothèque .NET Standard 2.0, comme décrit dans l’article .NET Standard 2.0 Support dans Xamarin.Forms. Tous les exemple de code à partir de l’ouvrage a été mis à jour pour utiliser les bibliothèques .NET Standard 2.0. La plupart des informations dans le livre concernant le rôle de la bibliothèque de classes Portable reste la même pour une bibliothèque .NET Standard 2.0. La différence est qu’uniquement une bibliothèque de classes portable a une numérique « profil ». En outre, il existe des bibliothèques .NET Standard 2.0 présente plusieurs avantages. Par exemple, le chapitre 20, Async et les e/s de fichier explique comment utiliser des plateformes sous-jacentes pour effectuer des e/s de fichier. Cela n’est plus nécessaire. La bibliothèque .NET Standard 2.0 prend en charge la version classique System.IO classes pour toutes les plateformes de Xamarin.Forms. La bibliothèque .NET Standard 2.0 permet également à utiliser les applications Xamarin.Forms accéder aux fichiers sur Internet plutôt que WebRequest ou d’autres classes.

HttpClient

pour

Le rôle de XAML a été élevé Création d’applications mobiles avec Xamarin.Forms commence par décrire comment écrire des applications Xamarin.Forms à l’aide de c#. Le d’Extensible Application Markup Language (XAML ) n’est pas introduites jusqu'à ce que chapitre 7. Visual Studio XAML. Code. XAML a maintenant un rôle plus important dans Xamarin.Forms. Les modèles de solution Xamarin.Forms distribués avec Visual Studio créent des fichiers page XAML. Un développeur à l’aide de Xamarin.Forms devez vous familiariser avec le XAML dès que possible. Le langage de balisage d’Application eXtensible (XAML ) section de la documentation de Xamarin.Forms contient plusieurs articles concernant XAML pour vous aider à démarrer. Plateformes prises en charge Xamarin.Forms ne gère plus de Windows 8.1 et Windows Phone 8.1. Le livre fait parfois référence à la Windows Runtime. Il s’agit d’un terme qui englobe l’API de Windows utilisée dans plusieurs versions de Windows et Windows Phone. Les versions plus récentes de Xamarin.Forms se limite à la prise en charge de la plateforme Windows universelle, qui est l’API pour Windows 10 et Windows 10 Mobile. Une bibliothèque .NET Standard 2.0 ne prend pas en charge n’importe quelle version de Windows 10 Mobile. Par

conséquent, une application Xamarin.Forms à l’aide d’une bibliothèque .NET Standard ne s’exécutera pas sur un appareil Windows 10 Mobile. Les applications Xamarin.Forms continuent à exécuter sur le bureau Windows 10, versions 10.0.16299.0 et versions ultérieures. Xamarin.Forms a prise en charge de la version préliminaire de la Mac, WPF, GTK #, et Tizen plateformes. Récapitulatif des chapitres Les résumés de chapitre incluent les informations concernant les modifications dans Xamarin.Forms, car le livre a été écrit. Il s’agit souvent sous la forme de notes : NOTE Notes sur chaque page indiquent où Xamarin.Forms est différente de la matière présentée dans le livre.

Exemples Dans le xamarin-forms-livre-samples référentiel GitHub, le code d’origine à partir de livre branche contient des exemples de programme cohérents avec le livre. Le master branche contient des projets qui ont été mis à niveau pour supprimer les API déconseillées et refléter API améliorées. En outre, les projets Android dans le master branche ont été mis à niveau pour Android Material Design via AppCompat et s’affichent généralement texte noir sur un arrière-plan blanc.

Liens associés Blog de MS Press Exemple de code de livre

Résumé du chapitre 1. Comment Xamarin.Forms est-il intégré ? 11/01/2019 • 10 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Une des tâches plus désagréables de programmation consiste à porter un code de base à partir d’une plateforme à l’autre, en particulier si cette plateforme implique un langage de programmation différents. Il est tentant, lorsque le portage du code pour refactoriser d’également, mais si les deux plateformes doivent être conservées en parallèle, puis les différences entre les deux bases de code seront compliquer une maintenance ultérieure.

Développement mobile multiplateforme Ce problème est courant lors du ciblage de plateformes mobiles. Actuellement, il existe deux principales plateformes mobiles, de la famille de Apple de l’iPhone et iPad exécutant le système d’exploitation iOS et le système d’exploitation Android qui s’exécute sur un large éventail de téléphones et tablettes. Une autre plate-forme significative est Universal Windows Platform (UWP de Microsoft), ce qui permet à un programme unique cibler à la fois Windows 10. Un fournisseur de logiciels qui souhaite cibler ces plateformes doit faire face à des paradigmes de l’interface utilisateur différents, les trois différents environnements de développement, les trois différentes interfaces de programmation, et—peut-être plus maladroitement—trois langages de programmation différents : Objective-C pour l’iPhone et iPad, Java pour Android, et C# pour Windows.

La solution c# et .NET Bien que Objective-C, Java et c# sont toutes dérivées de langage de programmation C, ils ont évolué en chemins d’accès très différentes. C# est la plus récente de ces langages et a été maturation de façons très utile. En outre, c# est étroitement associé à une infrastructure de programmation entière, appelée .NET, qui prend en charge la mathématiques, le débogage, la réflexion, collections, globalisation, d’e/s de fichier, mise en réseau, sécurité, threading, services web, gestion des données et XML et JSON de lecture et l’écriture. Xamarin fournit actuellement des outils pour cibler le Mac, iOS et Android API à l’aide de c# et .NET native. Ces outils sont appelés Xamarin.Mac, Xamarin.iOS et Xamarin.Android, collectivement regroupés sous la plateforme Xamarin. Il s’agit des bibliothèques et des liaisons qui expriment les API natives de ces plateformes avec les langages .NET. Les développeurs peuvent utiliser la plateforme Xamarin pour écrire des applications en c# qui cible Mac, iOS ou Android. Mais si vous ciblez plusieurs plateformes, il est judicieux de partager une partie du code entre les plateformes cibles. Cela implique la séparation du programme en code dépend de la plateforme (généralement impliquant l’interface utilisateur) et de code indépendant de la plateforme, ce qui nécessite généralement uniquement base .NET framework. Ce code indépendant de la plateforme peut résider dans une bibliothèque de classes Portable (PCL ), ou un projet partagé, souvent appelé projet de ressource partagé ou SAP.

NOTE Bibliothèques de classes portables ont été remplacés par des bibliothèques .NET Standard. Exemples de code à partir de l’ouvrage a été converti pour utiliser les bibliothèques .NET standard.

Présentation de Xamarin.Forms Lorsque vous ciblez plusieurs plateformes mobiles, Xamarin.Forms permet le partage de code encore plus. Un seul programme écrit pour Xamarin.Forms peut cibler ces plateformes : iOS pour les programmes qui s’exécutent sur l’iPhone, iPad et iPod touch Android pour les programmes qui s’exécutent sur les téléphones et tablettes Android la plateforme Windows universelle pour cible Windows 10 NOTE Xamarin.Forms ne gère plus de Windows 8.1, Windows Phone 8.1 ou Windows 10 Mobile, mais les applications Xamarin.Forms s’exécutent sur le bureau Windows 10. Il est également prise en charge de la version préliminaire de la Mac, WPF, GTK #, et Tizen plateformes.

La majeure partie d’un programme de Xamarin.Forms existe dans une bibliothèque ou un SAP. Chacune des plateformes se compose d’un stub de petite application qui appelle ce code partagé. Les APIs Xamarin.Forms mapper à des contrôles natifs sur chaque plateforme, afin que chaque plateforme gère son apparence caractéristique :

Les captures d’écran de gauche à droite affichent un iPhone et un téléphone Android : Sur chaque écran, la page contient un Xamarin.Forms Label pour afficher du texte, un Button pour l’initiation d’actions, un Switch pour Si vous choisissez une valeur activé/désactivé et un Slider pour spécifier une valeur dans une plage continue. Les quatre de ces vues sont des enfants d’un StackLayout sur un ContentPage . Également attaché à la page est une barre d’outils Xamarin.Forms composé de plusieurs ToolbarItem objets. Ceuxci sont visibles sous forme d’icônes en haut de l’iOS et Android écrans et en bas de l’écran de Windows 10 Mobile. Xamarin.Forms prend également en charge XAML, l’Extensible Application Markup Language développés par Microsoft pour plusieurs plateformes d’application. Tous les éléments visuels du programme ci-dessus sont définis

dans XAML, comme illustré dans le PlatformVisuals exemple. Un programme de Xamarin.Forms peut déterminer quelle plate-forme il s’exécute et exécuter un code différent en conséquence. Plus puissant, les développeurs peuvent écrire du code personnalisé pour les différentes plateformes et exécuter ce code à partir d’un programme de Xamarin.Forms de manière indépendante de la plateforme. Les développeurs peuvent également créer des contrôles supplémentaires en écrivant des convertisseurs pour chaque plateforme. Xamarin.Forms est une bonne solution pour les applications line of business, ou pour créer des prototypes ou effectuer une démonstration rapide de la preuve de concept, il est moins idéal pour les applications qui nécessitent des graphiques vectoriels ou interaction tactile complexes.

Votre environnement de développement Votre environnement de développement dépend de ce que vous souhaitez cibler des plateformes et les ordinateurs que vous voulez utiliser. Si vous souhaitez cibler iOS, vous devez un Mac avec Xcode et la plateforme Xamarin installé. Prenant en charge Android ainsi nécessite l’installation de Java et les kits de développement logiciel requis. Vous pouvez ensuite cibler iOS et Android à l’aide de Visual Studio pour Mac. Installation de Visual Studio vous permet de sur le PC cibler iOS, Android et toutes les plateformes Windows. Toutefois, cibler iOS à partir de Visual Studio nécessite toujours un Mac avec Xcode et la plateforme Xamarin installé. Vous pouvez tester les programmes sur un appareil réel que connectés par USB à l’ordinateur ou sur un simulateur.

Installation Avant de créer et de création d’une application Xamarin.Forms, vous devriez créer et créer séparément une application iOS, une application Android et une application UWP, selon les plateformes que vous souhaitez cible et votre environnement de développement. Les sites web de Xamarin et Microsoft contiennent des informations sur la façon de procéder : Bien démarrer avec iOS Bien démarrer avec Android Centre de développement Windows Une fois que vous pouvez créer et n’exécuter des projets pour ces plateformes individuelles, vous devez avoir aucun problème de création et exécution d’une application Xamarin.Forms.

Liens connexes Chapitre 1 de texte intégral (PDF ) Exemple de chapitre 1

Résumé du chapitre 2. Anatomie d’une application 31/01/2019 • 15 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Dans une application Xamarin.Forms, les objets qui occupent l’espace sur l’écran sont appelés éléments visuels, il est encapsulé par le VisualElement classe. Éléments visuels peuvent être divisées en trois catégories correspondant à ces classes : Page Disposition Affichage Un Page dérivé occupe tout l’écran, ou presque tout l’écran. Souvent, l’enfant d’une page est un Layout dérivé pour organiser les éléments visuels enfants. Les enfants de la Layout peut être autre Layout classes ou View dérivés (souvent appelé éléments), qui sont des objets familiers tels que le texte, images bitmap, curseurs, boutons, zones de liste et ainsi de suite. Ce chapitre montre comment créer une application en se concentrant sur la affiche du texte.

Label

, qui est le

View

dérivée qui

Saluez Sur la plateforme Xamarin est installée, vous pouvez créer une solution Xamarin.Forms dans Visual Studio ou Visual Studio pour Mac. Le Hello solution utilise une bibliothèque de classes Portable pour le code commun. NOTE Bibliothèques de classes portables ont été remplacés par des bibliothèques .NET Standard. Exemples de code à partir de l’ouvrage a été converti pour utiliser les bibliothèques .NET standard.

Cet exemple montre une solution Xamarin.Forms créée dans Visual Studio sans aucune modification. La solution se compose de six projets : Hello, une bibliothèque de classes Portable (PCL ) partagés par les autres projets Hello.Droid, un projet d’application pour Android Hello.iOS, un projet d’application pour iOS Hello.UWP, un projet d’application pour la plateforme Windows universelle (Windows 10 et Windows 10 Mobile) Hello.Windows, un projet d’application pour Windows 8.1 Hello.WinPhone, un projet d’application pour Windows Phone 8.1

NOTE Xamarin.Forms ne gère plus de Windows 8.1, Windows Phone 8.1 ou Windows 10 Mobile, mais les applications Xamarin.Forms s’exécutent sur le bureau Windows 10.

Vous pouvez apporter l’une de ces projets d’application du projet de démarrage, puis générer et exécuter le programme sur un appareil ou un simulateur. Dans la plupart de vos programmes de Xamarin.Forms, vous ne modifient les projets d’application. Souvent, ils restent minuscules stubs simplement pour lancer le programme. La majeure partie de votre objectif sera de la bibliothèque commune à toutes les applications.

Dans les fichiers Les éléments visuels affichés par le Hello programme sont définis dans le constructeur de la dérive de la classe Xamarin.Forms Application .

App

classe.

App

NOTE Les modèles de solution Visual Studio pour Xamarin.Forms créent une page avec un fichier XAML. XAML n’est pas abordé dans cet ouvrage jusqu'à chapitre 7.

Le références section de la Hello projet PCL inclut les assemblys Xamarin.Forms suivants : Xamarin.Forms.Core Xamarin.Forms.Xaml Xamarin.Forms.Platform Le références sections des projets de cinq application incluent des assemblys supplémentaires qui s’appliquent à chaque plate-forme : Xamarin.Forms.Platform.Android Xamarin.Forms.Platform.iOS Xamarin.Forms.Platform.UWP Xamarin.Forms.Platform.WinRT Xamarin.Forms.Platform.WinRT.Tablet Xamarin.Forms.Platform.WinRT.Phone NOTE Le références sections de ces projets répertorient ne sont plus les assemblys. Au lieu de cela, le fichier projet contient un PackageReference étiquettes référençant le package Xamarin.Forms NuGet. Le références section dans les listes de Visual Studio le Xamarin.Forms package plutôt que les assemblys Xamarin.Forms.

Chacun des projets d’application contient un appel à la méthode statique Forms.Init méthode dans le Xamarin.Forms espace de noms. Ce code initialise la bibliothèque Xamarin.Forms. Une version différente de Forms.Init est défini pour chaque plateforme. Vous trouverez les appels à cette méthode dans les classes suivantes : iOS : AppDelegate Android : MainActivity UWP : App (classe), OnLaunched (méthode)

En outre, chaque plateforme doit instancier la App classe emplacement dans la bibliothèque partagée. Cela se produit dans un appel à LoadApplication dans les classes suivantes : iOS : AppDelegate Android : MainActivity UWP : MainPage Sinon, ces projets d’application sont des programmes de « ne rien faire » normal.

Bibliothèque de classes portable ou SAP ? Il est possible de créer une solution Xamarin.Forms avec le code commun dans une bibliothèque de classes Portable (PCL ) ou un projet de ressource partagé (SAP ). Pour créer une solution SAP, sélectionnez l’option partagé dans Visual Studio. Le HelloSap solution montre le modèle SAP sans aucune modification. NOTE Bibliothèques de classes portables a été remplacée par des bibliothèques .NET Standard. Exemples de code à partir de l’ouvrage a été converti pour utiliser les bibliothèques .NET standard. Sinon, les bibliothèques .NET Standard et de bibliothèque de classes portable sont conceptuellement très similaires.

Les regroupements d’approche de bibliothèque tous les courantes de code dans un projet de bibliothèque référencé par les projets d’application de plateforme. Avec l’approche SAP, le code commun existe dans tous les projets d’application de plateforme efficacement et est partagé entre eux. La plupart des développeurs Xamarin.Forms préfère l’approche de la bibliothèque. Dans cet ouvrage, la plupart des solutions utilisent une bibliothèque. Ceux qui utilisent SAP incluent un Sap suffixe du nom de projet. L’approche SAP le code dans le projet partagé permet d’exécuter un code différent pour les différentes plateformes à l’aide de directives de préprocesseur c# ( #if , # elif , et #endif ) avec ces prédéfinis des identificateurs : iOS : __IOS__ Android : __ANDROID__ UWP : WINDOWS_UWP Dans une bibliothèque partagée, vous pouvez déterminer la plateforme que vous exécutez lors de l’exécution, comme vous le verrez plus loin dans ce chapitre.

Étiquettes de texte Le Greetings solution montre comment ajouter un nouveau fichier c# à la Greetings projet. Ce fichier définit une classe nommée GreetingsPage qui dérive de ContentPage . Dans cet ouvrage, la plupart des projets contiennent une seule ContentPage dérivé dont le nom est le nom du projet avec le suffixe Page ajouté. Le GreetingsPage constructeur instancie un Label vue, qui est la vue Xamarin.Forms qui affiche du texte. Le Text propriété est définie sur le texte affiché par le Label . Ce programme définit la Label à la Content propriété du ContentPage . Le constructeur de la App classe instancie ensuite GreetingsPage et lui affecte son MainPage propriété. Le texte est affiché dans le coin supérieur gauche de la page. Sur iOS, cela signifie qu’il chevauche barre d’état de la page. Il existe plusieurs solutions à ce problème : Solution 1. Inclure la marge intérieure dans la page Définir un Padding propriété sur la page. Padding est de type

Thickness

, une structure avec quatre propriétés :

Left Top Right Bottom

définit une zone à l’intérieur d’une page où le contenu est exclu. Cela permet la remplacement de la barre d’état iOS. Padding

Label

pour éviter le

Solution 2. Inclure la marge intérieure simplement pour iOS (SAP uniquement) Définir une propriété « Marge » uniquement sur iOS à l’aide d’un SAP avec une directive de préprocesseur c#. Cela est illustré dans le GreetingsSap solution. Solution 3. Inclure la marge intérieure simplement pour iOS (bibliothèque de classes portable ou SAP) Dans la version de Xamarin.Forms utilisé pour le livre, un Padding propriété spécifique à iOS dans une bibliothèque de classes portable ou une SAP peut être sélectionnée à l’aide de la Device.OnPlatform ou Device.OnPlatform méthode statique. Ces méthodes sont désormais déconseillés. Le Device.OnPlatform méthodes sont utilisées pour exécuter du code de plateforme spécifique ou pour sélectionner les valeurs spécifiques à la plateforme. En interne, elles rendent utilisent le Device.OS en lecture seule propriété statique, qui retourne un membre de la TargetPlatform énumération : iOS Android Windows

pour les appareils UWP.

Le Device.OnPlatform méthodes, le Device.OS propriété et le TargetPlatform énumération sont tous maintenant déconseillé. Au lieu de cela, utilisez le Device.RuntimePlatform propriété et comparer le string retourner de valeur avec les champs statiques suivantes : , la chaîne « iOS » Android , la chaîne « Android » UWP , la chaîne « UWP », qui fait référence à la plateforme Windows universelle iOS

Le Device.Idiom propriété en lecture seule statique est liée. Cela retourne un membre de la ces membres :

TargetIdiom

, ce qui a

Desktop Tablet Phone Unsupported

n’est pas utilisé

Pour iOS et Android, la limite entre Tablet et Phone est une largeur de portrait de 600 unités. Pour la plateforme Windows, Desktop indique une application UWP s’exécutant sous Windows 10, et Phone indique une application UWP s’exécutant sous Windows 10 application.

3 a de solution. Définir la marge sur l’étiquette Le

propriété a été introduite trop tard pour être inclus dans le livre, mais il est également de type Thickness et vous pouvez le définir sur le Label pour définir une zone en dehors de la vue qui est incluse dans le calcul de la disposition de la vue. Margin

Le Padding propriété est disponible uniquement sur disponible sur tous les View dérivés.

Layout

et

Page

dérivés. Le

Margin

propriété n’est

Solution 4. Centrer l’étiquette dans la page Vous pouvez centrer le Label au sein de la Page (ou le placer dans un des huit autres endroits) en définissant le HorizontalOptions et VerticalOptions propriétés de la Label une valeur de type LayoutOptions . Le LayoutOptions structure définit deux propriétés : Un Alignment propriété de type LayoutAlignment , une énumération avec quatre membres : Start , ce qui signifie que gauche ou supérieur en fonction de la orientation, Center , End , ce qui signifie que le droit ou inférieur selon l’orientation, et Fill . Un

Expands

propriété de type

bool

.

Généralement ces propriétés ne sont pas utilisées directement. Au lieu de cela, les combinaisons de ces deux propriétés sont fournies par huit propriétés en lecture seule statiques de type LayoutOptions : LayoutOptions.Start LayoutOptions.Center LayoutOptions.End LayoutOptions.Fill LayoutOptions.StartAndExpand LayoutOptions.CenterAndExpand LayoutOptions.EndAndExpand LayoutOptions.FillAndExpand

et VerticalOptions sont des propriétés les plus importantes dans la disposition de Xamarin.Forms et sont décrits plus en détail dans chapitre 4. Défilement de la pile. HorizontalOptions

Voici le résultat avec la LayoutOptions.Center :

HorizontalOptions

et

VerticalOptions

propriétés de

Label

toutes deux définies sur

Solution 5. Centrer le texte dans l’étiquette Vous pouvez également centrer le texte (ou placez-le dans les huit autres emplacements sur la page) en définissant le HorizontalTextAlignment et VerticalTextAlignment propriétés de Label à un membre de la TextAlignment énumération : Start

, signification gauche ou supérieur (selon l’orientation)

Center End

, ce qui signifie qu’à droite ou en bas (selon l’orientation)

Ces deux propriétés sont définies uniquement par Label , tandis que le HorizontalAlignment et VerticalAlignment propriétés sont définies par View et héritée par toutes les View dérivés. Les résultats visuels peuvent sembler similaires, mais ils sont très différents, comme illustré dans le chapitre suivant.

Liens connexes Chapitre 2, texte intégral (PDF ) Exemples de chapitre 2 Chapitre 2 F# exemples Bien démarrer avec Xamarin.Forms

Résumé du chapitre 3. Détails du texte 11/01/2019 • 12 minutes to read • Edit Online

télécharger l’exemple Ce chapitre explore le

Label

vue plus en détail, y compris les couleurs, polices et la mise en forme.

Habillage des paragraphes Lorsque le Text propriété du Label contient du texte long, Label encapsule automatiquement à plusieurs lignes comme illustré par la Baskervilles exemple. Vous pouvez incorporer des codes Unicode tels que « \u2014 » pour le cadratin, ou C# caractères comme « \r » pour arrêter l’exécution vers une nouvelle ligne. Lorsque le HorizontalOptions et VerticalOptions propriétés d’un Label sont définies sur LayoutOptions.Fill , le la taille globale de la Label est régie par l’espace qui son conteneur met à disposition. Le Label est dite contraint. La taille de la Label est la taille de son conteneur. Lorsque le

et VerticalOptions propriétés sont définies sur les valeurs autres que LayoutOptions.Fill , la taille de la Label est régie par l’espace nécessaire pour restituer le texte, jusqu'à la taille de son conteneur rend disponible pour le Label . Le Label est dite sans contrainte et détermine sa taille. HorizontalOptions

(Remarque : Les termes du contrat contraint et sans contrainte peut-être absurdes, une vue sans contrainte est généralement inférieure à une vue contrainte. En outre, ces termes ne sont pas utilisés régulièrement dans les premiers chapitres du livre.) Une vue comme un Label peut être limité dans une dimension et sans contraintes dans l’autre. Un uniquement habiller le texte sur plusieurs lignes si elle est contrainte horizontalement.

Label

sera

Si un Label est contraint, il peut-être occuper beaucoup plus d’espace requis pour le texte. Le texte peut être placé dans la zone globale de la Label . Définir le HorizontalTextAlignment propriété à un membre de la TextAlignment énumération ( Start , Center , ou End ) pour contrôler l’alignement de toutes les lignes du paragraphe. La valeur par défaut est Start et aligne le texte à gauche. Définir le VerticalTextAlignment propriété à un membre de la TextAlignment énumération pour positionner le texte en haut, center ou en bas de la zone occupée par le Label . Définir le LineBreakMode propriété à un membre de la LineBreakMode énumération ( WordWrap , CharacterWrap , NoWrap , HeadTruncation , MiddleTruncation , ou TailTruncation ) pour contrôle comment le plusieurs lignes dans un saut de paragraphe ou sont tronqués.

Couleurs du texte et d’arrière-plan Définir le TextColor et et d’arrière-plan.

BackgroundColor

propriétés de

Label

à

Color

valeurs pour contrôler la couleur du texte

Le BackgroundColor s’applique à l’arrière-plan de toute la zone occupée par le Label . Selon le HorizontalOptions et VerticalOptions propriétés, que la taille peut être beaucoup plus volumineuses que la zone requise pour afficher le texte. Vous pouvez utiliser des couleurs pour faire des essais avec différentes valeurs de HorizontalOptions , VerticalOptions , HorizontalExeAlignment , et VerticalTextAlignment pour voir comment elles affectent la taille et la position de la Label et la taille et la position du texte dans le Label .

La structure de couleur Le Color structure vous permet de spécifier les couleurs en tant que valeurs de rouge-vert-bleu (RVB ) ou des valeurs de Teinte-Saturation-Luminosité (TSL ), ou avec un nom de couleur. Un canal Alpha est également disponible pour indiquer la transparence. Utilisez un

Color

constructeur pour spécifier :

un nuance de gris un valeur RVB un valeur RVB avec transparence Les arguments sont

double

valeurs comprises entre 0 et 1.

Vous pouvez également utiliser plusieurs méthodes statiques pour créer

Color

valeurs :

pour double valeurs RVB à partir de 0 à 1 Color.FromRgb pour les valeurs RVB de nombre entier compris entre 0 et 255 Color.FromRgba pour double valeurs RVB avec transparence Color.FromRgba pour les valeurs RVB d’entières avec la transparence Color.FromHsla pour double valeurs TSL avec transparence Color.FromUint pour un uint valeur calculée en tant que ( B + 256 * ( G + 256 * ( R + 256 * A ))) Color.FromHex pour un string format de chiffres hexadécimaux sous la forme « #AARRGGBB » ou « #RRGGBB » ou « #ARGB » ou « #RGB », où chaque lettre correspond à un chiffre hexadécimal pour la valeur alpha, rouge, verts et bleus de canaux. Cette méthode est principale utilisé pour les conversions de couleur XAML, comme indiqué dans chapitre 7, XAML et code. Color.FromRgb

Une fois créé, un Color valeur est immuable. Les caractéristiques de la couleur peuvent être obtenus à partir des propriétés suivantes : R G B A Hue Saturation Luminosity

Il s’agit de tous les

double

valeurs comprises entre 0 et 1.

définit également 240 champs statiques publics en lecture seule des couleurs courantes. Au moment de que l’ouvrage a été écrit, des couleurs courantes uniquement 17 étaient disponibles. Color

Un autre champ statique public en lecture seule définit une couleur avec tous les canaux de couleur a la valeur zéro : Color.Transparent

Plusieurs méthodes d’instance permettent la modification d’une couleur existante pour créer une nouvelle couleur : AddLuminosity MultiplyAlpha WithHue WithLuminosity

WithSaturation

Enfin, deux propriétés statiques en lecture seule définissent la valeur de couleur spécial : Color.Default

, la valeur tous les canaux –1

Color.Accent

Permet d’appliquer le modèle de couleurs de la plateforme, et par conséquent a une signification différente dans différents contextes sur différentes plateformes. Par défaut, les jeux de couleurs de plateforme sont : Color.Default

iOS : Texte sombre sur un arrière-plan clair Android : Texte sur un arrière-plan foncé (dans le livre) ou texte sombre sur un arrière-plan clair de lumière (pour Material Design via AppCompat dans le master branche de l’exemple de référentiel de code) UWP : Texte sombre sur un arrière-plan clair Le Color.Accent valeur les résultats dans une couleur spécifique à la plateforme (et parfois sélectionnables par l’utilisateur) qui est visible sur un arrière-plan sombre ou clair.

Changer les couleurs de l’application Les différentes plateformes ont un modèle de couleurs par défaut, comme indiqué dans la liste ci-dessus. Lorsque vous ciblez Android, il est possible de basculer vers un schéma sombre sur clair en spécifiant un thème clair dans le fichier Android.Manifest.xml ou en AppCompat Ajout et Material Design. Pour les plateformes Windows, le thème de couleur est généralement sélectionné par l’utilisateur, mais vous pouvez ajouter un RequestedTheme attribut la valeur Light ou Dark dans le fichier App.xaml de la plateforme. Par défaut, le fichier App.xaml dans le projet UWP contient un RequestedTheme attribut la valeur Light .

Attributs et les tailles de police Définir le FontFamily propriété du Label à une chaîne telle que « Times Roman » pour sélectionner une famille de polices. Toutefois, vous devez spécifier une famille de polices qui est pris en charge sur la plateforme spécifique, et les plateformes ne sont pas cohérents à cet égard. Définir le FontSize propriété du Label à un double pour spécifier la hauteur approximative de la police. Consultez chapitre 5, gestion des tailles, pour plus d’informations sur le choix intelligemment les tailles de police. Vous pouvez également obtenir un plusieurs prédéfini dépend de la plateforme de tailles de police. Statiques Device.GetNamedSize (méthode) et surcharger retournent un double valeur de taille de police appropriée à la plateforme basée sur les membres de la NamedSize énumération ( Default , Micro , Small , Medium , et Large ). La valeur retournée par la Medium membre n’est pas nécessairement identique à Default . Le NamedFontSizes exemple affiche le texte avec ces tailles nommées. Définir le FontAttributes propriété du Label à un membre de ces FontAttributes énumération, Bold , ou None . Vous pouvez combiner la Bold et Italic membres avec le langage c# opérateur de bits OR.

Italic

,

Texte mis en forme Dans tous les exemples jusqu’ici, l’intégralité du texte affiché par le Label a été formaté de manière uniforme. Pour faire varier la mise en forme dans une chaîne de texte, ne définissez pas la Text propriété du Label . Au lieu de cela, définissez la FormattedText propriété à un objet de type FormattedString . FormattedString

propre

Text

,

a un

propriété qui est une collection de Span objets. Chaque Span objet possède son , FontSize , FontAttributes , ForegroundColor , et BackgroundColor propriétés.

Spans

FontFamily

Le VariableFormattedText exemple montre comment utiliser le FormattedText propriété pour une seule ligne de texte, et VariableFormattedParagraph illustre cette technique pour tout un paragraphe, comme illustré ici :

Le NamedFontSizes programme utilise un seul de police nommé pour chaque plateforme.

Liens connexes Chapitre 3 de texte intégral (PDF ) Exemples de chapitre 3 Chapitre 3 F# exemples Label Utilisation des couleurs

Label

et un

FormattedString

objet pour afficher toutes les tailles

Résumé du chapitre 4. Défilement de la pile 08/12/2018 • 11 minutes to read • Edit Online

télécharger l’exemple Ce chapitre est principalement consacré au introduisant le concept de disposition, qui est le terme général pour les classes et les techniques de Xamarin.Forms utilise pour organiser l’affichage visuel de plusieurs vues sur la page. Disposition implique plusieurs classes qui dérivent de StackLayout .

Layout

et

Layout

. Ce chapitre se concentre sur

NOTE Le FlexLayout introduite dans Xamarin.Forms 3.0 peut être utilisé de manière similaire à souplesse.

A également introduit dans ce chapitre sont les

ScrollView

,

Frame

, et

BoxView

StackLayout

, mais avec plus de

classes.

Piles de vues dérive de Layout et hérite d’un Children propriété de type IList . Vous ajoutez plusieurs éléments d’affichage à cette collection, et StackLayout les affiche dans une pile horizontale ou verticale. StackLayout

Définir le Vertical

propriété du StackLayout à un membre de la ou Horizontal . La valeur par défaut est Vertical . Orientation

Définir le Spacing propriété du valeur par défaut est 6.

StackLayout

à un

double

StackOrientation

énumération, soit

valeur à spécifier un espacement entre les enfants. La

Dans le code, vous pouvez ajouter des éléments à la Children collection de StackLayout dans un for ou foreach boucle comme illustré dans le ColorLoop exemple, ou vous pouvez initialiser le Children collection avec une liste des vues individuelles comme illustré dans ColorList. Les enfants doivent dériver de View mais peut inclure d’autres StackLayout objets.

Faire défiler un contenu Si un

contient trop grand nombre d’enfants à afficher sur une page, vous pouvez placer le dans un ScrollView pour permettre le défilement.

StackLayout

StackLayout

Définir le

Content

propriété du ScrollView à la vue que vous souhaitez faire défiler. Il s’agit souvent un StackLayout , mais il peut être n’importe quelle vue.

Définir le

Orientation

propriété du ScrollView à un membre de la ScrollOrientation propriété, Vertical , Horizontal , ou Both . La valeur par défaut est Vertical . Si le contenu d’un ScrollView est un StackLayout , les deux orientations doivent être cohérentes. Le ReflectedColors exemple illustre l’utilisation de ScrollView et StackLayout pour afficher les couleurs disponibles. L’exemple montre également comment utiliser la réflexion .NET pour obtenir toutes les propriétés statiques publiques et les champs de la Color structure sans avoir à les répertorier explicitement.

L’option se développe

Lorsqu’un StackLayout piles ses enfants, chacun d’eux occupe une position particulière au sein de la hauteur totale de la StackLayout qui varie selon la taille de l’enfant et les paramètres de son HorizontalOptions et VerticalOptions propriétés. Ces propriétés sont attribuées aux valeurs de type LayoutOptions . Le

LayoutOptions

structure définit deux propriétés :

du type énumération de type bool

Alignment Expands

LayoutAlignment

avec quatre membres,

Start

,

Center

,

End

, et

Fill

Pour votre commodité, le LayoutOptions structure définit également les huit champs en lecture seule statiques de type LayoutOptions qui englobent toutes les combinaisons des propriétés de l’instance de deux : LayoutOptions.Start LayoutOptions.Center LayoutOptions.End LayoutOptions.Fill LayoutOptions.StartAndExpand LayoutOptions.CenterAndExpand LayoutOptions.EndAndExpand LayoutOptions.FillAndExpand

La discussion suivante implique un est analogue.

StackLayout

avec une orientation verticale par défaut. Horizontal

StackLayout

Pour un vertical StackLayout , le HorizontalOptions paramètre détermine la façon dont un enfant est positionné horizontalement dans la largeur de la StackLayout . Un Alignment paramètre Start , Center , ou End provoque l’enfant d’être horizontalement sans contrainte. L’enfant détermine sa propre largeur et est positionné sur la gauche, centre ou à droite de la StackLayout . Le Fill option entraîne l’enfant à limiter horizontalement et remplit la largeur de la StackLayout . Pour un vertical StackLayout , chaque enfant est verticalement sans contrainte et obtient un vertical de l’emplacement en fonction de la hauteur de l’enfant, auquel cas la VerticalOptions paramètre n’est pas pertinent. Si vertical StackLayout lui-même est sans contrainte—autrement dit si son VerticalOptions paramètre est , Center , ou End , puis la hauteur de la StackLayout est la hauteur totale de ses enfants.

Start

Toutefois, si la verticale StackLayout est contraint verticalement—si son VerticalOptions paramètre est Fill — puis la hauteur de la StackLayout sera la hauteur de son conteneur, ce qui peut être supérieure au total hauteur de ses enfants. Si tel est le cas, et si au moins un enfant a un VerticalOptions avec un Expands indicateur de true , puis l’espace supplémentaire dans le StackLayout est répartis équitablement entre tous les enfants avec un Expands indicateur de true . La hauteur totale des enfants sera ensuite égale à la hauteur de la StackLayout et le Alignment dans le cadre de la VerticalOptions paramètre détermine la façon dont l’enfant est positionnée verticalement dans son emplacement. Cela est illustré dans le VerticalOptionsDemo exemple.

Frame et BoxView Ces deux vues rectangulaires servent souvent à des fins de présentation. Le

affiche un cadre rectangulaire autour d’une autre vue, ce qui peut être une disposition comme StackLayout . Frame hérite une Content propriété à partir de ContentView que vous définissez à la vue à afficher dans le Frame . Le Frame est transparent par défaut. Définissez les trois propriétés suivantes pour personnaliser l’apparence de l’image : Frame

Le OutlineColor propriété pour le rendre visible. Il est courant de définir OutlineColor à Color.Accent lorsque vous ne connaissez pas le jeu de couleurs sous-jacent. Le HasShadow propriété peut être définie sur true pour afficher une ombre noir sur les appareils iOS. Définir le Padding propriété un Thickness le contenu de valeur à laisser un espace entre l’image et l’image. La valeur par défaut est de 20 unités de tous les côtés. Le Frame a la valeur par défaut HorizontalOptions et VerticalOptions les valeurs de signifie que le Frame remplira son conteneur. Avec d’autres paramètres, la taille de la de son contenu. Le

Frame

Le

BoxView

, ce qui est basée sur la taille

LayoutOptions.Fill Frame

est illustrée dans le FramedText exemple. affiche une zone rectangulaire de la couleur spécifiée par son

Color

propriété.

est limité (son HorizontalOptions et VerticalOptions propriétés ont leurs paramètres par défaut de LayoutOptions.Fill ), le BoxView remplit l’espace disponible pour lui. Si le BoxView n’est pas limitée (avec HorizontalOptions et LayoutOptions paramètres de Start , Center , ou End ), il a une dimension par défaut du carré de 40 unités. Un BoxView peut être limité dans une dimension et sans contraintes dans l’autre. Si le

BoxView

Souvent, vous devez définir le WidthRequest et HeightRequest propriétés de spécifique. Ceci est illustré par la SizedBoxView exemple.

BoxView

afin de lui donner une taille

Vous pouvez utiliser plusieurs instances de StackLayout pour combiner un BoxView et plusieurs Label instances dans un Frame pour afficher une couleur particulière, puis placez chacun de ces vues dans une StackLayout dans un ScrollView pour créer l’attrayante liste de couleurs affichées dans le ColorBlocks exemple :

Un ScrollView dans un StackLayout ? Placer un StackLayout dans un ScrollView est commun, mais en ajoutant un ScrollView dans un StackLayout est également parfois commode. En théorie, cela ne doit pas être possible, car les enfants d’une verticale StackLayout sont verticalement sans contrainte. Mais un ScrollView doit donc être contraint verticalement. Il doit disposer d’une hauteur spécifique afin qu’elle puisse ensuite déterminer la taille de son enfant pour le défilement. L’astuce consiste à donner le ScrollView enfant de la Cela est illustré dans le BlackCat exemple.

StackLayout

un

VerticalOptions

paramètre

FillAndExpand

Le BlackCat exemple montre également comment définir et accéder aux ressources de programme qui sont incorporés dans la bibliothèque partagée. Cela est également possible avec les projets de ressource partagé (SAP )

.

mais le processus est un peu plus compliqué, comme le BlackCatSap montre des exemples.

Liens connexes Chapitre 4 de texte intégral (PDF ) Exemples de chapitre 4 Chapitre 4 F# exemples StackLayout ScrollView BoxView

Résumé du chapitre 5. Gestion des tailles 08/12/2018 • 7 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Plusieurs tailles de Xamarin.Forms ont été rencontrées jusqu'à présent : La hauteur de la barre d’état iOS est 20 Le BoxView a une largeur par défaut et une hauteur de 40 La valeur par défaut Padding dans un Frame est 20 La valeur par défaut Spacing sur le StackLayout est 6 Le Device.GetNamedSize méthode retourne une taille de police numérique Ces tailles ne sont pas des pixels. Au lieu de cela, ils sont des unités indépendantes du périphérique reconnues indépendamment par chaque plateforme.

Pixels, points, points de distribution, adresses IP dynamiques et DIUs Au début de l’historique du Mac d’Apple et Microsoft Windows, les programmeurs a travaillé en unités de pixels. Toutefois, l’arrivée de résolution supérieure affiche requis une approche abstraite et plus virtualisée aux coordonnées d’écran. Dans l’univers Mac, les programmeurs travaillé en unités de points, traditionnellement 1/72ème de pouce, les développeurs Windows utilisé lors de la unités indépendantes du périphérique (DIUs) en fonction de 1/96ème de pouce. Toutefois, les appareils mobiles sont généralement conservées plus proches de la face et ont une résolution supérieure à desktop écrans, ce qui implique qu’une densité de pixels supérieure peut être tolérée. Les programmeurs ciblant les appareils iPhone et iPad d’Apple continuent de fonctionner en unités de points, mais il existe 160 de ces points par pouce. Selon l’appareil, il peut être 1, 2 ou 3 pixels vers le point. Android est similaire. Les programmeurs traitent en unités de pixels indépendants de densité (dps), et la relation entre les points de distribution et de pixels est basée sur 160 DP par pouce. Les téléphones Windows et les appareils mobiles ont également établi des facteurs d’échelle qui impliquent quelque chose proche de 160 unités indépendantes du périphérique par pouce. NOTE Xamarin.Forms ne gère plus n’importe quel téléphone basée sur Windows ou un appareil mobile.

En résumé, un programmeur Xamarin.Forms ciblant les téléphones et tablettes peut supposer que toutes les unités de mesure sont basées sur le critère suivant : 160 unités par pouce, équivalent à 64 unités pour le centimètre En lecture seule

Width

et

Height

propriétés définies par

VisualElement

ont par défaut les valeurs de « simuler »

–1. Uniquement lorsqu’un élément a été dimensionné et prise en charge dans la disposition de ces propriétés reflètent la taille réelle de l’élément dans les unités indépendantes du périphérique. Cette taille inclut au moins un Padding défini sur l’élément, mais pas le Margin . Un élément visuel se déclenche le SizeChanged événement lors de son Width ou exemple utilise cet événement pour afficher la taille de l’écran de programme.

Height

a changé. Le WhatSize

Tailles SURMONTANT Le MetricalBoxView utilise l’autre centimètre large.

WidthRequest

et

HeightRequest

pour afficher un

BoxView

un pouce en hauteur et

Tailles de police estimé Le tailles de police exemple montre comment utiliser la règle de 160-unités-à-the-pouce pour spécifier des tailles de police en unités de points. La cohérence visuelle entre les plateformes à l’aide de cette technique est meilleure que Device.GetNamedSize .

Ajustement du texte à la taille disponible Il est possible d’adapter un bloc de texte dans un rectangle particulier en calculant un les critères suivants :

FontSize

de la

Label

selon

Interligne est de 120 % de la taille de police (130 % sur les plateformes Windows). Largeur de caractère moyenne est de 50 % de la taille de police. Le EstimatedFontSize exemple illustre cette technique. Ce programme a été écrit avant la Margin propriété était disponible, de sorte qu’il utilise un ContentView avec un Padding paramètre pour simuler un marge.

Une horloge de la taille de l’ajustement Le FitToSizeClock exemple montre comment utiliser Device.StartTimer à démarrer un minuteur qui indique périodiquement à l’application lorsqu’il est temps pour mettre à jour de l’horloge. La taille de police est définie à un sixième de la largeur de page pour rendre l’affichage aussi grand que possible.

Problèmes d’accessibilité Le EstimatedFontSize programme et le FitToSizeClock programme les deux contiennent un subtil défaut : si

l’utilisateur modifie les paramètres d’accessibilité du téléphone sur Android ou Windows 10 Mobile, le programme n’est plus peut estimer la taille du texte est rendu en fonction de la taille de police. Le AccessibilityTest exemple illustre ce problème.

Ajustement empirique de texte Un autre en fonction du texte à un rectangle consiste à empirique calculer la taille du rendu de texte et l’ajuster vers le haut ou vers le bas. Le programme dans les appels de livre GetSizeRequest sur un élément visuel pour obtenir la taille souhaitée de l’élément. Méthode a été déconseillée et les programmes doivent appeler à la place Measure . Pour un Label , le premier argument doit être de la largeur du conteneur (pour permettre le retour à la ligne), tandis que le second argument doit être défini à Double.PositiveInfinity pour que la hauteur sans contrainte. Le EmpiricalFontSize exemple illustre cette technique.

Liens connexes Chapitre 5 de texte intégral (PDF ) Exemples de chapitre 5 Chapitre 5 F# exemples

Résumé du chapitre 6. Clics de bouton 08/12/2018 • 8 minutes to read • Edit Online

télécharger l’exemple Le Button est la vue qui permet aux utilisateurs de lancer une commande. Un Button est identifié par le texte (et éventuellement une image comme illustré dans chapitre 13, Bitmaps). Par conséquent, Button définit un grand nombre des propriétés du mêmes comme Label : Text FontFamily FontSize FontAttributes TextColor

définit également trois propriétés qui régissent l’apparence de sa bordure, mais la prise en charge de ces propriétés et leur indépendance mutuelle est spécifiques à la plateforme : Button

de type Color BorderWidth de type Double BorderRadius de type Double BorderColor

hérite également toutes les propriétés de HorizontalOptions , et VerticalOptions . Button

VisualElement

et

View

, y compris

BackgroundColor

,

Traitement de la, cliquez sur Le Button classe définit un Clicked événement est déclenché lorsque l’utilisateur actionne le Button . Le Click gestionnaire est de type EventHandler . Le premier argument est le Button génère l’événement de l’objet ; le deuxième argument est un EventArgs objet qui fournit des informations supplémentaires. Le ButtonLogger simple illustre

Clicked

gestion.

Bouton de partage clique sur Plusieurs Button vues peuvent partager la même Clicked gestionnaire, mais le gestionnaire doit généralement déterminer quelle Button est chargé pour un événement particulier. Une approche consiste à stocker les différentes Button objets en tant que champs et celle qui déclenche l’événement dans le Gestionnaire de contrôle. Le TwoButtons exemple illustre cette technique. Le programme montre aussi comment définir le IsEnabled propriété d’un Button à false lorsque vous appuyez sur la Button n’est plus valide. Désactivé Button ne génère pas un Clicked événement.

Gestionnaires d’événements anonyme Il est possible de définir Clicked gestionnaires en tant que fonctions lambda anonyme, comme le ButtonLambdas montre des exemples. Toutefois, gestionnaires anonymes ne peut pas être partagés sans un code de réflexion désordonnées.

Distinction des vues avec des ID

Plusieurs Button objets peuvent également être distingués en définissant le StyleId propriété ou AutomationId propriété à un string . Cette propriété est définie par Element , mais elle n’est pas utilisée dans Xamarin.Forms. Elle est destinée à être utilisée uniquement par les programmes d’application. Le SimplestKeypad exemple utilise le même gestionnaire d’événements pour toutes les touches numériques 10 sur un pavé numérique et fait la distinction entre eux avec le StyleId propriété :

Enregistrer les données temporaires De nombreuses applications ont besoin pour enregistrer les données lorsqu’un programme est arrêté et recharger ces données lorsque le programme démarre à nouveau. Le Application classe définit plusieurs membres qui aident à votre programme enregistrer et restaurer les données temporaires : Le Properties propriété est un dictionnaire avec string clés et object éléments. Le contenu du dictionnaire est automatiquement enregistré dans le stockage local des applications avant l’arrêt du programme et rechargé lorsque le programme démarre. Le Application classe définit trois méthodes virtuelles protégées qui le programme de standard App substitue : OnStart , OnSleep , et OnResume . Ils se rapportent aux cycle de vie des applications événements. Le SavePropertiesAsync méthode enregistre le contenu du dictionnaire. Il n’est pas nécessaire d’appeler SavePropertiesAsync . Le contenu du dictionnaire est automatiquement enregistré avant l’arrêt du programme et récupéré avant le démarrage du programme. Il est utile lors du test de programme pour enregistrer les données si le programme se bloque. Également est utile : , une propriété statique qui retourne actuel utiliser pour obtenir le Properties dictionnaire. Application.Current

Application

objet que vous pouvez ensuite

La première étape consiste à identifier toutes les variables dans la page que vous souhaitez rendre persistantes lorsque le programme se termine. Si vous connaissez tous les endroits où ces variables changer, vous pouvez simplement les ajouter à la Properties dictionnaire à ce stade. Dans le constructeur de la page, vous pouvez définir les variables à partir de la Properties dictionnaire si la clé existe. Un programme plus vaste devrez probablement à traiter les événements de cycle de vie d’application. La plus importante est la OnSleep (méthode). Un appel à cette méthode indique que le programme a quitté le premier plan. Peut-être l’utilisateur a appuyé sur le accueil bouton sur l’appareil, ou affiche toutes les applications ou s’arrête le téléphone. Un appel à OnSleep est la seule notification qu’un programme reçoit avant d’être arrêté. Le

programme doit saisir cette occasion pour vous assurer que le

Properties

dictionnaire est à jour.

Un appel à OnResume indique que le programme ne s’est pas achevé après le dernier appel à OnSleep mais est maintenant en cours d’exécution au premier plan à nouveau. Le programme peut utiliser cette opportunité pour actualiser les connexions internet (par exemple). Un appel à OnStart se produit lors du démarrage du programme. Il n’est pas nécessaire d’attendre jusqu'à ce que l’appel de cette méthode pour accéder à la Properties dictionnaire, car le contenu a déjà été restaurée lorsque le App constructeur est appelé. Le PersistentKeypad exemple est très similaire à SimplestKeypad , à ceci près que le programme utilise le OnSleep remplacement pour enregistrer l’entrée de clavier en cours, et le constructeur de la page pour restaurer ces données. NOTE Une autre approche pour l’enregistrement des paramètres de programme est fournie par le Xamarin.Essentials préférences classe.

Liens connexes Chapitre 6 de texte intégral (PDF ) Exemples de chapitre 6 Chapitre 6 F# exemples Bouton de Xamarin.Forms

Résumé du chapitre 7. XAML et code 08/12/2018 • 10 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Xamarin.Forms prend en charge un langage de balisage basé sur XML appelé l’Extensible Application Markup Language ou le XAML (prononcé « zammel »). XAML offre une alternative à c# dans la définition de la disposition de l’interface utilisateur d’une application Xamarin.Forms et dans la définition des liaisons entre les éléments d’interface utilisateur et les données sous-jacentes.

Propriétés et les attributs Structures et classes de Xamarin.Forms deviennent des éléments XML dans XAML, et les propriétés de ces classes et des structures deviennent des attributs XML. Pour être instancié en XAML, une classe doit avoir généralement d’un constructeur sans paramètre public. Les propriétés définies dans XAML doivent avoir public set accesseurs. Pour les propriétés des types de base de données ( string , double , bool , et ainsi de suite), l’analyseur XAML utilise la norme TryParse méthodes pour convertir les paramètres de l’attribut à ces types. L’analyseur XAML peut également facilement gérer des types énumération, et il peut associer des membres de l’énumération si le type d’énumération est marqué avec le Flags attribut. Pour aider l’analyseur XAML, des types plus complexes (ou propriétés de ces types) peuvent inclure un TypeConverterAttribute qui identifie une classe qui dérive de TypeConverter qui prend en charge la conversion à partir de valeurs de chaîne à ces types. Par exemple, le ColorTypeConverter convertit de noms et les chaînes, telles que « #rrggbb », couleur dans Color valeurs.

Syntaxe d’élément de propriété Dans XAML, les classes et les objets créés à partir de celles-ci sont exprimées en tant qu’éléments XML. Ils sont appelés éléments objet. La plupart des propriétés de ces objets sont exprimées en tant qu’attributs XML. Ils sont appelés les attributs de propriété. Parfois, une propriété doit être définie à un objet qui ne peuvent pas être exprimé sous forme de chaîne simple. Dans ce cas, XAML prend en charge une balise appelée un élément property qui se compose du nom de la classe et du nom de propriété séparés par un point. Un élément objet peut ensuite apparaître dans une paire de balises d’élément de propriété.

Ajout d’une page XAML à votre projet Une bibliothèque de classes Portable Xamarin.Forms peut contenir une page XAML quand il est tout d’abord créé, ou vous pouvez ajouter une page XAML à un projet existant. Dans la boîte de dialogue Ajouter un nouvel élément, choisissez l’élément qui fait référence à une page XAML, ou ContentPage et XAML. (Pas un ContentView .)

NOTE Options de Visual Studio ont été modifiés depuis la rédaction de ce chapitre.

Deux fichiers sont créés : un fichier XAML avec la .xaml d’extension de nom de fichier et un fichier c# avec l’extension. xaml.cs. Le fichier c# est souvent appelé le code-behind du fichier XAML. Le fichier code-behind est une définition de classe partielle qui dérive de ContentPage . Au moment de la génération, le XAML est analysé et une autre définition de classe partielle est générée pour la même classe. Cette classe générée inclut une méthode nommée InitializeComponent qui est appelée à partir du constructeur du fichier code-behind. Pendant l’exécution, à la fin de la InitializeComponent appeler, tous les éléments du fichier XAML ont été instanciés et initialisés comme si elles avaient été créées dans le code c#. L’élément racine dans le fichier XAML est ContentPage . La balise racine contient au moins deux déclarations d’espace de noms XML, un pour les éléments de Xamarin.Forms et l’autre définition d’un x préfixe pour les éléments et attributs intrinsèques à toutes les implémentations XAML. La balise racine contient également un x:Class attribut qui indique l’espace de noms et le nom de la classe qui dérive de ContentPage . Cela correspond à l’espace de noms et le nom dans le fichier code-behind. La combinaison de XAML et de code est illustrée par la CodePlusXaml exemple.

Le compilateur XAML Xamarin.Forms a un compilateur XAML, mais son utilisation est facultative en fonction de l’utilisation d’un XamlCompilationAttribute . Si le XAML n’est pas compilé, le XAML est analysé au moment de la génération et le fichier XAML est incorporé dans la bibliothèque PCL, où il est également analysé lors de l’exécution. Si le XAML est compilé, le processus de génération convertit le XAML dans un format binaire et le traitement de l’exécution est plus efficace.

Spécificité de plateforme dans le fichier XAML Dans XAML, le OnPlatform classe peut être utilisée pour sélectionner le balisage de dépend de la plateforme. Ceci est une classe générique et doit être instancié avec une x:TypeArguments attribut qui correspond au type de cible. Le OnIdiom classe est similaire mais utilisé beaucoup moins souvent. L’utilisation de OnPlatform a changé depuis le livre a été publié. Il a été initialement utilisé conjointement avec les propriétés nommées iOS , Android , et WinPhone . Il est maintenant utilisé avec enfant On objets. Définir le Platform en une chaîne cohérente avec le public const champs de la Device classe. Définir le Value propriété une valeur cohérente avec la x:TypeArguments attribut de la OnPlatform balise. est illustrée dans le ScaryColorList exemple, appelée ainsi car il contient des blocs de XAML quasiment identique. L’existence de ce balisage et répétitive suggère que les techniques doivent être disponibles pour la réduire. OnPlatform

Les attributs de propriété de contenu Certains éléments de propriété se produisent très fréquemment, telles que la balise sur l’élément racine d’un ContentPage , ou le balise qui englobe les enfants de StackLayout . Chaque classe est autorisé à identifier une propriété avec une ContentPropertyAttribute sur la classe. Pour cette propriété, les balises d’élément de propriété ne sont pas nécessaires. ContentPage définit sa propriété de contenu en tant que Content , et Layout (la classe à partir de laquelle StackLayout dérive) définit sa propriété de contenu en tant que Children . Ces balises d’élément de propriété ne sont pas nécessaires.

L’élément de propriété de

Label

est

Text

.

Texte mis en forme Le TextVariations exemple contient plusieurs exemples de paramètre de la Text et FormattedText propriétés de Label . Dans XAML, Span objets apparaissent en tant qu’enfants de le FormattedString objet. Quand une chaîne multiligne est définie sur le Text propriété, les caractères de fin de ligne sont convertis en caractères d’espace, mais les caractères de fin de ligne sont conservées quand une chaîne multiligne apparaît en tant que contenu de la Label ou Label.Text balises :

Liens connexes Chapitre 7 de texte intégral (PDF ) Exemples de chapitre 7 Chapitre 7 F# exemple Notions de base XAML

Résumé du chapitre 8. Code et XAML en harmonie 08/12/2018 • 5 minutes to read • Edit Online

télécharger l’exemple Ce chapitre explore XAML de façon plus approfondie, et en particulier comment code et XAML interagissent.

Passage des arguments En règle générale, une classe instanciée dans XAML doit avoir un constructeur sans paramètre public ; l’objet résultant est initialisé par le biais des paramètres de propriété. Toutefois, il existe deux autres méthodes que les objets peuvent être instanciés et initialisés. Bien qu’il s’agit des techniques à usage général, ils sont principalement utilisés dans le cadre de modèles de vue de MVVM. Constructeurs avec des arguments Le ParameteredConstructorDemo exemple montre comment utiliser le x:Arguments balise pour spécifier des arguments de constructeur. Ces arguments doivent être délimités par des balises d’élément indiquant le type de l’argument. Pour les types de données .NET base, les balises suivantes sont disponibles : x:Object x:Boolean x:Byte x:Int16 x:Int32 x:Int64 x:Single x:Double x:Decimal x:Char x:String x:TimeSpan x:Array x:DateTime

Puis-je appeler des méthodes à partir de XAML ? Le FactoryMethodDemo exemple montre comment utiliser le x:FactoryMethod élément pour spécifier une méthode de fabrique qui est appelée pour créer un objet. Une telle méthode de fabrique doit être publique et statique, et il doit créer un objet du type dans lequel elle est définie. (Par exemple le Color.FromRgb qualifie de méthode, car elle est publique et statique et retourne une valeur de type Color .) Les arguments à la méthode de fabrique sont spécifiés dans x:Arguments balises.

L’attribut x : Name Le x:Name attribut permet à un objet instancié dans XAML à donner un nom. Les règles pour ces noms sont les mêmes que pour les noms de variables c#. Après le retour de la InitializeComponent appeler le constructeur, le fichier code-behind peut faire référence à ces noms pour accéder à l’élément XAML correspondant. Les noms sont

convertis en fait par l’analyseur XAML dans les champs privés de la classe partielle générée. Le XamlClock exemple illustre l’utilisation de x:Name pour permettre au fichier de code-behind de conserver deux Label éléments définis dans XAML mis à jour avec la date et heure actuelles. Le même nom ne peut pas être utilisé pour plusieurs éléments dans la même page. Il s’agit d’un problème particulier si vous utilisez OnPlatform pour créer en parallèle des objets nommés pour chaque plateforme. Le PlatformSpecificLabele exemple illustre un meilleur moyen de faire quelque chose de similaire.

Vues personnalisées en fonction du XAML Il existe plusieurs façons d’éviter la répétition de balisage en XAML. Une technique courante consiste à créer une nouvelle classe XAML qui dérive de ContentView . Cette technique est illustrée dans le ColorViewList exemple. Le ColorView dérive de la classe ContentView pour afficher une couleur particulière et son nom, tandis que le ColorViewListPage dérive de la classe ContentPage comme d’habitude et explicitement crée des 17 instances de ColorView . L’accès à la ColorView classe dans XAML nécessite une autre déclaration d’espace de noms XML, généralement nommée local pour les classes dans le même assembly.

Événements et gestionnaires Événements peuvent être affectés aux gestionnaires d’événements dans XAML, mais le Gestionnaire d’événements doit être implémenté dans le fichier code-behind. Le XamlKeypad montre comment créer une interface utilisateur de clavier dans XAML et comment implémenter le Clicked gestionnaires dans le fichier code-behind.

Appuyez sur les mouvements N’importe quel View objet peut obtenir l’entrée tactile et générer des événements à partir de cette entrée. Le classe définit un GestureRecognizers propriété de collection qui peut contenir une ou plusieurs instances des classes qui dérivent de GestureRecognizer . Le

génère Tapped événements. Le MonkeyTap programme montre comment associer objets à quatre BoxView éléments pour créer un jeu d’imitation :

TapGestureRecognizer

TapGestureRecognizer

Mais le MonkeyTap programme doit vraiment son. (Consultez le chapitre suivant.)

Liens connexes

View

Chapitre 8 de texte intégral (PDF ) Exemples du chapitre 8 Chapitre 8 F# exemple Passage des Arguments dans XAML

Résumé du chapitre 9. Appels d’API spécifiques à la plateforme 08/12/2018 • 3 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Il est parfois nécessaire d’exécuter du code qui varie par plateforme. Ce chapitre explore les techniques.

Prétraitement dans le projet actif partagé Un projet de ressource partagée Xamarin.Forms peut exécuter un code différent pour chaque plateforme en utilisant les directives de préprocesseur c# #if , #elif , et endif . Cela est illustré dans PlatInfoSap1:

Toutefois, le code résultant peut être horrible et difficile à lire.

Classes parallèles dans le projet de ressources partagées Une approche plus structurée à l’exécution de code spécifique à la plateforme dans SAP est illustrée dans le PlatInfoSap2 exemple. Chacun des projets de plateforme contient une classe portant le même nommée et des méthodes, mais implémentée pour cette plate-forme particulière. SAP ensuite simplement instancie la classe et appelle la méthode.

DependencyService et la bibliothèque de classes Portable

NOTE Bibliothèques de classes portables ont été remplacés par des bibliothèques .NET Standard. Exemples de code à partir de l’ouvrage a été converti pour utiliser les bibliothèques .NET standard.

Une bibliothèque ne peut pas accéder normalement les classes dans les projets d’application. Cette restriction semble pour empêcher la technique démontrée dans PlatInfoSap2 d’être utilisé dans une bibliothèque. Toutefois, Xamarin.Forms contient une classe nommée DependencyService qui utilise la réflexion .NET pour accéder à des classes publiques dans le projet d’application à partir de la bibliothèque. La bibliothèque doit définir un interface avec les membres qu’il a besoin pour chaque plateforme. Ensuite, chacune des plateformes contient une implémentation de cette interface. La classe qui implémente l’interface doit être identifiée avec un DependencyAttribute sur le niveau de l’assembly. La bibliothèque utilise ensuite le générique Get méthode de classe de plateforme qui implémente l’interface.

DependencyService

pour obtenir une instance de la

Cela est illustré dans le DisplayPlatformInfo exemple.

Génération de sons spécifiques à la plateforme Le MonkeyTapWithSound exemple ajoute des sonneries à la MonkeyTap programme en accédant à des installations de sons dans chaque plateforme.

Liens connexes Chapitre 9 de texte intégral (PDF ) Exemples du chapitre 9 Service de dépendance

Résumé du chapitre 10. Extensions de balisage XAML 08/12/2018 • 7 minutes to read • Edit Online

télécharger l’exemple Normalement, l’analyseur XAML convertit n’importe quelle chaîne définie comme valeur d’attribut sur le type de la propriété en fonction de conversion des types de données .NET de base, standard ou un TypeConverter dérivé est attaché à la propriété ou son type avec un TypeConverterAttribute . Mais il est parfois utile de définir un attribut à partir d’une autre source, par exemple, un élément dans un dictionnaire, ou la valeur d’une propriété statique ou d’un champ, ou d’un calcul quelconque. Il s’agit du travail d’un extension de balisage XAML. Malgré son nom, les extensions de balisage XAML sont pas une extension au format XML. XAML est toujours juridique XML.

L’infrastructure de code Une extension de balisage XAML est une classe qui implémente le IMarkupExtension interface. Une telle classe comporte souvent le mot Extension à la fin de son nom, mais s’affiche généralement dans XAML sans ce suffixe. Les extensions de balisage XAML suivantes sont prises en charge par toutes les implémentations de XAML : prise en charge par StaticExtension x:Reference prise en charge par ReferenceExtension x:Type prise en charge par TypeExtension x:Null prise en charge par NullExtension x:Array prise en charge par ArrayExtension x:Static

Ces quatre extensions de balisage XAML sont prises en charge par de nombreuses implémentations du XAML, y compris Xamarin.Forms : prise en charge par StaticResourceExtension DynamicResource prise en charge par DynamicResourceExtension Binding prise en charge par BindingExtension —abordés dans chapitre 16. Liaison de données TemplateBinding prise en charge par TemplateBindingExtension —non traitées dans le livre StaticResource

Une extension de balisage XAML supplémentaire est incluse dans Xamarin.Forms en lien avec ConstraintExpression

RelativeLayout

:

—non couvertes dans le livre

L’accès aux membres statiques Utilisez le x:Static élément à définir un attribut à la valeur d’un membre de propriété, champ ou énumération statique publique. Définir le Member propriété pour le membre statique. Il est généralement plus facile de spécifier x:Static et le nom du membre entre accolades. Le nom de la Member propriété ne doit pas être inclus, juste le membre lui-même. Cette syntaxe courante est indiquée dans le SharedStatics exemple. Les champs statiques euxmêmes sont définis dans le AppConstants classe. Cette technique vous permet d’établir des constantes utilisées via un programme. Avec une déclaration d’espace de noms XML supplémentaire, vous pouvez référencer des propriétés statiques publiques, des champs ou des membres de l’énumération définies dans le .NET framework, en particulier comme

illustré dans le SystemStatics exemple .

Dictionnaires de ressources Le

classe définit une propriété nommée Resources que vous pouvez définir pour un objet de type . Dans XAML, vous pouvez stocker les éléments dans ce dictionnaire et les identifier avec le x:Key attribut. Les éléments stockés dans le dictionnaire de ressources sont partagées entre toutes les références à l’élément. VisualElement

ResourceDictionary

StaticResource pour la plupart des cas Dans la plupart des cas, vous utiliserez le StaticResource extension de balisage pour référencer un élément du dictionnaire de ressources, comme illustré dans le ResourceSharing exemple . Vous pouvez utiliser un StaticResourceExtension élément ou StaticResource entre accolades :

Ne confondez pas la

x:Static

extension de balisage et le

StaticResource

extension de balisage.

Une arborescence de dictionnaires Lorsque l’analyseur XAML rencontre un StaticResource , il commence la recherche vers le haut l’arborescence visuelle pour une clé correspondante et recherche les ResourceDictionary dans l’application App classe. Cela permet des éléments dans un dictionnaire de ressources plus en détail l’arborescence visuelle pour remplacer un dictionnaire de ressources plus haut dans l’arborescence visuelle. Cela est illustré dans le ResourceTrees exemple. DynamicResource à des fins spéciales Le StaticResource extension de balisage provoque un élément à récupérer à partir du dictionnaire lors d’une arborescence d’éléments visuels est généré pendant la InitializeComponent appeler. Une alternative à StaticResource est DynamicResource , qui maintient un lien vers la clé de dictionnaire et met à jour la cible lors de l’élément référencé par les principales modifications apportées. La différence entre

StaticResource

et

DynamicResource

est illustrée dans le DynamicVsStatic exemple.

Une propriété définie par DynamicResource doit reposer sur une propriété pouvant être liée comme indiqué dans chapitre 11, infrastructure bindable.

Extensions de balisage moins utilisée Utilisez le

x:Null

extension de balisage pour définir une propriété

Utilisez le

x:Type

extension de balisage pour définir une propriété à un .NET

null

. Type

objet.

Utilisez x:Array pour définir un tableau. Spécifiez le type des membres du groupe en définissant le [ Type ] propriété à un x:Type extension de balisage.

Une extension de balisage personnalisée Vous pouvez créer vos propres extensions de balisage XAML en écrivant une classe qui implémente le IMarkupExtension créent une interface avec un ProvideValue (méthode). Le HslColorExtension classe satisfait ces exigences. Il crée une valeur de type Color en fonction des valeurs de propriétés nommées H , S , L , et A . Cette classe est le premier élément dans une bibliothèque Xamarin.Forms nommée Xamarin.FormsBook.Toolkit qui est développée et utilisé au cours de ce livre. Le CustomExtensionDemo exemple montre comment référencer cette bibliothèque et d’utiliser l’extension de balisage personnalisée.

Liens connexes Chapitre 10 de texte intégral (PDF ) Chapitre 10 échantillons Extensions de balisage XAML

Résumé du chapitre 11. Infrastructure Bindable 08/12/2018 • 8 minutes to read • Edit Online

télécharger l’exemple Tous les programmeurs c# est familiarisé avec c# propriétés. Les propriétés contiennent une définir accesseur et/ou un obtenir accesseur. Elles sont souvent appelées propriétés CLR pour le Common Language Runtime. Xamarin.Forms définit une définition de propriété améliorée appelée un propriété pouvant être liée encapsulé par le BindableProperty classe et pris en charge par le BindableObject classe. Ces classes sont associés mais bien distincts : le BindableProperty est utilisé pour définir la propriété proprement dite ; BindableObject est similaire à object : c’est une classe de base des classes qui définissent les propriétés pouvant être liées.

La hiérarchie de classes de Xamarin.Forms Le ClassHierarchy exemple utilise la réflexion pour afficher une hiérarchie de classes de Xamarin.Forms et illustrer le rôle crucial joué par BindableObject dans cette hiérarchie. BindableObject dérive de Object et est la classe parente à Element à partir de laquelle VisualElement dérive. C’est la classe parent à Page et View , qui est la classe parente à Layout :

Un coup de œil dans BindableObject et BindableProperty Dans les classes qui dérivent de BindableObject nombreuses propriétés CLR sont dits se reposer » sur « Propriétés pouvant être liées. Par exemple, le Text propriété de la Label classe est une propriété CLR, mais la Label classe définit également un champ statique public en lecture seule nommé TextProperty de type BindableProperty . Une application peut définir ou obtenir le Text propriété du Label normalement, ou l’application peut définir le Text en appelant le SetValue méthode définie par BindableObject avec un Label.TextProperty argument. De même, une application peut obtenir la valeur de la Text propriété en appelant le GetValue (méthode), en utilisant un Label.TextProperty argument. Cela est illustré par la PropertySettings exemple. En effet, le

Text

propriété CLR est entièrement implémentée à l’aide de la

SetValue

et

GetValue

méthodes

définies par

BindableObject

BindableObject

et

conjointement avec le

BindableProperty

Label.TextProperty

propriété statique.

prennent en charge pour :

Ce qui donne les valeurs de propriétés par défaut Stockage de leurs valeurs actuelles Offrant des mécanismes de valider les valeurs de propriété Maintenir la cohérence entre les propriétés associées dans une classe unique Répondre aux modifications de propriétés Déclencher des notifications lorsqu’une propriété est sur le point de changer ou a changé Prise en charge de la liaison de données Prise en charge des styles Prise en charge des ressources dynamiques Chaque fois qu’une propriété qui est associée à la modification d’une propriété pouvant être liée, BindableObject se déclenche un PropertyChanged événement qui identifie la propriété qui a changé. Cet événement n’est pas déclenché lorsque la propriété est définie sur la même valeur. Certaines propriétés ne sont pas soutenues par les propriétés pouvant être liées et certaines classes de Xamarin.Forms — comme Span — ne dérivent pas de BindableObject . Seule une classe qui dérive de BindableObject peut prendre en charge les propriétés pouvant être liées, car BindableObject définit le et GetValue méthodes.

SetValue

Étant donné que Span ne dérive pas de BindableObject , aucune de ses propriétés — comme Text — sont soutenus par une propriété pouvant être liée. C’est pourquoi un DynamicResource définition sur le Text propriété du Span lève une exception dans le DynamicVsStatic exemple dans le chapitre précédent. Le DynamicVsStaticCode exemple montre comment définir une ressource dynamique dans le code à l’aide du SetDynamicResource méthode définie par Element . Le premier argument est un objet de type BindableProperty . De même, le

SetBinding

méthode définie par

BindableObject

a un premier argument de type

BindableProperty

.

Définition des propriétés pouvant être liées Vous pouvez définir vos propres propriétés pouvant être liées à l’aide de la méthode statique BindableProperty.Create méthode pour créer un champ en lecture seule statique de type BindableProperty . Cela est illustré dans le AltLabel classe dans le Xamarin.FormsBook.Toolkit bibliothèque. La classe dérivée de Label et vous permet de spécifier une taille de police en points. Il est montré dans le PointSizedText exemple. Quatre arguments de la

BindableProperty.Create

méthode sont requis :

: le nom de la propriété (le même que le nom de propriété CLR ) returnType : le type de la propriété CLR declaringType : le type de la classe déclarant la propriété defaultValue : la valeur de propriété par défaut propertyName

Étant donné que defaultValue est de type object , le compilateur doit être en mesure de déterminer le type de la valeur par défaut. Par exemple, si le returnType est double , la defaultValue doit être défini sur quelque chose comme 0.0 plutôt que simplement 0, ou l’incompatibilité de type déclenchera une exception lors de l’exécution. Il est également très courant pour une propriété pouvant être liée à inclure : propertyChanged : une méthode statique appelée lorsque la propriété change de valeur. Le premier argument est l’instance de la classe dont la propriété a été modifiée.

Les autres arguments de defaultBindingMode

BindableProperty.Create

ne sont pas aussi courantes :

: utilisé dans le cadre de la liaison de données (comme indiqué dans chapitre 16. Liaison

de données) : un rappel pour rechercher une valeur valide propertyChanging : un rappel pour indiquer le moment où la propriété va être modifiée coerceValue : un rappel pour forcer une valeur définie à une autre valeur defaultValueCreate : un rappel pour créer une valeur par défaut qui ne peut pas être partagée entre des instances de la classe (par exemple, une collection) validateValue

La propriété peut être liée en lecture seule Une propriété peut être en lecture seule. Création d’une propriété en lecture seule, vous devez appeler la méthode statique BindableProperty.CreateReadOnly pour définir un champ statique privé en lecture seule de type BindablePropertyKey . Ensuite, définissez la propriété CLR set accesseur d’en tant que private pour appeler un avec le BindablePropertyKey objet. Ainsi, la propriété est définie en dehors de la classe. Cela est illustré dans le

CountedLabel

classe utilisée dans le BaskervillesCount exemple.

Liens connexes Chapitre 11 de texte intégral (PDF ) Exemples de chapitre 11 Propriétés pouvant être liées

SetValue

surcharge

Résumé du chapitre 12. Styles 08/12/2018 • 8 minutes to read • Edit Online

télécharger l’exemple Dans Xamarin.Forms, les styles permettent plusieurs vues partager une collection de paramètres de propriété. Cela réduit le balisage et que vous permet de maintenir cohérentes thèmes visuels. Les styles sont presque toujours définis et utilisés dans le balisage. Un objet de type Style est instancié dans un dictionnaire de ressources et la Style propriété d’un élément visuel en utilisant un StaticResource ou DynamicResource balisage extension.

Le Style de base Un Style nécessite que son TargetType être définie sur le type de l’objet visuel, il s’applique à. Quand un Style est instancié dans un dictionnaire de ressources (comme c’est commun) il requiert également un x:Key attribut. Le Style a une propriété de type de contenu associe un Property avec un Value .

Setters

, qui est une collection de

Setter

objets. Chaque

Setter

Dans XAML les Property paramètre est le nom d’une propriété CLR (comme le Text propriété de Button ), mais la propriété de style doit reposer sur une propriété pouvant être liée. En outre, la propriété doit être définie dans la classe indiquée par le TargetType paramètre ou héritées par cette classe. Vous pouvez spécifier le Value définition à l’aide de l’élément de propriété . Cela vous permet de définir Value à un objet qui ne peuvent pas être exprimé dans une chaîne de texte, ou à un OnPlatform de l’objet, ou à un objet instancié à l’aide de x:Arguments ou x:FactoryMethod . Le Value propriété peut également être définie avec un StaticResource expression à un autre élément dans le dictionnaire. Le BasicStyle programme illustre la syntaxe de base et indique comment référencer la StaticResource extension de balisage :

Style

avec un

Le Style objet et tout objet créé dans le Style objet comme un Value paramètre sont partagés entre toutes les vues faisant référence à cette Style . Le Style ne peut pas contenir tout ce qui ne peut pas être partagée, comme un View dérivé.

Impossible de définir des gestionnaires d’événements dans un Style . Le GestureRecognizers propriété ne peut pas être définie dans un Style , car il n’est pas associé à une propriété pouvant être liée.

Styles de code Bien qu’il n’est pas courant, vous pouvez instancier et initialiser BasicStyleCode exemple.

Style

objets dans le code. Cela est illustré par la

Héritage de style a un BasedOn propriété que vous pouvez définir pour un StaticResource extension de balisage faisant référence à un autre style. Ainsi, les styles hériter des styles précédentes et ajouter ou remplacer les paramètres de propriété. Le StyleInheritance illustre cela. Style

Si Style2 repose sur Style1 , le TargetType de Style2 doit être le même que Style1 ou dérivé Style1 . Le dictionnaire de ressources dans lequel Style1 est stocké doit être le même dictionnaire de ressources en tant que Style2 ou un dictionnaire de ressources plus haut dans l’arborescence visuelle.

Styles implicites Si un Style dans une ressource dictionnaire n’a pas un x:Key attribut de paramètre, il est affecté automatiquement, une clé de dictionnaire et Style objet devient un style implicite. Une vue sans un Style paramètre et dont le type correspond à la TargetType exactement trouverez ce style, comme le ImplicitStyle illustre. Un style implicite peut dériver un Style avec un référencer explicitement un style implicite.

x:Key

paramètre mais pas l’inverse. Vous ne pouvez pas

Vous pouvez implémenter les trois types de hiérarchie avec des styles et

BasedOn

:

À partir de styles définis sur le Application et Page jusqu'à styles définis sur les dispositions plus bas dans l’arborescence visuelle. À partir de styles définis pour les classes de base telles que VisualElement et View pour les styles définis pour les classes spécifiques. À partir de styles avec des clés de dictionnaire explicite pour les styles implicites. Ces hiérarchies sont illustrées dans le StyleHierarchy exemple.

Styles dynamiques Un style dans un dictionnaire de ressources peut être référencé par DynamicResource plutôt que StaticResource . Cela rend le style un style dynamique. Si ce style est remplacé dans le dictionnaire de ressources par un autre style avec la même clé, les vues référençant ce style avec DynamicResource change automatiquement. En outre, l’absence d’une entrée de dictionnaire avec la clé spécifiée entraîne StaticResource pour lever une exception, mais pas DynamicResource . Vous pouvez utiliser cette technique pour modifier dynamiquement un style ou thèmes comme le DynamicStyles montre des exemples. Toutefois, vous ne pouvez pas définir le BasedOn propriété à un DynamicResource extension de composition, car BasedOn n’est pas sauvegardé par une propriété pouvant être liée. Pour dériver un style dynamiquement, ne définissez pas BasedOn . Au lieu de cela, définissez la BaseResourceKey propriété à la clé du style que vous souhaitez dériver à partir du dictionnaire. Le DynamicStylesInheritance exemple illustre cette technique.

Styles d’appareils Le

classe imbriquée définit 12 champs en lecture seule statiques pour les six styles avec une de Label que vous pouvez utiliser pour les types courants d’utilisations de texte.

Device.Styles

TargetType

Six de ces champs sont de type

Style

que vous pouvez définir directement à un

Style

propriété dans le code :

BodyStyle TitleStyle SubtitleStyle CaptionStyle ListItemTextStyle ListItemDetailTextStyle

Les six autres champs sont de type

string

et est utilisable comme clés de dictionnaire pour les styles dynamiques :

égal à « BodyStyle » TitleStyleKey égal à « TitleStyle » SubtitleStyleKey égal à « SubtitleStyle » CaptionStyleKey égal à « CaptionStyle » ListItemTextStyleKey égal à « ListItemTextStyle » ListItemDetailTextStyleKey égal à « ListItemDetailTextStyle » BodyStyleKey

Ces styles sont illustrées par la DeviceStylesList exemple.

Liens connexes Chapitre 12 de texte intégral (PDF ) Exemples de chapitre 12 Styles

Résumé du chapitre 13. Bitmaps 08/12/2018 • 20 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Xamarin.Forms Image élément affiche une bitmap. Toutes les plateformes de Xamarin.Forms prend en charge les formats de fichier JPEG, PNG, GIF et BMP. Bitmaps dans Xamarin.Forms proviennent de quatre endroits : Sur le web tel que spécifié par une URL Incorporé comme ressource dans la bibliothèque partagée Incorporé comme ressource dans les projets d’application de plateforme À partir de n’importe quel endroit qui peuvent être référencées par un .NET

Stream

de l’objet, y compris

MemoryStream

Ressources bitmap dans la bibliothèque partagée sont indépendant de la plateforme, tandis que les ressources de bitmap dans les projets de plateforme sont spécifiques à la plateforme. NOTE Le texte du livre fait référence aux bibliothèques de classes portables, qui ont été remplacés par des bibliothèques .NET Standard. Exemples de code à partir de l’ouvrage a été converti pour utiliser les bibliothèques .NET standard.

La bitmap est spécifiée en définissant le abstraite avec trois dérivés :

Source

propriété du

Image

à un objet de type

ImageSource

, une classe

Pour accéder à une image bitmap sur le web basé sur un Uri objet défini sa Uri propriété FileImageSource Pour accéder à une image bitmap stockée dans un projet d’application de plateforme basée sur un chemin d’accès de dossier et le fichier défini sur sa File propriété StreamImageSource pour charger une bitmap à l’aide de .NET Stream objet spécifié en retournant un Stream à partir d’un Func définie sur sa Stream propriété UriImageSource

Vous pouvez également (et plus fréquemment), vous pouvez utiliser les méthodes statiques suivantes de la ImageSource de classe, qui retournent toutes ImageSource objets : Pour accéder à une image bitmap sur le web basé sur un Uri objet ImageSource.FromResource Pour accéder à une image bitmap stockée en tant que ressource incorporée dans l’application de bibliothèque de classes portable ; ImageSource.FromResource ou ImageSource.FromResource pour accéder à une image bitmap dans un autre assembly source ImageSource.FromFile Pour accéder à une image bitmap à partir d’un projet d’application de plateforme ImageSource.FromStream pour charger une image bitmap selon un Stream objet ImageSource.FromUri

Il n’existe aucun équivalent de la classe de la Image.FromResource méthodes. Le UriImageSource classe est utile si vous avez besoin de contrôler la mise en cache. Le FileImageSource classe est utile dans XAML.

StreamImageSource

est utile pour le chargement asynchrone de

Stream

objets, tandis que

ImageSource.FromStream

est synchrone.

Bitmaps indépendantes de la plate-forme Le WebBitmapCode projet charge une image bitmap sur le web à l’aide ImageSource.FromUri . Le Image élément est défini sur le Content propriété de la ContentPage , donc il est limité à la taille de la page. Quelle que soit la taille de la bitmap, une contrainte Image élément est étiré pour la taille de son conteneur et le bitmap s’affiche dans sa taille maximale dans le Image élément tout en conservant les proportions de la bitmap. Zones de la Image au-delà de l’image bitmap peut être en couleur avec BackgroundColor . Le WebBitmapXaml exemple est similaire, mais se contente de définir le conversion est contrôlée par le ImageSourceConverter classe.

Source

Ajuster et remplissage Vous pouvez contrôler la manière dont l’image bitmap est étirée en définissant le un des membres suivants de la Aspect énumération :

URL à la propriété. La

Aspect

propriété de la

Image

à

: respecte les proportions (valeur par défaut) Fill : remplit la zone, ne respecte pas les proportions AspectFill : remplit la zone mais respecte les proportions, faire partie de l’image bitmap de rognage AspectFit

Ressources incorporées Vous pouvez ajouter un fichier bitmap pour une bibliothèque de classes portable, ou dans un dossier dans la bibliothèque PCL. Attribuez-lui un Action de génération de EmbeddedResource. Le ResourceBitmapCode exemple montre comment utiliser ImageSource.FromResource pour charger le fichier. Le nom de ressource passé à la méthode se compose du nom d’assembly, suivi d’un point, suivie du nom de dossier facultatif et un point, suivi par le nom de fichier. Les jeux de programme le VerticalOptions et HorizontalOptions propriétés de la Image à LayoutOptions.Center , ce qui rend le Image élément sans contrainte. Le Image et l’image bitmap ont la même taille : Sur iOS et Android, le Image est la taille en pixels de la bitmap. Il existe une correspondance biunivoque entre les pixels du bitmap et de pixels de l’écran. Sur la plateforme Windows universelle, le Image est la taille en pixels de l’image bitmap en unités indépendantes du périphérique. Sur la plupart des périphériques, chaque pixel de bitmap occupe plusieurs pixels de l’écran. Le StackedBitmap exemple met un Image dans un vertical StackLayout dans XAML. Une extension de balisage nommée ImageResourceExtension permet de référencer la ressource incorporée dans XAML. Cette classe charge uniquement des ressources à partir de l’assembly dans lequel il se trouve, donc il ne peut pas être placé dans une bibliothèque. Plus d’informations sur le dimensionnement Il est souvent souhaitable de bitmaps de taille cohérente parmi toutes les plateformes. Expérimenter StackedBitmap, vous pouvez définir un WidthRequest sur le Image élément dans un vertical StackLayout pour que la taille cohérente entre les plateformes, mais vous pouvez réduire uniquement la taille à l’aide de cette technique. Vous pouvez également définir le HeightRequest pour rendre une image de tailles cohérente sur les plateformes, mais la contrainte largeur de l’image bitmap limitera la polyvalence de cette technique. Pour une image dans un vertical StackLayout , HeightRequest doit être évitée. La meilleure approche consiste à commencer par une image bitmap plus large que la largeur de téléphone en unités indépendantes du périphérique et définissez WidthRequest largeur souhaitée en unités indépendantes du

périphérique. Cela est illustré dans le DeviceIndBitmapSize exemple. Le MadTeaParty affiche le chapitre 7, de Lewis Carroll aventures d’A lice au pays des merveilles avec les illustrations d’origine par John Tenniel :

Navigation et en attente Le ImageBrowser exemple permet à l’utilisateur de parcourir les images stockées sur le site web de Xamarin. Il utilise le .NET WebRequest classe pour télécharger un fichier JSON avec la liste des images bitmap. NOTE Xamarin.Forms les programmes doivent utiliser

HttpClient

plutôt que

WebRequest

pour accéder aux fichiers via internet.

Le programme utilise une ActivityIndicator pour indiquer que quelque chose se passe. Comme chaque bitmap est le chargement, en lecture seule IsLoading propriété du Image est true . Le IsLoading propriété repose sur une propriété pouvant être liée, par conséquent, un PropertyChanged événement est déclenché lorsque cette propriété est modifiée. Le programme attache un gestionnaire à cet événement et utilise le paramètre actuel de IsLoaded pour définir le IsRunning propriété de la ActivityIndicator .

Diffusion en continu de bitmaps Le

méthode crée un objet retourne un Stream objet.

ImageSource.FromStream

Func

ImageSource

basé sur .NET

Stream

. La méthode doit être passée un

L’accès à des flux de données Le BitmapStreams exemple montre comment utiliser le ImaageSource.FromStream méthode pour charger une image bitmap stockée en tant que ressource incorporée et pour charger une image bitmap sur le web. Générer des images bitmap au moment de l’exécution Toutes les plateformes de Xamarin.Forms prend en charge le format de fichier non compressé BMP, qui est facile à construire dans le code, puis stockez dans un MemoryStream . Cette technique permet la création de façon algorithmique des bitmaps lors de l’exécution, tel qu’implémenté dans le BmpMaker classe dans le Xamrin.FormsBook.Toolkit bibliothèque. « Faire il vous-même le » DiyGradientBitmap exemple illustre l’utilisation de bitmap avec une image de dégradé.

BmpMaker

pour créer une image

Bitmaps spécifiques à la plateforme Toutes les plateformes de Xamarin.Forms permettent de stocker des images bitmap dans les assemblys d’application de plateforme. Lorsque extrait par une application Xamarin.Forms, ces bitmaps de plateforme sont de type FileImageSource . Vous les utilisez pour : le le le

propriété de MenuItem Icon propriété de ToolbarItem Image propriété de Button Icon

Les assemblys de plateforme contiennent déjà des bitmaps pour les icônes et écrans de démarrage : Dans le projet iOS, dans le ressources dossier Dans le projet Android, dans les sous-dossiers de le ressources dossier Dans les projets Windows, dans le actifs dossier (bien que les plateformes Windows ne limitent pas les bitmaps à ce dossier) Le PlatformBitmaps exemple utilise du code pour afficher une icône dans les projets d’application de plateforme. Résolutions de bitmap Toutes les plateformes permettent de stocker plusieurs versions des images bitmap pour les résolutions de périphérique différent. Lors de l’exécution, la version correcte est chargée en fonction de la résolution de l’appareil de l’écran. Sur iOS, ces bitmaps sont différenciées par le suffixe du nom de fichier : Pas de suffixe pour les appareils de 160 DPI (1 pixel à l’unité indépendante du périphérique) '@2x' suffixe pour les appareils de 320 DPI (2 pixels à le DIU ) '@3x' suffixe pour les appareils de 480 PPP (de 3 pixels pour le DIU ) Une image bitmap destinée à être affiché sous forme d’un pouce carré existerait dans trois versions : MyImage.jpg à 160 pixels carrés [email protected] à 320 pixels carrés [email protected] à 480 pixels carrés Le programme fait référence à cette image bitmap en tant que MyImage.jpg, mais la version correcte est récupérée pendant l’exécution en fonction de la résolution de l’écran. Quand elles sont libres, l’image bitmap restitue toujours à 160 unités indépendantes du périphérique. Pour Android, les bitmaps sont stockés dans différents sous-dossiers situés de le ressources dossier : drawable-ldpi (faible PPP ) pour les appareils de 120 DPI (0,75 pixels pour le DIU ) drawable-mdpi (moyenne) pour les appareils de 160 DPI (1 pixel à la DIU ) drawable-hdpi (élevé) pour les appareils de 240 DPI (1,5 pixels pour le DIU ) drawable-xhdpi (très élevée) pour les appareils de 320 DPI (2 pixels à le DIU ) drawable-xxhdpi (très très élevée) pour les appareils de 480 PPP (de 3 pixels pour le DIU ) drawable-xxxhdpi (trois points forts supplémentaires) pour les appareils de 640 PPP (4 pixels pour le DIU ) Pour une image bitmap destinée à être rendu à un pouce carré, les différentes versions de l’image bitmap auront le même nom mais une taille différente et être stockées dans ces dossiers : drawable-ldpi/MyImage.jpg à 120 pixels carrés drawable-mdpi/MyImage.jpg à 160 pixels carrés drawable-hdpi/MyImage.jpg à 240 pixels carrés drawable-xhdpi/MyImage.jpg à 320 pixels carrés

drawable-xxhdpi/MyImage.jpg à 480 pixels carrés drawable-xxxhdpi/MyImage.jpg à 640 pixels carrés La bitmap est toujours le rendu à 160 unités indépendantes du périphérique. (Le modèle de solution Xamarin.Forms standard inclut uniquement le hdpi, xhdpi et les dossiers xxhdpi.) Le projet UWP prend en charge un schéma d’affectation de noms bitmap comprenant un facteur d’échelle en pixels indépendants du périphérique unitaire sous forme de pourcentage, par exemple : MyImage.scale-200.jpg à 320 pixels carrés Seuls certains pourcentages sont valides. Les exemples de programmes de ce livre d’incluent uniquement les images avec mise à l’échelle-200 suffixes, mais les modèles de solution Xamarin.Forms actuels incluent mise à l’échelle-100, mise à l’échelle-125, mise à l’échelle-150, et mise à l’échelle-400. Lors de l’ajout de bitmaps pour les projets de plateforme, le Action de génération doit être : iOS : BundleResource Android : AndroidResource UWP : contenu Le ImageTap exemple crée deux objets de type bouton consistant en Image éléments avec un TapGestureRecognizer installé. Il est prévu que les objets soient carré d’un pouce. Le Source propriété du Image est définie à l’aide de OnPlatform et On objets à référencer les noms de fichiers potentiellement différents sur les plateformes. Les images bitmap incluent les numéros d’indiquant leur taille en pixels, pour voir quelle bitmap de taille est récupéré et affiché. Barres d’outils et leurs icônes Une des principales utilisations des bitmaps de spécifique à la plateforme est la barre d’outils de Xamarin.Forms, qui est construite en ajoutant ToolbarItem des objets sur le ToolbarItems collection définie par Page . ToobarItem dérive de MenuItem dont elle hérite des propriétés. Le plus important

ToolbarItem

sont des propriétés :

pour le texte qui peut s’afficher en fonction de la plateforme et Order Icon de type FileImageSource pour l’image qui peut s’afficher en fonction de la plateforme et Order Order de type ToolbarItemOrder , une énumération avec trois membres, Default , Primary , et Secondary . Text

Le nombre de Primary éléments doivent être limités à trois ou quatre. Vous devez inclure un Text définissant pour tous les éléments. Pour la plupart des plateformes, uniquement le Primary éléments nécessitent une Icon mais nécessite Windows 8.1 une Icon pour tous les éléments. Les icônes doivent être des unités indépendantes du périphérique 32 carrées. Le FileImageSource type indique qu’ils sont spécifiques à la plateforme. Le

se déclenche un Clicked événement lorsque l’utilisateur appuie dessus, comme un Button . ToolbarItem prend également en charge Command et CommandParameter propriétés souvent utilisées dans le cadre de MVVM. (Consultez chapitre 18, MVVM ). ToolbarItem

IOS et Android exigent qu’une page qui affiche une barre d’outils un NavigationPage ou une page faite par un NavigationPage . Le ToolbarDemo jeux du programme le MainPage propriété de son App classe à la NavigationPage constructeur avec un ContentPage argument et montre le Gestionnaire d’événements et de la construction d’une barre d’outils. Images de bouton Vous pouvez également utiliser des images bitmap spécifiques à la plateforme pour définir le Image propriété de Button à une image bitmap du carré 32 unités indépendantes du périphérique, tel qu’indiqué par le ButtonImage exemple.

NOTE L’utilisation d’images sur les boutons a été améliorée. Consultez à l’aide de bitmaps avec des boutons.

Liens connexes Chapitre 13, texte intégral (PDF ) Exemples de chapitre 13 Utilisation d’images À l’aide de bitmaps avec des boutons

Résumé du chapitre 14. Disposition absolue 08/12/2018 • 10 minutes to read • Edit Online

télécharger l’exemple Comme StackLayout , AbsoluteLayout dérive Layout et hérite d’un Children propriété. AbsoluteLayout implémente un système de disposition qui exige que le programmeur spécifier les positions de ses enfants et, éventuellement, de leur taille. La position est spécifiée par le coin supérieur gauche de l’enfant par rapport à l’angle supérieur gauche de la AbsoluteLayout en unités indépendantes du périphérique. AbsoluteLayout implémente également une fonctionnalité de dimensionnement et de positionnement proportionnel. doit être considérée comme un système de disposition de spécial à être utilisé uniquement quand le programmeur peut imposer une taille sur les enfants (par exemple, BoxView éléments) ou lorsque la taille de l’élément n’affecte pas le positionnement d’autres enfants. Le HorizontalOptions et VerticalOptions propriétés n’ont aucun effet sur les enfants d’un AbsoluteLayout . AbsoluteLayout

Ce chapitre présente également la fonctionnalité importante de attaché propriétés pouvant être liées qui autorisent les propriétés définies dans une classe (dans ce cas AbsoluteLayout ) à joindre à une autre classe (un enfant de le AbsoluteLayout ).

DispositionAbsolue dans le code Vous pouvez ajouter un enfant à la Children collection d’un AbsoluteLayout à l’aide de la norme Add (méthode), mais AbsoluteLayout fournit également une étendue Add méthode qui vous permet de spécifier un Rectangle . Un autre Add méthode nécessite uniquement un Point , auquel cas l’enfant n’est pas limitée et se redimensionne. Vous pouvez créer un Rectangle valeur avec un constructeur qui requiert quatre valeurs — les deux premiers indiquant la position du coin supérieur gauche de l’enfant par rapport à son parent et les deux indiquant le taille de l’enfant. Vous pouvez également utiliser un constructeur qui nécessite un Point et un Size valeur. Ces Add méthodes sont illustrées dans AbsoluteDemo, les positions valeurs et un Label élément à l’aide de simplement un Point valeur.

BoxView

à l’aide des éléments

Rectangle

Le ChessboardFixed exemple utilise 32 BoxView éléments pour créer le modèle échiquier. Le programme donne le BoxView taille éléments codés en dur du carré de 35 unités. Le AbsoluteLayout a son HorizontalOptions et VerticalOptions définie sur LayoutOptions.Center , ce qui conduit le AbsoluteLayout pour avoir une taille totale du carré de 280 unités.

Joint des propriétés pouvant être liées Il est également possible de définir la position et, éventuellement, la taille d’un enfant d’un AbsoluteLayout après qu’il a été ajouté à la Children collection à l’aide de la méthode statique AbsoluteLayout.SetLayoutBounds . Le premier argument est l’enfant ; le second est un Rectangle objet. Vous pouvez spécifier que l’enfant se redimensionne horizontalement et verticalement en définissant les valeurs de largeur et hauteur le AbsoluteLayout.AutoSize constante. Le ChessboardDynamic exemple met le AbsoluteLayout dans un ContentView avec un SizeChanged gestionnaire à appeler AbsoluteLayout.SetLayoutBounds sur tous les enfants pour les rendre aussi grand que possible. La propriété jointe peut être liée qui AbsoluteLayout définit le champ statique en lecture seule de type n’est BindableProperty nommé AbsoluteLayout.LayoutBoundsProperty . La méthode statique

méthode est implémentée en appelant SetValue sur l’enfant ayant le AbsoluteLayout.LayoutBoundsProperty . L’enfant contienne un dictionnaire dans lequel la propriété jointe peut être liée et sa valeur sont stockées. Pendant la disposition, le AbsoluteLayout pouvez obtenir cette valeur en appelant AbsoluteLayout.GetLayoutBounds , qui est implémentée avec un GetValue appeler. AbsoluteLayout.SetLayoutBounds

Redimensionnement proportionnel et positionnement implémente un redimensionnement proportionnel et la fonctionnalité de positionnement. La classe définit une deuxième propriété jointe peut être liée, LayoutFlagsProperty , avec les méthodes statiques associées AbsoluteLayout.SetLayoutFlags et AbsoluteLayout.GetLayoutFlags . AbsoluteLayout

L’argument AbsoluteLayout.SetLayoutFlags et la valeur de retour de AbsoluteLayout.GetLayoutFlags est une valeur de type AbsoluteLayoutFlags , une énumération avec les membres suivants : (égal à 0) XProportional (1 ) YProportional (2 ) None

PositionProportional

(3 )

(4 ) HeightProportional (8 ) SizeProportional (12 ) All (\xFFFFFFFF ) WidthProportional

Vous pouvez combiner ces éléments avec le langage c# opérateur de bits OR. Avec ces indicateurs définis, certaines propriétés de la Rectangle structure de limites de mise en page utilisée pour positionner et dimensionner l’enfant sont interprétés proportionnellement. Lorsque le WidthProportional indicateur est défini, un Width valeur 1 indique que l’enfant est la même largeur que le AbsoluteLayout . Une approche similaire est utilisée pour la hauteur. Le positionnement proportionnelle prend la taille en compte. Lorsque le XProportional indicateur est défini, le X propriété de la Rectangle limites de disposition est proportionnelle. Une valeur de 0 signifie que l’enfant du bord gauche est positionnée sur le bord gauche de la AbsoluteLayout , mais une position de 1 signifie que le bord droit de l’enfant est positionné sur le bord droit de la AbsoluteLayout , pas au-delà du bord droit de la AbsoluteLayout comme vous le feriez notre t. Un X l’enfant horizontalement dans les centres de propriété de 0,5 le AbsoluteLayout . Le ChessboardProportional exemple illustre l’utilisation de redimensionnement proportionnel et de positionnement.

Utilisation des coordonnées proportionnelles Parfois, il est plus simple de considérer un positionnement proportionnelle différemment de la façon dont il est implémenté dans le AbsoluteLayout . Vous préférerez peut-être utiliser des coordonnées proportionnelles où un propriété 1 positionne bord gauche de l’enfant (plutôt que le bord droit) sur le bord droit de la AbsoluteLayout . Ce schéma de positionnement alternatif peut être appelé « coordonnées fractionnaires enfants. » Vous pouvez convertir à partir des coordonnées fractionnaires enfants pour les limites de disposition requis pour AbsoluteLayout à l’aide des formules suivantes : layoutBounds.X = (fractionalChildCoordinate.X / (1 - layoutBounds.Width)) layoutBounds.Y = (fractionalChildCoordinate.Y / (1 - layoutBounds.Height))

X

Le ProportionalCoordinateCalc illustre cela.

DispositionAbsolue et XAML Vous pouvez utiliser un AbsoluteLayout dans XAML et définissez les propriétés de peut être liées attachées sur les enfants d’un AbsoluteLayout à l’aide de valeurs d’attribut de AbsoluteLayout.LayoutBounds et AbsoluteLayout.LayoutFlags . Cela est illustré dans le AbsoluteXamlDemo et ChessboardXaml exemples. Le programme de ce dernier contient 32 BoxView éléments mais utilise implicite Style qui inclut le AbsoluteLayout.LayoutFlags propriété conserver le balisage jusqu’au minimum. Est un attribut dans XAML se compose d’un nom de classe, un point et un nom de propriété toujours une propriété jointe peut être liée.

Superpositions Vous pouvez utiliser AbsoluteLayout pour construire un superposition, qui couvre la page avec d’autres contrôles, peut-être pour protéger l’utilisateur d’interagir avec les contrôles normales sur la page. Le SimpleOverlay exemple illustre cette technique et montre la programme a terminé une tâche.

ProgressBar

, qui affiche l’étendue à laquelle un

Un peu de fantaisie Le DotMatrixClock exemple affiche l’heure actuelle avec un affichage simulé matricielle 5 / 7. Chaque point est un BoxView (il y 228 d'entre eux) dimensionné et positionné sur le AbsoluteLayout .

Le BouncingText programme anime deux

Liens connexes Chapitre 14 de texte intégral (PDF ) Exemples de chapitre 14 AbsoluteLayout Propriétés jointes

Label

objets à rebondit horizontalement et verticalement sur l’écran.

Résumé du chapitre 15. L’interface interactive 08/12/2018 • 15 minutes to read • Edit Online

télécharger l’exemple Ce chapitre explore huit

View

dérivés qui permettent d’interagir avec l’utilisateur.

Vue d’ensemble de la vue Xamarin.Forms contient 20 instanciables classes dérivées de dans les chapitres précédents :

View

mais pas

Layout

. Six d'entre eux ont été traités

: Chapitre 2. Anatomie d’une application BoxView : Chapitre 3. Défilement de la pile Button : Chapitre 6. Clics de bouton Image : Chapitre 13. Bitmaps ActivityIndicator : Chapitre 13. Bitmaps ProgressBar : Chapitre 14. DispositionAbsolue Label

Les huit vues dans ce chapitre autoriser efficacement l’utilisateur d’interagir avec les types de données de base .NET : TYPE DE DONNÉES

AFFICHAGES

,

Double

Slider

Boolean

Switch

String

Entry

DateTime

DatePicker

,

Stepper

Editor

,

,

SearchBar

TimePicker

Vous pouvez considérer de ces vues en tant que représentations interactives visuelles des types de données sousjacente. Ce concept est expliquée plus dans le chapitre suivant, chapitre 16. Liaison de données. Les vues de six restants sont traités dans les chapitres suivants : : Chapitre 16. Liaison de données Picker : Chapitre 19. Vues de collection ListView : Chapitre 19. Vues de collection TableView : Chapitre 19. Vues de collection Map : Chapitre 28. Emplacement et mappages OpenGLView : Non traitée dans ce livre (et aucune prise en charge pour les plateformes Windows) WebView

Curseur et l’exécution pas à pas Les deux Slider et Stepper autoriser l’utilisateur de choisir une valeur numérique à partir d’une plage. Le Slider est une plage continue, tandis que le Stepper implique des valeurs discrètes.

Principes de base de curseur Le Slider est une barre représentant une plage de valeurs à partir d’un minimum de gauche à un maximum sur la droite horizontale. Il définit trois propriétés publiques : de type double , valeur 0 par défaut Minimum de type double , valeur 0 par défaut Maximum de type double , la valeur 1 par défaut Value

Les propriétés pouvant être liées qui assortir ces propriétés de vous assurer qu’elles sont cohérentes : Pour toutes les trois propriétés, le coerceValue méthode spécifiée pour la propriété pouvant être liée garantit que Value entre Minimum et Maximum . Le validateValue méthode sur MinimumProperty retourne false si Minimum est définie sur une valeur supérieure ou égale à Maximum et il est similaire pour MaximumProperty . Retour false à partir de la validateValue causes de la méthode un ArgumentException à signaler. se déclenche le ValueChanged événement avec un ValueChangedEventArgs argument lorsque la propriété change, par programme ou lorsque l’utilisateur manipule le Slider . Slider

Le SliderDemo exemple illustre l’utilisation simple du

Slider

Value

.

Pièges courants À la fois dans le code et XAML, le Minimum et Maximum propriétés sont définies dans l’ordre que vous spécifiez. Veillez à initialiser ces propriétés afin que Maximum est toujours supérieure à Minimum . Dans le cas contraire, une exception est levée. L’initialisation de la Slider propriétés peuvent entraîner la Value propriété à modifier et le ValueChanged événement à déclencher. Vous devez vous assurer que le Slider Gestionnaire d’événements n’accède pas à des vues qui n’ont pas encore été créés pendant l’initialisation de la page. Le ValueChanged événement ne se déclenche pendant Slider l’initialisation, sauf si le Value les modifications de propriété. Vous pouvez appeler la ValueChanged gestionnaire directement à partir du code. Sélection de couleur de curseur Le RgbSliders programme contienne trois Slider les éléments qui vous permettent de sélectionner une couleur de manière interactive en spécifiant ses valeurs RVB :

Le TextFade exemple utilise deux

Slider

éléments à déplacer deux

Label

éléments entre un

AbsoluteLayout

et

fondu dans l’autre. La différence de l’exécution pas à pas Le Stepper définit les propriétés et les événements en tant que même initialisée à 100 et Stepper définit une propriété quatrième : Increment

de type

double

Slider

mais le

Maximum

propriété est

, initialisé à 1

Visuellement, la Stepper se compose de deux boutons nommés – et +. En appuyant sur – diminue Value par Increment à un minimum de Minimum . En appuyant sur + augmente Value par Increment à un maximum de Maximum . Cela est illustré par la StepperDemo exemple.

Commutateur et la case à cocher Le

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

Switch

Principes fondamentaux de commutateur Visuellement, le Switch se compose d’un bouton bascule qui peut être désactivée puis activé. La classe définit une propriété : IsToggled Switch

de type

bool

définit un événement :

accompagné d’un propriété. Toggled

ToggledEventArgs

Le SwitchDemo programme illustre le

Switch

objet, déclenché lorsque le

IsToggled

les modifications de

.

Une case à cocher traditionnel Certains développeurs peuvent préférer une plus traditionnelle CheckBox à la Switch . Le Xamarin.FormsBook.Toolkit bibliothèque contient un CheckBox classe qui dérive de ContentView . CheckBox est implémentée par le CheckBox.xaml et CheckBox.xaml.cs fichiers. CheckBox définit trois propriétés ( Text , FontSize , et IsChecked ) et un CheckedChanged événement. Le CheckBoxDemo illustre cela

CheckBox

.

Saisie de texte Xamarin.Forms définit trois vues qui permettent l’utilisateur d’entrer et de modifier le texte : pour une seule ligne de texte Editor plusieurs lignes de texte SearchBar pour une seule ligne de texte à des fins de recherche. Entry

Entry

et

Editor

dérivent

InputView

, qui dérive à son

View

.

SearchBar

dérive directement de

View

.

Clavier et le focus Sur les téléphones et tablettes sans claviers physiques, le Entry , Editor , et SearchBar tous les éléments de provoquent un clavier virtuel à la fenêtre contextuelle. La présence de ce clavier sur l’écran concerne le focus d’entrée. Une vue doit avoir à la fois son IsVisible et IsEnabled propriétés définies sur true pour obtenir le focus d’entrée. Deux méthodes, une propriété en lecture seule et deux événements sont impliqués avec focus d’entrée. Elles sont définies par VisualElement :

Le Le Le Le Le

méthode tente de définir le focus d’entrée à un élément et retourne true en cas de réussite Unfocus méthode supprime le focus d’entrée à partir d’un élément IsFocused propriété en lecture seule indique si l’élément a le focus d’entrée Focused événements indique quand un élément obtient le focus d’entrée Unfocused événements indique quand un élément perd le focus d’entrée Focus

Choix du clavier Le InputView classe à partir de laquelle de type

Keyboard

Entry

et

Editor

dériver ne définit qu’une seule propriété :

Keyboard

Indique le type de clavier qui s’affiche. Certains claviers sont optimisés pour des URI ou des nombres. Le Keyboard classe permet la définition d’un clavier avec un ligne statique Keyboard.Create méthode avec un argument de type KeyboardFlags , une énumération avec les indicateurs de bits suivants : None

la valeur 0

la valeur 1 Spellcheck la valeur est 2 Suggestions la valeur 4 All la valeur \xFFFFFFFF CapitalizeSentence

Lors de l’utilisation de la propriété multiline Editor quand au moins un paragraphe de texte est attendu, l’appel Keyboard.Create constitue une bonne approche à la sélection d’un clavier. Pour la ligne unique Entry , les propriétés statiques suivantes en lecture seule de Keyboard sont utiles : Default Text Chat Url Email Telephone Numeric

pour les nombres positifs, avec ou sans virgule décimale.

Le KeyboardTypeConverter permet de spécifier ces propriétés dans XAML, comme illustré par la EntryKeyboards programme. Événements et propriétés de l’entrée La ligne unique Entry définit les propriétés suivantes : de type string , le texte qui apparaît dans le Entry TextColor de type Color FontFamily de type string FontSize de type double FontAttributes de type FontAttributes IsPassword de type bool , ce qui entraîne des caractères à masquer Placeholder de type string , pour les couleur atténuées texte qui apparaît dans le ce soit est typé PlaceholderColor de type Color Text

Le

Entry

définit également deux événements :

Entry

avant que quoi que

TextChanged

avec un

TextChangedEventArgs

objet, déclenché chaque fois que le

Text

les modifications de

propriété Completed , déclenché lorsque l’utilisateur est terminée et que le clavier est fermé. L’utilisateur indique l’achèvement de manière spécifique à la plateforme

Le QuadraticEquations illustre ces deux événements. La différence de l’éditeur La propriété multiline Editor définit les mêmes Text et Font propriétés comme propriétés. Editor définit également les deux mêmes propriétés que Entry .

Entry

mais pas les autres

JustNotes est un programme de prise de notes de forme libre qui enregistre et restaure le contenu de la Le SearchBar Le SearchBar ne dérive pas de InputView , donc il n’a pas un Font , et Placeholder propriétés qui Entry définit. En outre,

Editor

.

propriété. Mais il dispose de tous les Text , SearchBar définit trois propriétés supplémentaires :

Keyboard

de type Color SearchCommand de type ICommand pour une utilisation avec les liaisons de données et MVVM SearchCommandParameter de type Object , pour une utilisation avec SearchCommand CancelButtonColor

La plateforme spécifique Annuler bouton efface le texte. Le SearchBar comporte également un bouton de recherche spécifiques à la plateforme. En appuyant sur un de ces boutons déclenche un des deux événements qui SearchBar définit : TextChanged

accompagné d’un

TextChangedEventArgs

objet

SearchButtonPressed

Le SearchBarDemo exemple illustre la

SearchBar

.

Sélection de date et d’heure Le DatePicker et TimePicker vues instaurez des contrôles spécifiques à une plateforme permettant aux utilisateurs de spécifier une date ou heure. DatePicker DatePicker

définit les quatre propriétés :

de type DateTime , initialisé pour le 1er janvier 1900. MaximumDate de type DateTime , initialisé pour le 31 décembre 2100 Date de type DateTime , initialisée à DateTime.Today Format de type string , .NET mise en forme de chaîne initialisé à « d », le modèle de date courte, ce qui entraîne un affichage de la date comme « 7/20/1969 » dans le fuseau horaire. MinimumDate

Vous pouvez définir le DateTime propriétés dans XAML en exprimant les propriétés en tant qu’éléments de propriété et à l’aide de la culture dite indifférente courte-date de format (« 20/7/1969 »). Le DaysBetweenDates exemple calcule le nombre de jours entre deux dates sélectionnées par l’utilisateur. Le TimePicker (ou s’agit-il d’un TimeSpanPicker ?) TimePicker définit deux propriétés et aucun événement : est de type TimeSpan plutôt que DateTime , indiquant le temps écoulé depuis minuit Format de type string , la mise en forme de chaîne initialisée à « t », le modèle d’heure courte, ce qui entraîne un affichage de l’heure comme « 1:45 PM » dans le fuseau horaire de .NET. Time

Le SetTimer programme montre comment utiliser le TimePicker pour spécifier une heure d’une minuterie. Le programme ne fonctionne que si vous le conservez au premier plan. SetTimer montre également comment utiliser le d’alerte.

Liens connexes Chapitre 15 de texte intégral (PDF ) Exemples de chapitre 15 Slider Entrée Éditeur DatePicker

DisplayAlert

méthode de

Page

pour afficher un message

Résumé du chapitre 16. Liaison de données 08/12/2018 • 14 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Les programmeurs souvent se retrouvent écrire des gestionnaires d’événements qui détectent lorsqu’une propriété d’un objet a changé et l’utilisent pour modifier la valeur d’une propriété dans un autre objet. Ce processus peut être automatisé avec la technique de liaison de données. Liaisons de données sont généralement définis dans XAML et font partie de la définition de l’interface utilisateur. Très souvent, ces liaisons de données connecter des objets d’interface utilisateur aux données sous-jacentes. Il s’agit d’une technique qui est expliquée plus en chapitre 18. MVVM. Toutefois, les liaisons de données peuvent également connecter deux ou plusieurs éléments d’interface utilisateur. La plupart des premiers exemples de liaison de données dans ce chapitre présentent cette technique.

Principes fondamentaux de liaison Plusieurs propriétés, méthodes et classes sont impliqués dans la liaison de données : Le Binding dérive de la classe BindingBase et encapsule de nombreuses caractéristiques d’une liaison de données Le BindingContext propriété est définie par le BindableObject classe Le SetBinding méthode est également définie par le BindableObject classe Le BindableObjectExtensions classe définit trois supplémentaires SetBinding méthodes Les deux classes suivantes prennent en charge les extensions de balisage XAML pour les liaisons : prend en charge le Binding extension de balisage ReferenceExtension prend en charge le x:Reference extension de balisage BindingExtension

Deux interfaces sont impliqués dans la liaison de données : dans le System.ComponentModel espace de noms est pour l’implémentation de notification lorsqu’une propriété change IValueConverter permet de définir de petites classes qui convertissent les valeurs d’un type vers un autre dans les liaisons de données INotifyPropertyChanged

Une liaison de données connecte à deux propriétés de l’objet de même, ou deux objets différents (le plus souvent). Ces deux propriétés sont appelées les source et cible. En règle générale, une modification dans la propriété source provoque une modification se produise dans la propriété cible, mais parfois, la direction est inversée. Quel que soit : le cible propriété doit être stockée par un BindableProperty le source propriété est généralement un membre d’une classe qui implémente Une classe qui implémente propriété change de valeur.

se déclenche un PropertyChanged événement lorsqu’une implémente INotifyPropertyChanged et déclenche automatiquement

INotifyPropertyChanged BindableObject

INotifyPropertyChanged

un PropertyChanged événement lorsqu’une propriété stockée par un BindableProperty modifie les valeurs, mais vous pouvez écrire vos propres classes qui implémentent INotifyPropertyChanged sans dériver BindableObject .

Code et XAML Le OpacityBindingCode exemple montre comment définir une liaison de données dans le code : La source est le Value propriété d’un La cible est le Opacity propriété d’un

Slider Label

Les deux objets sont connectés en définissant le BindingContext de la Label de l’objet à le Slider objet. Les deux propriétés sont connectées en appelant un SetBinding méthode d’extension sur le Label faisant référence à la OpacityProperty propriété pouvant être liée et le Value propriété de la Slider exprimée sous la forme un chaîne. Manipulation de la

Slider

provoque ensuite la

Label

à apparaître et disparaître.

Le OpacityBindingXaml est le même programme avec la liaison de données définie dans XAML. Le BindingContext du Label est définie sur une x:Reference extension de balisage faisant référence à la Slider et le Opacity propriété de la Label est défini sur le Binding extension de balisage avec son Path propriété faisant référence à la Value propriété de la Slider .

Source et BindingContext Le BindingSourceCode exemple montre une autre approche dans le code. Un Binding objet est créé en définissant le Source propriété le Slider objet et le Path la propriété « Valeur ». Le SetBinding méthode de BindableObject est ensuite appelée sur le Label objet. Le

Binding

constructeur pourrait également avoir été utilisé pour définir le

Binding

objet.

Le BindingSourceXaml exemple illustre la technique comparable dans XAML. Le Opacity propriété de la Label est définie sur une Binding extension de balisage avec Path défini sur le Value propriété et Source définie sur une Embedded x:Reference extension de balisage. En résumé, il existe deux façons de référencer l’objet de source de liaison : Via le Via le

propriété de la cible propriété de la Binding objet lui-même

BindingContext Source

Si les deux sont spécifiés, la seconde est prioritaire. L’avantage de la BindingContext est qu’elle est propagée à travers l’arborescence visuelle. Il s’agit de très pratique si plusieurs propriétés de la cible sont liées au même objet source. Le WebViewDemo programme illustre cette technique avec le WebView élément. Deux Button héritent des éléments de navigation et en amont un BindingContext à partir de leur parent qui fait référence à la WebView . Le IsEnabled propriétés des deux boutons ont puis simple Binding des extensions de balisage qui ciblent le bouton IsEnabled propriétés basées sur les paramètres de la CanGoBack et CanGoForward propriétés en lecture seule de la WebView .

Le mode de liaison Définir le

Mode

propriété du

Binding

à un membre de la

BindingMode

énumération :

afin que les modifications dans la propriété source affectent la cible OneWayToSource afin que les modifications dans la propriété cible affecte la source TwoWay afin que les modifications dans la source et la cible affecte les uns des autres OneWay

Pour utiliser le DefaultBindingMode spécifié lorsque la cible BindableProperty a été créé. Si aucun n’a été spécifié, la valeur par défaut est OneWay pour les propriétés pouvant être liées normales, et OneWayToSource pour les propriétés pouvant être liées en lecture seule. Default

NOTE Le BindingMode énumération maintenant inclut également OnTime pour appliquer une liaison uniquement lorsque le contexte de liaison change et non lorsque la propriété source change.

Les propriétés qui sont susceptibles d’être des cibles de liaisons de données dans les scénarios MVVM en général ont un DefaultBindingMode de TwoWay . Ces équivalents sont : propriété de Slider et Stepper IsToggled propriété de Switch Text propriété de Entry , Editor , et SearchBar Date propriété de DatePicker Time propriété de TimePicker Value

Le BindingModes exemple montre les modes de quatre liaison avec une liaison de données où la cible est le FontSize propriété d’un Label et la source est le Value propriété d’un Slider . Cela permet à chaque Slider pour contrôler la taille de police correspondantes Label . Mais le Slider éléments ne sont pas initialisés, car le DefaultBindingMode de la FontSize propriété est OneWay . Le ReverseBinding exemple définit les liaisons sur le Value propriété de la Slider faisant référence à la FontSize propriété de chaque Label . Cela semble être descendante, mais il fonctionne mieux dans l’initialisation le Slider éléments, car le Value propriété de la Slider a un DefaultBindingMode de TwoWay .

Ce comportement est analogue à la façon dont les liaisons sont définies dans MVVM, et vous utiliserez ce type de liaison fréquemment.

Chaîne mise en forme Lorsque la propriété cible est de type string , vous pouvez utiliser la StringFormat propriété définie par BindingBase pour convertir la source en un string . Définir le StringFormat propriété à une mise en forme de chaîne que vous utiliseriez avec la méthode statique de .NET String.Format format pour afficher l’objet. Lorsque vous utilisez cette chaîne de mise en forme dans une extension de balisage, placez-la entre guillemets simples afin

des accolades ne sont pas être confondue avec une extension de balisage incorporé. Le ShowViewValues exemple montre comment utiliser

StringFormat

dans XAML.

Le WhatSizeBindings exemple illustre l’affichage de la taille de la page avec des liaisons à le propriétés de la ContentPage .

Width

et

Height

Pourquoi elle est appelée « Path » ? Le Path propriété du Binding est ce qu’on appelle, car elle peut être une série de propriétés et indexeurs séparés par des points. Le BindingPathDemos montre plusieurs exemples.

Convertisseurs de valeur de liaison Lorsque les propriétés source et cible d’une liaison de types différents, vous pouvez convertir entre les types à l’aide d’un convertisseur de liaison. Il s’agit d’une classe qui implémente le IValueConverter interface et contient deux méthodes : Convert pour convertir la source à la cible, et ConvertBack Pour convertir la cible à la source. Le IntToBoolConverter classe dans le Xamarin.FormsBook.Toolkit bibliothèque est un exemple de conversion d’un int à un bool . Est illustrée par la ButtonEnabler exemple, ce qui permet uniquement la Button si au moins un caractère a été tapé dans un Entry . Le BoolToStringConverter classe convertit un bool à un string et définit deux propriétés pour spécifier que le texte doit être retourné pour false et true valeurs. Le BoolToColorConverter est similaire. Le SwitchText exemple illustre l’utilisation de ces deux convertisseurs pour afficher des textes différents dans différentes couleurs selon un Switch paramètre. Générique BoolToObjectConverter peut remplacer le BoolToStringConverter et comme généralisée bool -à-convertisseur d’objet de tout type.

BoolToColorConverter

et agissent

Liaisons et des vues personnalisées Vous pouvez simplifier les contrôles personnalisés à l’aide de liaisons de données. Le NewCheckBox.cs fichier de code définit Text , TextColor , FontSize , FontAttributes , et IsChecked propriétés, mais n’a aucune logique pour les éléments visuels du contrôle. À la place la NewCheckBox.cs.xaml fichier contient tout le balisage pour les visuels du contrôle par le biais des liaisons de données sur le Label les éléments basés sur les propriétés définies dans le fichier code-behind. Le NewCheckBoxDemo exemple illustre la

Liens connexes Chapitre 16 de texte intégral (PDF ) Exemples de chapitre 16 Liaison de données

NewCheckBox

contrôle personnalisé.

Résumé du chapitre 17. Maîtrise de la grille 08/12/2018 • 8 minutes to read • Edit Online

télécharger l’exemple Le Grid est un mécanisme de disposition puissants qui réorganise ses enfants en lignes et colonnes de cellules. Le code HTML similaire à la différence table élément, le Grid est destiné uniquement à des fins de disposition plutôt que de présentation.

La grille de base Grid dérive de Layout , qui définit un collection dans XAML ou de code.

Children

propriété qui

Grid

hérite. Vous pouvez remplir cette

La grille dans XAML La définition d’un Grid dans XAML commence généralement par remplissage le RowDefinitions et ColumnDefinitions collections de la Grid avec RowDefinition et ColumnDefinition objets. Voici comment vous établissez le nombre de lignes et colonnes de la Grid et leurs propriétés. RowDefinition

a un

Height

propriété et

ColumnDefinition

a un

Width

propriété, tous deux de type

GridLength

,

une structure. Dans XAML, le GridLengthTypeConverter convertit les chaînes de texte simples dans GridLength valeurs. Dans les coulisses, le GridLength constructeur crée le GridLength valeur basée sur un nombre et une valeur de type GridUnitType , une énumération avec trois membres : — la largeur ou la hauteur est spécifiée en unités indépendantes du périphérique (il s’agit d’un nombre en XAML ) Auto — la largeur ou hauteur est redimensionnée automatiquement selon le contenu de la cellule (« Auto » dans XAML ) Star — restes hauteur ou la largeur est allouée proportionnellement (un nombre avec «* », appelé en étoile, dans XAML ) Absolute

Chaque enfant de le Grid doit également être affecté une ligne et colonne (explicitement ou implicitement). Ligne s’étend et étendues de colonne sont facultatifs. Ceux-ci sont spécifiées à l’aide des propriétés pouvant être liées jointes — propriétés qui sont définies par le Grid mais définies sur les enfants de le Grid . Grid définit quatre propriétés pouvant être liées attachées statiques : — la ligne de base zéro ; valeur par défaut est 0 ColumnProperty — la colonne de base zéro ; valeur par défaut est 0 RowSpanProperty — le nombre de lignes enfant s’étend sur ; valeur par défaut est 1 ColumnSpanProperty — le nombre de colonnes enfant s’étend sur ; valeur par défaut est 1 RowProperty

Dans le code, un programme peut utiliser les huit méthodes statiques pour définir et obtenir ces valeurs : Grid.SetRow

et

Grid.GetRow

et Grid.GetColumn Grid.SetRowSpan et Grid.GetRowSpan Grid.SetColumnSpan et Grid.GetColumnSpan Grid.SetColumn

Dans XAML, vous utilisez les attributs suivants pour la définition de ces valeurs : Grid.Row Grid.Column Grid.RowSpan Grid.ColumnSpan

Le SimpleGridDemo exemple montre comment créer et initialiser un

Grid

dans XAML.

Le Grid hérite le Padding propriété Layout et définit deux propriétés supplémentaires qui fournissent l’espacement entre les lignes et colonnes : a la valeur par défaut de 6 ColumnSpacing a la valeur par défaut de 6 RowSpacing

Le RowDefinitions et ColumnDefinitions collections ne sont pas strictement obligatoires. S’il est absent, le Grid crée des lignes et des colonnes pour le Grid enfants et leur donne toutes les une valeur par défaut GridLength de «*» (en étoile). La grille dans le code Le GridCodeDemo exemple montre comment créer et remplir un Grid dans le code. Vous pouvez définir les propriétés jointes pour chaque enfant directement ou indirectement en appelant supplémentaires Add méthodes telles que Add défini par le Grid.IGridList interface. Le graphique à barres grille Le GridBarChart exemple montre comment ajouter plusieurs BoxView éléments à un Grid à l’aide de la majeure partie AddHorizontal (méthode). Par défaut, ces BoxView éléments ont la même largeur. La hauteur de chaque BoxView peut ensuite être contrôlé et ressemble à un graphique à barres. Le Grid dans le GridBarChart exemple partages un AbsoluteLayout parent avec initialement invisible Frame . Le programme définit également un TapGestureRecognizer sur chaque BoxView à utiliser le Frame pour afficher des informations sur la barre drainée. Alignement de la grille Le GridAlignment exemple montre comment utiliser le d’aligner les enfants dans un Grid cellule.

VerticalOptions

Le SpacingButtons exemple tout aussi espaces

éléments centrés dans

Button

et

HorizontalOptions

Grid

propriétés afin

cellules.

Les bordures et les séparateurs de cellule Le Grid n’inclut pas une fonctionnalité qui dessine les bordures ou des séparateurs de cellule. Toutefois, vous pouvez créer vos propres. Le GridCellDividers montre comment définir des lignes supplémentaires et colonne en particulier pour dynamique BoxView éléments afin de reproduire les lignes de démarcation. Le GridCellBorders programme ne crée pas de toutes les cellules, mais au lieu de cela aligne dans chaque cellule pour imiter une bordure de cellule.

Exemples de grille presque réel Le KeypadGrid exemple utilise un

Grid

pour afficher un pavé numérique :

BoxView

éléments

Répondre aux changements d’orientation Le Grid peut aider à structurer un programme pour répondre aux changements d’orientation. Le GridRgbSliders exemple illustre une technique qui déplace un élément entre une deuxième ligne d’un téléphone orienté en mode portrait et la deuxième colonne d’un téléphone en mode paysage. Initialise le programme Slider éléments à une plage de 0 à 255 et utilise les liaisons de données pour afficher la valeur des curseurs au format hexadécimal. Étant donné que le Slider valeurs sont virgule flottante et la mise en forme de chaîne de format hexadécimal fonctionne uniquement avec des entiers, de .NET un DoubleToIntConvert classe dans le Xamarin.FormsBook.Toolkit bibliothèque est utile.

Liens connexes Chapitre 17 de texte intégral (PDF ) Exemples de chapitre 17 Grid

Résumé du chapitre 18. MVVM 08/12/2018 • 8 minutes to read • Edit Online

télécharger l’exemple Un des meilleurs moyens de concevoir une application est en séparant l’interface utilisateur à partir du code sousjacent, ce qui est parfois appelé le logique métier. Plusieurs techniques existent, mais celui qui est adapté aux environnements basés sur le XAML est appelé Model-View -ViewModel ou MVVM.

Relations MVVM Une application MVVM a trois couches : Le modèle fournit des données sous-jacentes, parfois dans les fichiers ou web accède à La vue est l’utilisateur interface ou la couche présentation, généralement implémentée dans XAML Le ViewModel connecte le modèle et la vue Le modèle est ignorant la du ViewModel et le ViewModel est ignorant la de la vue. Généralement, ces trois couches se connectent entre eux à l’aide des mécanismes suivants :

Dans de nombreux programmes plus petits (et ceux qui sont encore plus important), le modèle est souvent absent ou sa fonctionnalité est intégrée dans le ViewModel.

Liaison de données et ViewModels Pour s’engager dans des liaisons de données, un ViewModel doit être capable d’informer la vue lorsqu’une propriété du ViewModel a changé. Le ViewModel fait ceci en implémentant la INotifyPropertyChanged interface dans le System.ComponentModel espace de noms. Il s’agit de partie de .NET au lieu de Xamarin.Forms. (Généralement ViewModels tenter de maintenir l’indépendance de la plateforme.) Le INotifyPropertyChanged interface déclare un événement unique nommé propriété qui a changé.

PropertyChanged

qui indique la

Une horloge de ViewModel Le DateTimeViewModel dans le Xamarin.FormsBook.Toolkit bibliothèque définit une propriété de type DateTime que les modifications basé sur un minuteur. La classe implémente INotifyPropertyChanged et déclenche le PropertyChanged événement chaque fois que le DateTime modifications apportées aux propriétés. Le MvvmClock exemple instancie ce ViewModel et utilise des liaisons de données au ViewModel pour afficher les mises à jour informations de date et heure. Propriétés interactives d’un ViewModel Propriétés d’un ViewModel peuvent être plus interactives, tel qu’indiqué par le SimpleMultiplierViewModel (classe), qui fait partie de la SimpleMultiplier exemple. Les liaisons de données fournissent des valeurs multiplicande et le multiplicateur de deux Slider éléments et afficher le produit avec un Label . Toutefois, vous pouvez modifier considérablement cette interface utilisateur dans XAML sans aucune modification à la suite de ViewModel ou le fichier code-behind.

Un ViewModel de couleur Le ColorViewModel dans le Xamarin.FormsBook.Toolkit bibliothèque intègre les modèles de couleurs RVB et TSL. Il est montré dans le HslSliders exemple :

Rationalisation du ViewModel Le code dans le ViewModel peut être rationalisé en définissant un OnPropertyChanged à l’aide de la méthode la CallerMemberName attribut, qui obtient le nom de propriété appelant automatiquement. Le ViewModelBase classe dans le Xamarin.FormsBook.Toolkit bibliothèque effectue cette et fournit une classe de base ViewModel.

L’interface de commande MVVM fonctionne avec les liaisons de données et des liaisons de données fonctionnent avec des propriétés, afin de MVVM semble déficientes lorsqu’il s’agit de la gestion d’un Clicked événement d’un Button ou un Tapped événement d’un TapGestureRecognizer . Pour autoriser les ViewModels gérer ces événements, Xamarin.Forms prend en charge la interface de commande. L’interface de commande se présente sous la de type

ICommand

(défini dans le

CommandParameter

de type

Object

Command

Button

avec deux propriétés publiques :

System.Windows.Input

espace de noms)

Pour prendre en charge l’interface de commande, un ViewModel doit définir une propriété de type ICommand puis les données liées à la Command propriété de la Button . Le ICommand interface déclare deux méthodes et un événement : Un Un Un

méthode avec un argument de type object CanExecute méthode avec un argument de type object qui retourne CanExecuteChanged événement Execute

bool

En interne, un ViewModel définit chaque propriété de type ICommand à une instance d’une classe qui implémente le ICommand interface. Via la liaison de données, le Button appelle initialement le CanExecute (méthode) et se désactive si la méthode retourne false . Il définit également un gestionnaire pour le CanExecuteChanged événements et les appels CanExecute chaque fois que cet événement est déclenché. Si le Button est activé, il appelle le Execute méthode chaque fois que le Button un clic sur. Vous devrez peut-être certains ViewModels antérieures à Xamarin.Forms, et ceux-ci peuvent prennent déjà en charge l’interface de commande. Pour les ViewModels nouveau destiné à être utilisé uniquement avec

Xamarin.Forms, Xamarin.Forms fournit un Command classe et un Command classe qui implémentent le interface. Le type générique est le type de l’argument à la Execute et CanExecute méthodes.

ICommand

Exécutions de méthode simple Le PowersOfThree exemple montre comment utiliser l’interface de commande dans un ViewModel. Le PowersViewModel classe définit deux propriétés de type ICommand et définit également deux propriétés privées qu’il transmet à la plus simple Command constructeur. Le programme contient des liaisons de données à partir de ce ViewModel à la Command propriétés de deux Button éléments. Le Button éléments peuvent être facilement remplacées avec aucune modification de code.

TapGestureRecognizer

objets dans XAML sans

Une calculatrice, presque Le AddingMachine exemple rend utilisez à la fois le Execute et CanExecute méthodes de ICommand . Il utilise un AdderViewModel classe dans le Xamarin.FormsBook.Toolkit bibliothèque. Le ViewModel contient six propriétés de type ICommand . Celles-ci sont initialisées à partir de la Command constructeur et Command constructeur de Command et le Command constructeur de Command . Les touches numériques de la machine à additionner sont liés à la propriété qui est initialisée avec Command et un string l’argument de Execute et CanExecute identifie la clé.

ViewModels et le cycle de vie d’application Le

utilisé dans le AddingMachine exemple définit également deux méthodes nommées SaveState et RestoreState . Ces méthodes sont appelées à partir de l’application lorsqu’elle se met en veille et lorsqu’il démarre à nouveau. AdderViewModel

Liens connexes Chapitre 18 de texte intégral (PDF ) Exemples de chapitre 18 Modèles d’Application d’entreprise à l’aide de livre électronique Xamarin.Forms

Résumé du chapitre 19. Vues de collection 08/12/2018 • 22 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Xamarin.Forms définit trois vues qui maintiennent des collections et affichent leurs éléments : est une liste relativement courte des éléments de type chaîne qui permet à l’utilisateur à choisir une ListView est souvent une longue liste d’éléments généralement du même type et de mise en forme, également autoriser l’utilisateur à choisir une TableView est une collection de cellules (généralement de différents types et des apparences) pour afficher des données ou gérer l’entrée utilisateur Picker

Il est courant pour les applications MVVM le

ListView

pour afficher la collection d’objets sélectionnable.

Options du programme avec le sélecteur Le Picker est un bon choix lorsque vous avez besoin autoriser l’utilisateur à choisir une option parmi une liste relativement courte des string éléments. Le sélecteur et la gestion des événements Le PickerDemo exemple montre comment utiliser XAML pour définir le Picker Title propriété et ajoutez string éléments à la Items collection. Lorsque l’utilisateur sélectionne le Picker , elle affiche les éléments dans le Items collection en fonction de la plateforme. Le

événements indique quand l’utilisateur a sélectionné un élément. Base zéro propriété indique ensuite l’élément sélectionné. Si aucun élément n’est sélectionné, SelectedIndex

SelectedIndexChanged

SelectedIndex

est égal à –1. Vous pouvez également utiliser SelectedIndex pour initialiser l’élément sélectionné, mais il doit être définie après le Items collection est remplie. Dans XAML, cela signifie que vous allez probablement utiliser un élément de propriété pour définir SelectedIndex . Le sélecteur de liaison de données Le SelectedIndex propriété est stockée par une propriété pouvant être liée mais Items n’est pas, par conséquent, à l’aide de la liaison de données avec un Picker est difficile. Une solution consiste à utiliser le Picker en association avec un ObjectToIndexConverter comme celui de la Xamarin.FormsBook.Toolkit bibliothèque. Le PickerBinding montre comment cela fonctionne. NOTE Xamarin.Forms Picker inclut désormais données. Consultez sélecteur.

ItemsSource

et

SelectedItem

Rendu des données avec ListView

propriétés qui prennent en charge la liaison de

Le ListView est la seule classe qui dérive de propriétés.

ItemsView

dont elle hérite la

ItemsSource

et

ItemTemplate

est de type IEnumerable , mais il est null par défaut et doit être explicitement initialisés ou (généralement) une collection via une liaison de données. Les éléments de cette collection peuvent être de n’importe quel type. ItemsSource

définit un SelectedItem propriété qui est soit définie sur un des éléments dans le ItemsSource collection ou null si aucun élément n’est sélectionné. ListView se déclenche le ItemSelected événement lorsqu’un nouvel élément est sélectionné. ListView

Collections et les sélections Le ListViewList exemple remplit un ListView avec 17 Color des valeurs dans un List collection. Les éléments sont sélectionnables, mais par défaut, ils sont affichés avec leurs résultats peu esthétiques ToString représentations. Plusieurs exemples dans ce chapitre vous montrent comment corriger qui affichent et rendre aussi attractif comme vous le souhaitez. Le séparateur de ligne Sur iOS et Android affiche, une fine ligne sépare les lignes. Vous pouvez contrôler ceci avec la SeparatorVisibility et SeparatorColor propriétés. SeparatorVisibility propriété est de type SeparatorVisibility , une énumération avec deux membres : Default

, le paramètre par défaut

None

L’élément sélectionné de liaison de données Le SelectedItem propriété repose sur une propriété pouvant être liée, il peut être la source ou la cible d’une liaison de données. Sa valeur par défaut BindingMode est OneWayToSource , mais il est généralement la cible d’une liaison de données bidirectionnelle, en particulier dans les scénarios MVVM. Le ListViewArray exemple illustre ce type de liaison. La différence de ObservableCollection Le ListViewLogger exemples de jeux de la ItemsSource propriété d’un ListView à un List collection puis progressivement ajoute une nouvelle DateTime objet à la collection chaque seconde à l’aide d’un minuteur. Toutefois, le ListView n’automatiquement mettre à jour lui-même, car le List collection n’a pas un mécanisme de notification pour indiquer quand les éléments sont ajoutés ou supprimés de la collection. Une classe beaucoup mieux à utiliser dans de tels scénarios est ObservableCollection définies dans le System.Collections.ObjectModel espace de noms. Cette classe implémente le INotifyCollectionChanged interface et par conséquent se déclenche un CollectionChanged événement lorsque des éléments sont ajoutés ou supprimés de la collection, ou lorsqu’ils sont remplacés ou déplacés dans la collection. Lorsque le ListView en interne détecte qu’une classe qui implémente INotifyCollectionChanged a été défini sur sa ItemsSource propriété, elle joint un gestionnaire à la CollectionChanged événement et met à jour son affichage lorsque la collection est modifiée. Le ObservableLogger exemple illustre l’utilisation de

ObservableCollection

.

Modèles et des cellules Par défaut, un ListView affiche les éléments dans sa collection à l’aide de chaque élément Une meilleure approche consiste à définir un modèle pour afficher les éléments.

ToString

(méthode).

Pour essayer cette fonctionnalité, vous pouvez utiliser la NamedColor classe dans le Xamarin.FormsBook.Toolkit bibliothèque. Cette classe définit un mappage statique All propriété de type IList contenant 141 NamedColor objets correspondant aux champs publics de la Color structure.

Le NaiveNamedColorList exemples de jeux le ItemsSource d’un ListView à ce NamedColor.All propriété, mais uniquement les noms de classe qualifié complet de le NamedColor sont des objets affiché. a besoin d’un modèle pour afficher ces éléments. Dans le code, vous pouvez définir le ItemTemplate propriété définie par ItemsView à un DataTemplate à l’aide de l’objet le DataTemplate constructeur qui fait référence à un dérivé de la Cell classe. Cell a cinq dérivés : ListView

— contient deux Label vues (point de vue conceptuel) ImageCell — Ajoute un Image afficher à TextCell EntryCell — contient un Entry afficher avec un Label SwitchCell — contient un Switch avec un Label ViewCell — peut être toute View (probablement avec enfants) TextCell

Puis appelez SetValue et SetBinding sur le DataTemplate objet à associer les valeurs avec le Cell propriétés, ou pour définir des liaisons de données sur le Cell propriétés faisant référence à des propriétés des éléments dans le ItemsSource collection. Cela est illustré dans le TextCellListCode exemple. Comme chaque élément est affiché par le ListView , une petite arborescence visuelle est construite à partir du modèle et des liaisons de données sont établies entre l’élément et les propriétés des éléments dans cette arborescence d’éléments visuels. Vous pouvez obtenir une idée de ce processus en installant des gestionnaires pour les ItemAppearing et ItemDisappearing événements de la ListView , ou à l’aide d’une alternative DataTemplate constructeur qui utilise une fonction qui est appelée chaque fois qu’arborescence d’éléments visuels d’un élément doit être créé. Le TextCellListXaml montre un programme fonctionnellement identique entièrement dans XAML. Un DataTemplate balise est définie sur le ItemTemplate propriété de la ListView , puis le TextCell est défini sur le DataTemplate . Liaisons aux propriétés des éléments dans la collection sont définies directement sur le Text et Detail propriétés de la TextCell . Cellules personnalisées Dans XAML, il est possible de définir un ViewCell à la DataTemplate , puis définissez une arborescence d’éléments visuels personnalisé en tant que le View propriété du ViewCell . ( View est la propriété de contenu de ViewCell la ViewCell.View balises ne sont pas nécessaires.) Le CustomNamedColorList exemple illustre cette technique :

Obtenir la taille adaptées à toutes les plateformes peut être difficile. Le RowHeight propriété est utile, mais dans certains cas, vous voudrez avoir recours à la HasUnevenRows propriété, qui est moins efficace, mais force le

pour dimensionner les lignes. Pour iOS et Android, vous devez utiliser une de ces deux propriétés pour obtenir le dimensionnement de la ligne appropriée. ListView

Grouper les éléments de ListView ListView prend en charge le regroupement d’éléments et de naviguer parmi ces groupes. Le ItemsSource propriété doit être définie sur une collection de collections : l’objet qui ItemsSource a la valeur doit implémenter IEnumerable , et chaque élément dans la collection doit également implémenter IEnumerable . Chaque groupe doit inclure deux propriétés : une description du groupe et une abréviation à trois lettres. Le NamedColorGroup classe dans le Xamarin.FormsBook.Toolkit bibliothèque crée sept groupes de NamedColor objets. Le ColorGroupList exemple montre comment utiliser ces groupes avec le IsGroupingEnabled propriété du ListView la valeur true et le GroupDisplayBinding et GroupShortNameBinding propriétés liées aux propriétés dans chaque groupe. En-têtes de groupe personnalisé Il est possible de créer des en-têtes personnalisés pour le ListView groupes en remplaçant le GroupDisplayBinding propriété avec le GroupHeaderTemplate définition d’un modèle pour les en-têtes. ListView et l’interactivité Généralement d’obtenir l’interaction utilisateur avec un ListView en attachant un gestionnaire à la ItemSelected ou ItemTapped événement, ou en définissant une liaison de données sur le SelectedItem propriété. Mais certains types de cellule ( EntryCell et SwitchCell ) autoriser l’interaction utilisateur, et il est également possible de créer des cellules personnalisées qui elles-mêmes interagir avec l’utilisateur. Le InteractiveListView crée 100 instances de ColorViewModel et permet à l’utilisateur modifier chaque couleur à l’aide d’un trio de Slider éléments. Le programme utilise également le ColorToContrastColorConverter dans le Xamarin.FormsBook.Toolkit.

ListView et MVVM joue un rôle important dans les scénarios MVVM. Chaque fois qu’un IEnumerable collection existe dans un ViewModel, il est souvent lié à un ListView . En outre, les éléments dans la collection souvent implémentent INotifyPropertyChanged pour lier des propriétés dans un modèle. ListView

Une collection de ViewModel Pour cela, Explorer le SchoolOfFineArts bibliothèque crée plusieurs classes basées sur un fichier de données XML et des images d’étudiants fictives de l’établissement fictif. Le Student dérive de la classe ViewModelBase . Le StudentBody classe est une collection de Student objets et dérive également de ViewModelBase . Le SchoolViewModel télécharge le fichier XML et les assemble tous les objets. Le StudentList programme utilise une

ImageCell

pour afficher les étudiants et leurs images dans un

ListView

:

Le ListViewHeader exemple ajoute un

Header

propriété mais il ne s’affiche sur Android.

Sélection et le contexte de liaison Le SelectedStudentDetail programme lie le BindingContext d’un StackLayout à la SelectedItem propriété de la ListView . Cela permet au programme afficher des informations détaillées sur l’étudiant sélectionné. Menus contextuels Une cellule peut définir un menu contextuel qui est implémenté de manière spécifique à la plateforme. Pour créer ce menu, ajoutez MenuItem des objets sur le ContextActions propriété de la Cell . MenuItem Text Icon

définit les cinq propriétés : de type de type

string FileImageSource

de type bool Command de type ICommand CommandParameter de type object IsDestructive

Le Command et CommandParameter propriétés impliquent que le ViewModel pour chaque élément contient des méthodes pour exécuter les commandes de menu souhaitée. Dans les scénarios non MVVM, MenuItem définit également un Clicked événement. Le CellContextMenu illustre cette technique. Le Command propriété de chaque MenuItem est liée à une propriété de type ICommand dans la Student classe. Définir le IsDestructive propriété true pour un MenuItem qui supprime ou l’objet sélectionné. Faire varier les éléments visuels Parfois, vous voudrez légères variantes dans les visuels des éléments dans le ListView basée sur une propriété. Par exemple, lorsqu’un point de qualité moyenne se situe antérieures à 2.0, la ColorCodedStudents exemple affiche le nom de cette étudiant en rouge. Cela s’effectue via l’utilisation d’un convertisseur de valeurs de liaison, ThresholdToObjectConverter , dans le Xamarin.FormsBook.Toolkit bibliothèque. L’actualisation du contenu Le ListView prend en charge un mouvement déroulant pour actualiser ses données. Le programme doit définir le IsPullToRefresh propriété true pour activer cette option. Le ListView répond à la liste déroulante en définissant son IsRefreshing propriété true et en déclenchant le Refreshing événement et (pour les scénarios MVVM ) appelant le Execute méthode de son RefreshCommand propriété.

Code de gestion de la Refresh événement ou la RefreshCommand éventuellement met à jour les données affichées par le ListView et définit IsRefreshing à false . Le RssFeed exemple montre comment utiliser un RssFeedViewModel qui implémente IsRefreshing propriétés pour la liaison de données.

RefreshCommand

et

Le TableView et ses intentions Bien que le ListView affiche généralement plusieurs instances du même type, le TableView se concentre généralement sur la fourniture d’une interface utilisateur pour plusieurs propriétés de différents types. Chaque élément est associé à sa propre Cell dérivés pour afficher la propriété ou en fournissant une interface utilisateur à ce dernier. Propriétés et des hiérarchies TableView définit que quatre propriétés : de type TableIntent , énumération Root de type TableRoot , la propriété de contenu de RowHeight de type int HasUnevenRows de type bool Intent

Le

TableIntent

TableView

énumération indique la façon dont vous prévoyez d’utiliser le

TableView

:

Data Form Settings Menu

Ces membres suggèrent également certaines utilisations pour le

TableView

.

Plusieurs autres classes sont impliqués dans la définition d’une table : TableSectionBase

est une classe abstraite qui dérive de

TableSectionBase

BindableObject

est une classe abstraite qui dérive de

et définit un

TableSectionBase

Title

et implémente

propriété IList

et

INotifyCollectionChanged TableSection TableRoot

En bref,

dérive de

dérive de

TableSectionBase

TableSectionBase

a un Root propriété que vous définissez pour un TableRoot objet, qui est une collection de TableSection objets, chacun d’eux est une collection de Cell objets. Une table comporte plusieurs sections, et chaque section comporte plusieurs cellules. La table elle-même peut avoir un titre, et chaque section peut contenir un titre. Bien que TableView utilise Cell dérivés, il ne fait pas utiliser de DataTemplate . TableView

Un formulaire prosaïque Le EntryForm exemple définit un PersonalInformation modèle de vue, une instance de qui devient le BindingContext de la TableView . Chaque Cell dérivés dans son TableSection peut ensuite avoir des liaisons aux propriétés de la PersonalInformation classe. Cellules personnalisées Le ConditionalCells exemple s’appuie sur EntryForm. Le ProgrammerInformation classe inclut une propriété booléenne qui détermine l’applicabilité des deux propriétés supplémentaires. Pour ces deux propriétés supplémentaires, le programme utilise un personnalisé PickerCell selon un PickerCell.xaml et PickerCell.xaml.cs

dans le Xamarin.FormsBook.Toolkit bibliothèque. Bien que le

propriétés des deux PickerCell éléments sont liés à la propriété booléenne dans ProgrammerInformation , cette technique ne semble pas fonctionner, ce qui demande à l’exemple suivant. IsEnabled

Sections conditionnelles Le ConditionalSection exemple place les deux éléments sont conditionnels sur la sélection de l’élément booléenne dans une fonction TableSection . Le fichier code-behind supprime cette section à partir de la TableView ou ajoute il selon la propriété booléenne. Un menu TableView Une autre utilisation d’un TableView est un menu. Le MenuCommands exemple illustre un menu qui vous permet de déplacer un peu BoxView autour de l’écran.

Liens connexes Chapitre 19 de texte intégral (PDF ) Exemples de chapitre 19 Picker ListView TableView

Résumé du chapitre 20. E/s de fichier et asynchrone 08/12/2018 • 15 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Une interface graphique utilisateur doit répondre aux événements d’entrée d’utilisateur séquentiellement. Cela implique que tout le traitement des événements d’entrée de l’utilisateur doit se trouver dans un thread unique, souvent appelé le thread principal ou thread d’interface utilisateur. Les utilisateurs attendent des interfaces graphiques utilisateur d’être réactives. Cela signifie qu’un programme doit traiter rapidement les événements d’entrée de l’utilisateur. Si cela n’est pas possible, le traitement puis doit être relégué aux threads secondaires de l’exécution. Plusieurs exemples de programmes dans ce livre ont utilisé le WebRequest classe. Dans cette classe le BeginGetResponse méthode démarre un thread de travail, qui appelle une fonction de rappel lorsqu’il est terminé. Toutefois, cette fonction de rappel s’exécute dans le thread de travail, le programme doit donc appeler Device.BeginInvokeOnMainThread méthode pour accéder à l’interface utilisateur. NOTE Xamarin.Forms les programmes doivent utiliser HttpClient plutôt que HttpClient prend en charge les opérations asynchrones.

WebRequest

pour accéder aux fichiers via internet.

Une approche plus moderne pour le traitement asynchrone est disponible dans .NET et c#. Cela implique le Task et Task classes et autres types dans le System.Threading et System.Threading.Tasks espaces de noms, ainsi que le C# 5.0 async et await mots clés. C’est ce que ce chapitre se concentre sur.

À partir des rappels pour attendre Le

Page

classe elle-même contient trois méthodes asynchrones pour afficher les zones de l’alerte :

Retourne un Task objet DisplayAlert Retourne un Task objet DisplayActionSheet Retourne un Task objet DisplayAlert

Le Task objets indiquent que ces méthodes implémentent le modèle asynchrone basé sur une tâche, appelé TAP. Ces Task objets sont retournés rapidement à partir de la méthode. Le Task retournent des valeurs constituent la « promesse » qui une valeur de type TResult seront disponibles lorsque la tâche se termine. Le Task valeur renvoyée indique une action asynchrone sera terminée, mais aucune valeur n’est retournée. Dans tous ces cas, le

Task

est terminée lorsque l’utilisateur ferme la fenêtre d’alerte.

Une alerte avec des rappels Le AlertCallbacks exemple montre comment gérer Task retournent des objets et Device.BeginInvokeOnMainThread appels à l’aide de méthodes de rappel.

Une alerte avec les expressions lambda Le AlertLambdas exemple illustre l’utilisation des fonctions lambda anonyme pour la gestion des Device.BeginInvokeOnMainThread appels. Une alerte avec await Une approche plus simple implique la illustre son utilisation.

async

et

await

Task

et

mots clés introduits dans c# 5. Le AlertAwait exemple

Une alerte sans rien Si la méthode asynchrone retourne Task plutôt que Task , puis le programme n’a pas besoin d’utiliser une de ces techniques si elle n’a pas besoin de savoir quand la tâche asynchrone est terminée. Le NothingAlert illustre cela. Enregistrement des paramètres de programme en mode asynchrone Le SaveProgramChanges exemple illustre l’utilisation de la SavePropertiesAsync méthode de Application pour enregistrer les paramètres du programme mesure qu’elles changent sans substitution de la OnSleep (méthode). Un minuteur indépendant de la plateforme Il est possible d’utiliser Task.Delay pour créer un minuteur indépendant de la plateforme. Le TaskDelayClock illustre cela.

Fichier d’entrée/sortie En règle générale, le .NET System.IO espace de noms a été la source de prise en charge d’e/s de fichier. Bien que certaines méthodes dans cet espace de noms prennent en charge les opérations asynchrones, la plupart ne le faites pas. L’espace de noms prend également en charge plusieurs appels de méthode simple qui exécutent des fonctions d’e/s de fichier sophistiquées. Une bonne et mauvaise nouvelle Toutes les plateformes prises en charge par Xamarin.Forms prise en charge le stockage local application — stockage privé pour l’application. Les bibliothèques Xamarin.iOS et Xamarin.Android incluent une version du .NET Xamarin a expressément adaptées à ces deux plateformes. Ceux-ci incluent des classes provenant System.IO que vous pouvez utiliser pour effectuer des e/s de fichier avec le stockage local des applications dans ces deux plateformes. Toutefois, si vous recherchez ces System.IO classes dans une bibliothèque de classes portable Xamarin.Forms, vous ne trouverez pas les. Le problème est ce fichier d’e/s de Microsoft complètement repensée pour l’API de Runtime de Windows. Programmes qui ciblent Windows 8.1, Windows Phone 8.1 et la plateforme Windows universelle n’utilisent pas System.IO d’e/s de fichier. Cela signifie que vous devrez utiliser le DependencyService (abordé en chapitre 9. Appels d’API spécifiques à la plateforme pour implémenter des e/s de fichier. NOTE Les bibliothèques de classes portable ont été remplacés par les bibliothèques .NET Standard 2.0, et prend en charge de .NET Standard 2.0 System.IO types pour toutes les plateformes de Xamarin.Forms. Il n’est plus nécessaire d’utiliser un DependencyService pour la plupart des tâches d’e/s de fichier. Consultez gestion des fichiers dans Xamarin.Forms pour une approche plus moderne d’e/s de fichier.

Une première tentative de fichier inter-plateformes d’e/s Le TextFileTryout exemple définit un IFileHelper interface pour les e/s de fichier et les implémentations de cette interface dans toutes les plateformes. Toutefois, les implémentations de Windows Runtime ne fonctionnent pas

avec les méthodes dans cette interface, car les méthodes d’e/s de fichier Windows Runtime sont asynchrones. Prise en charge d’e/s de fichier Windows Runtime Utilisent les classes de programmes s’exécutant sous le Runtime Windows le Windows.Storage et Windows.Storage.Streams espaces de noms pour le fichier d’e/s, y compris le stockage local des applications. Étant donné que Microsoft déterminé que toute opération qui requiert que plus de 50 millisecondes doivent être asynchrones pour éviter de bloquer le thread d’interface utilisateur, ces méthodes d’e/s de fichier sont principalement asynchrones. Le code qui illustre cette nouvelle approche sera dans une bibliothèque afin qu’il peut être utilisé par d’autres applications.

Bibliothèques propres à une plateforme Il est préférable de stocker le code réutilisable dans des bibliothèques. Il s’agit évidemment plus difficile lorsque différentes parties du code réutilisable sont pour les systèmes d’exploitation entièrement différents. Le Xamarin.FormsBook.Platform solution illustre une approche. Cette solution contient sept projets différents : Xamarin.FormsBook.Platform, une bibliothèque de classes portable Xamarin.Forms normal Xamarin.FormsBook.Platform.iOS, une bibliothèque de classes iOS Xamarin.FormsBook.Platform.Android, une bibliothèque de classes Android Xamarin.FormsBook.Platform.UWP, une bibliothèque de classes Windows Universal Xamarin.FormsBook.Platform.WinRT, un projet partagé pour le code qui est commune à toutes les plateformes Windows Tous les projets de plateforme individuels (à l’exception de Xamarin.FormsBook.Platform.WinRT) ont des références à Xamarin.FormsBook.Platform. Les trois projets de Windows ont une référence à Xamarin.FormsBook.Platform.WinRT. Tous les projets contiennent un statique Toolkit.Init méthode pour vous assurer que la bibliothèque est chargée s’il n’est pas directement référencé par un projet dans une solution d’application Xamarin.Forms. Le Xamarin.FormsBook.Platform projet contient le nouvel IFileHelper interface. Toutes les méthodes ont maintenant des noms avec Async retour et les suffixes Task objets. Le Xamarin.FormsBook.Platform.WinRT projet contient le

FileHelper

classe pour l’exécution de Windows.

Le Xamarin.FormsBook.Platform.iOS projet contient le FileHelper classe pour iOS. Ces méthodes doivent maintenant être asynchrones. Certaines des méthodes utilisent des versions asynchrones des méthodes définies dans StreamWriter et StreamReader : WriteAsync et ReadToEndAsync . D’autres convertir un résultat pour un Task à l’aide de l’objet le FromResult (méthode). Le Xamarin.FormsBook.Platform.Android projet contient un texte similaire Le Xamarin.FormsBook.Platform projet contient également un DependencyService objet.

FileHelper

FileHelper

classe pour Android.

classe qui facilite l’utilisation de la

Pour utiliser ces bibliothèques, une solution d’application doit inclure tous les projets de la Xamarin.FormsBook.Platform solution et chacun des projets d’application doivent avoir une référence à la bibliothèque correspondante dans Xamarin.FormsBook.Platform. Le TextFileAsync solution montre comment utiliser le Xamarin.FormsBook.Platform bibliothèques. Chacun des projets a un appel à Toolkit.Init . L’application se sert de l’e/s de fichier asynchrone fonctions. En conservant en arrière -plan Méthodes dans les bibliothèques qui effectuent des appels à plusieurs méthodes asynchrones — tels que le

et ReadFileASync méthodes dans le Runtime Windows FileHelper classe — peut être effectuée quelque plus efficace à l’aide de la ConfigureAwait méthode afin d’éviter de basculer vers le thread d’interface utilisateur. WriteFileAsync

Ne pas bloquer le thread d’interface utilisateur ! Parfois, il est tentant afin d’éviter l’utilisation de ContinueWith ou await à l’aide de la Result propriété sur les méthodes. Cela doit être évitée pour qu’il peut bloquer le thread d’interface utilisateur ou même bloquer l’application.

Vos propres méthodes pouvant être attendus Vous pouvez exécuter du code de façon asynchrone en le passant à une de la Task.Run méthodes. Vous pouvez appeler Task.Run au sein d’une méthode async qui gère la partie de la surcharge. Les différents

Task.Run

modèles sont décrits ci-dessous.

L’ensemble de Mandelbrot base Pour dessiner l’ensemble en temps réel, de Mandelbrot le Xamarin.Forms.Toolkit bibliothèque possède un Complex structure similaire à celui de la System.Numerics espace de noms. Le MandelbrotSet exemple comporte un CalculateMandeblotAsync méthode dans son fichier code-behind qui calcule l’ensemble de Mandelbrot base noir et blanc et utilise BmpMaker placer sur une image bitmap. Marquage de progression Pour signaler la progression à partir d’une méthode asynchrone, vous pouvez instancier un Progress classe et de définir votre méthode asynchrone pour avoir un argument de type IProgress . Cela est illustré dans le MandelbrotProgress exemple. Annulation de la tâche Vous pouvez également écrire une méthode asynchrone pour être annulable. Commencer avec une classe nommée CancellationTokenSource . Le Token propriété est une valeur de type CancellationToken . Ces données sont transmises à la fonction asynchrone. Un programme appelle la Cancel méthode de CancellationTokenSource (généralement en réponse à une action de l’utilisateur) pour annuler la fonction asynchrone. La méthode asynchrone peut vérifier périodiquement la IsCancellationRequested propriété du CancellationToken et quitter si la propriété est true , ou simplement appeler le ThrowIfCancellationRequested (méthode), dans auquel cas la méthode se termine par un OperationCancelledException . Le MandelbrotCancellation exemple illustre l’utilisation d’une fonction pouvant être annulée. Un ensemble de Mandelbrot MVVM Le MandelbrotXF exemple a une interface utilisateur plus étendue, et il est principalement basé sur un MandelbrotModel et MandelbrotViewModel classes :

Dans le web Le WebRequest classe utilisée dans certains exemples utilise un ancienne protocole asynchrone appelé modèle de programmation asynchrone ou APM. Vous pouvez convertir une telle classe au protocole TAP modern à l’aide d’un de le FromAsync méthodes dans le TaskFactory classe. Le ApmToTap illustre cela.

Liens connexes Chapitre 20 de texte intégral (PDF ) Chapitre 20 échantillons Utilisation de fichiers

Résumé du chapitre 21. Transformations 08/12/2018 • 11 minutes to read • Edit Online

télécharger l’exemple Xamarin.Forms s’affiche sur l’écran dans un emplacement et une taille déterminée par son parent, qui est généralement un Layout ou Layout dérivé. Le transformer est une fonctionnalité de Xamarin.Forms qui peut modifier cet emplacement, taille ou même l’orientation. Xamarin.Forms prend en charge trois types de transformations : Traduction — déplacer un élément horizontalement ou verticalement Mise à l’échelle — modifier la taille d’un élément Rotation — activer un élément autour d’un point ou d’un axe Dans Xamarin.Forms, la mise à l’échelle est Isotrope ; elle affecte la largeur et la hauteur uniforme. Rotation est pris en charge à la fois sur la surface à deux dimensions de l’écran et dans l’espace 3D. Il existe aucune transformation d’inclinaison (ou élevée) et aucune transformation de matrice généralisée. Transformations sont prises en charge avec huit propriétés de type

double

défini par le

VisualElement

classe :

TranslationX TranslationY Scale Rotation RotationX RotationY AnchorX AnchorY

Toutes ces propriétés sont assorties de propriétés pouvant être liées. Ils peuvent être la cible de liaison de données et un style. Chapitre 22. Animation montre comment ces propriétés peuvent être animées, mais certains exemples de ce chapitre indiquent comment vous pouvez animer à l’aide de Xamarin.Forms minuteur. Transformer les propriétés affectent uniquement la façon dont l’élément est rendu et faire pas affectent la façon dont l’élément est perçu dans mise en page.

La transformation de traduction Des valeurs différentes de zéro de la horizontalement ou verticalement.

TranslationX

et

TranslationY

propriétés déplacer un élément

Le TranslationDemo programme vous permet de faire des essais avec ces propriétés avec deux Slider éléments qui contrôlent la TranslationX et TranslationY propriétés d’un Frame . La transformation affecte également tous les enfants de cet Frame . Effets de texte Une utilisation courante des propriétés de la traduction est pour décaler légèrement le rendu du texte. Cela est illustré dans le TextOffsets exemple :

Un autre effet consiste à rendre plusieurs copies d’un BlockText exemple.

Label

pour ressembler à un bloc 3D, comme illustré dans le

Sauts et animations Le ButtonJump exemple utilise la traduction pour déplacer un Button chaque fois qu’il est activé par un clic, mais son principal objectif est de démontrer que le Button reçoit l’entrée d’utilisateur à l’emplacement où le bouton est restitué. Le ButtonGlide exemple est similaire, mais utilise une horloge pour animer la

Button

d’un point vers un autre.

La transformation d’échelle Le Scale transformation peut augmenter ou diminuer la taille rendue de l’élément. La valeur par défaut est 1. La valeur 0 entraîne l’élément à être invisible. Valeurs négatives, l’élément semblent être pivotée de 180 degrés. Le Scale propriété n’affecte pas la Width ou Height propriétés de l’élément. Ces valeurs restent les mêmes. Vous pouvez expérimenter la

Scale

à l’aide de la propriété le SimpleScaleDemo exemple.

Le ButtonScaler exemple illustre la différence entre l’animation de la Scale propriété d’un Button et animer le FontSize propriété. Le FontSize propriété affecte la Button est perçu dans disposition ; le Scale propriété n’a pas. Le ScaleToSize exemple calcule un Scale propriété qui est appliquée à un grand que possible tout en adaptant toujours au sein de la page.

Label

élément pour le rendre aussi

Ancrage de la mise à l’échelle Les éléments mis à l’échelle dans les trois exemples précédents ont tous les augmenter ou réduire la taille par rapport au centre de l’élément. En d’autres termes, l’élément augmente ou diminue en taille identique dans toutes les directions. Seul le point au centre de l’élément reste dans le même emplacement pendant la mise à l’échelle. Vous pouvez modifier le centre de la mise à l’échelle en définissant le AnchorX et AnchorY propriétés. Ces propriétés sont par rapport à l’élément lui-même. Pour AnchorX , la valeur 0 fait référence à gauche de l’élément et 1 fait référence à la partie droite. De même pour AnchorY , 0 est la partie supérieure et 1 est bas. Les deux propriétés ont des valeurs par défaut de 0.5, qui est le centre. Le AnchoredScaleDemo exemple vous permet de faire des essais avec la que le Scale propriété. Sur iOS, à l’aide de valeurs non défaut de

AnchorX

et

AnchorY

AnchorX

et

AnchorY

propriétés ainsi

propriétés est généralement pas compatible avec

les changements d’orientation de téléphone.

La transformation de rotation Le

propriété est spécifiée en degrés et indique une rotation autour d’un point de l’élément défini par et AnchorY . Le PlaneRotationDemo vous permet de faire des essais avec ces trois propriétés.

Rotation

AnchorX

Effets de texte pivoté Le BoxViewCircle exemple illustre les calculs nécessaires pour dessiner un cercle à l’aide de 64 minuscule paysage BoxView éléments. Le RotatedText exemple affiche plusieurs membres spokes.

Label

éléments avec la même chaîne de texte pivoté apparaît comme

Le CircularText exemple affiche une chaîne de texte qui apparaît à la ligne dans un cercle. Une horloge analogique Le Xamarin.FormsBook.Toolkit bibliothèque contient un AnalogClockViewModel classe qui calcule les angles pour entre les mains d’une horloge. Pour éviter les dépendances de plateforme dans le ViewModel, la classe utilise Task.Delay au lieu d’un minuteur pour rechercher un nouveau DateTime valeur. Également inclus dans Xamarin.FormsBook.Toolkit est un SecondTickConverter classe qui implémente IValueConverter et permet d’arrondir un angle deuxième à la seconde près. Le MinimalBoxViewClock utilise trois rotation

BoxView

éléments pour dessiner une horloge analogique.

Le BoxViewClock utilise BoxView pour les graphiques plus étendues, y compris les graduations marque autour de la face de l’horloge et remet autrement faire pivoter une distance peu à partir de leurs principaux :

En outre un SecondBackEaseConverter classe Xamarin.FormsBook.Toolkit provoque la seconde aiguille apparaisse sur ressortir un peu avant de passer à l’avance, puis à les replacer dans sa position correcte. Curseurs verticales ? Le VerticalSliders exemple montre que Slider éléments peut être pivotées de 90 degrés et fonctionnent toujours. Toutefois, il est difficile de positionner ces paysage Slider éléments, car dans la mise en page ils toujours apparaître à l’horizontale.

Rotations qui concerne 3D

Le RotationX propriété s’affiche pour faire pivoter un élément autour d’un axe des abscisses 3D afin que le haut et le bas de l’élément semblent déplacer vers ou à partir de la visionneuse. De même, le RotationY semble faire pivoter un élément autour de l’axe des ordonnées pour rendre les côtés gauche et droit de l’élément semblent à déplacer vers ou à partir de la visionneuse. Le

propriété affecte RotationY mais pas RotationX . Le AnchorY propriété affecte RotationX mais pas RotationY . Vous pouvez expérimenter la ThreeDeeRotationDemo exemple pour Explorer les interactions de ces propriétés. AnchorX

Le système de coordonnées 3D impliqué par Xamarin.Forms est gaucher. Si vous pointez le pouce de votre main gauche dans la direction de l’augmentation de X coordonnées coordonnées (à droite) et votre doigt intermédiaire dans la direction de croissant Y (points vers le bas), puis votre curseur dans le sens d’augmentation de coordonnées Z (hors de l’écran). En outre, pour tous les trois axes, si vous pointez votre curseur gauche dans la direction de l’augmentation des valeurs, puis la courbe de vos doigts indique la direction de rotation des angles de rotation positives.

Liens connexes Chapitre 21 de texte intégral (PDF ) Exemples de chapitre 21

Résumé du chapitre 22. Animation 08/12/2018 • 16 minutes to read • Edit Online

télécharger l’exemple Vous avez vu que vous pouvez créer vos propres animations à l’aide de la minuterie Xamarin.Forms ou Task.Delay , mais il est généralement plus simple, avec les fonctionnalités d’animation fournies par Xamarin.Forms. Trois classes implémentent ces animations : , l’approche de haut niveau Animation , plus polyvalent, mais il est plus difficile AnimationExtension , le plus polyvalente plus bas niveau approche ViewExtensions

En règle générale, les animations cibler les propriétés qui sont assorties de propriétés pouvant être liées. Cela n’est pas obligatoire, mais ce sont les seules propriétés dynamiquement réagissent aux modifications. Il n’existe aucune interface XAML pour ces animations, mais vous pouvez intégrer des animations dans XAML à l’aide des techniques présentées dans chapitre 23. Déclencheurs et comportements.

Exploration des animations de base Les fonctions d’animation de base sont des méthodes d’extension trouvées dans le ViewExtensions classe. Ces méthodes s’appliquent à n’importe quel objet qui dérive de VisualElement . Les animations de la plus simple ciblent les propriétés décrites dans les transformations Chapter 21. Transforms . Le AnimationTryout montre comment la Clicked Gestionnaire d’événements pour un RotateTo méthode d’extension pour mettre en place le bouton dans un cercle.

Button

peut appeler le

Le RotateTo de la méthode change le Rotation propriété de la Button comprise entre 0 et 360 au cours de la seconde un quart (par défaut). Si le Button l’appui sur là encore, toutefois, elle ne fait rien, car le Rotation propriété est déjà 360 degrés. Définition de la durée de l’animation Le deuxième argument de RotateTo est la durée en millisecondes. Si la valeur est une valeur élevée, en appuyant sur la Button pendant une animation démarre un nouveau commencement d’animation à l’angle actuel. Animations relatives Le RelRotateTo méthode effectue une rotation relative en ajoutant une valeur spécifiée à la valeur existante. Cette méthode permet le Button à drainer plusieurs fois et pour chaque heure augmente la Rotation propriété de 360 degrés. En attente d’animations Toutes les méthodes d’animation dans ViewExtensions retourner Task objets. Cela signifie que vous pouvez définir une série d’animations séquentielles à l’aide de ContinueWith ou await . Le bool achèvement valeur de retour est false si l’animation est terminée sans interruption ou true si elle a été annulée par le CancelAnimation (méthode), ce qui annule toutes les animations initiées par le autre méthode dans ViewExtensions qui sont définies sur le même élément. Animations composite Vous pouvez combiner des animations attendues et non attendu pour créer des animations composites. Voici les animations dans ViewExtensions qui ciblent le TranslationX , TranslationY , et Scale propriétés de

transformation : TranslateTo ScaleTo RelScaleTo

Notez que

TranslateTo

affecte potentiellement tous deux le

TranslationX

et

TranslationY

propriétés.

Task.WhenAll et Task.WhenAny Il est également possible de gérer des animations simultanées à l’aide de Task.WhenAll , ce qui signale lorsque plusieurs tâches tous terminés, et Task.WhenAny , qui signale quand la première de plusieurs tâches a terminé. Rotation et les points d’ancrage Lorsque vous appelez le ScaleTo , RelScaleTo , RotateTo , et RelRotateTo méthodes, vous pouvez définir le AnchorX et AnchorY propriétés pour indiquer le Centre de mise à l’échelle et la rotation. Le CircleButton illustre cette technique par révolution un

Button

autour du centre de la page.

Fonctions d’accélération En règle générale, les animations sont linéaires à partir d’une valeur de début pour une valeur de fin. Fonctions d’accélération peuvent provoquer des animations accélérer ou ralentir leur cours. Le dernier argument facultatif pour les méthodes d’animation est de type Easing , une classe qui définit les 11 en lecture seule les champs statiques de type Easing : , la valeur par défaut SinIn , SinOut , et SinInOut CubicIn , CubicOut , et CubicInOut BounceIn et BounceOut SpringIn et SpringOut Linear

Le In suffixe indique que l’effet se trouve au début de l’animation, au début et à la fin de l’animation.

Out

signifie à la fin, et

InOut

signifie qu’il est

Le BounceButton exemple illustre l’utilisation de fonctions d’accélération. Vos propres fonctions d’accélération Vous pouvez également définir vous propres fonctions d’accélération en passant un Func à la Easing constructeur. Easing définit également une conversion implicite de Func à Easing . L’argument à la fonction d’accélération est toujours dans la plage de 0 à 1 comme l’animation se poursuit de façon linéaire à partir du début à la fin. La fonction généralement retourne une valeur dans la plage de 0 à 1, mais peut être brièvement négatif ou supérieur à 1 (comme c’est le cas avec le SpringIn et SpringOut fonctions) ou endommage les règles si vous savez ce que vous faites. Le UneasyScale exemple illustre une fonction d’accélération personnalisée, et CustomCubicEase montre un autre. Le SwingButton montre également une fonction d’accélération personnalisée et également une technique consistant à changer la AnchorX et AnchorY propriétés au sein d’une séquence d’animations de rotation. Le Xamarin.FormsBook.Toolkit bibliothèque possède un JiggleButton la fonction de classe qui utilise une accélération personnalisée à jiggle un bouton lorsque vous cliquez dessus. Le JiggleButtonDemo illustre cela. Animations d’entrée Un seul type populaires d’animation se produit lorsqu’une page s’affiche tout d’abord. Une animation de ce type peut être démarrée le OnAppearing la substitution de la page. Pour ces animations, de son mieux pour configurer

le XAML de la manière dont la page affichage après l’animation, initialiser et animer la disposition à partir du code. Le FadingEntrance exemple utilise le

FadeTo

méthode d’extension pour le fondu dans le contenu de la page.

Le SlidingEntrance exemple utilise le page sur les côtés.

TranslateTo

méthode d’extension à la diapositive dans le contenu de la

Le SwingingEntrance exemple utilise le RotateYTo méthode d’extension pour animer la RotateXTo méthode est également disponible.

RotationY

propriété. Un

Animations indéfiniment À l’autre extrême, « forever » les animations s’exécutent jusqu'à ce que le programme se termine.Elles sont généralement destinées à des fins de démonstration. Le FadingTextAnimation exemple utilise

FadeTo

animation à deux parties de texte disparaître en fondu.

PalindromeAnimation affiche un palindrome et ensuite séquentiellement fait pivoter les lettres individuelles à 180 degrés afin qu’elles soient toutes envers. Puis la chaîne entière est retournée par 180 degrés pour lire la même que la chaîne d’origine. Le CopterAnimation exemple fait pivoter une simple centre de l’écran.

BoxView

hélicoptère lors de la révolution il autour du

RotatingSpokes tourne BoxView rayons autour du centre de l’écran, puis fait pivoter chaque membre spoke luimême pour créer des modèles intéressants :

Toutefois, augmentant progressivement la Rotation propriété d’un élément peut faillir à long terme, comme le RotationBreakdown montre des exemples. Le SpinningImage exemple utilise RotateTo , image bitmap fait tourner dans l’espace 3D.

RotateXTo

, et

RotateYTo

pour donner l’impression que si une

Animer la propriété bounds La seule méthode d’extension de ViewExtensions pas encore montré est LayoutTo , qui anime efficacement en lecture seule Bounds propriété en appelant le Layout (méthode). Cette méthode est appelée normalement par Layout dérivés que nous aborderons dans chapitre 26. CustomLayouts. Le LayoutTo méthode doit être limitée à des usages spéciaux. Le BouncingBox programme l’utilise pour compresser et décompresser un BoxView comme il rebondit sur les côtés d’une page.

Le XamagonXuzzle exemple utilise LayoutTo pour déplacer des vignettes disponibles dans une implémentation de classique puzzle de 15-16 qui affiche une image brouillée plutôt que les vignettes numérotées :

Vos propres animations pouvant être attendues Le TryAwaitableAnimation exemple crée une animation pouvant être attendue. La classe essentielle qui peut retourner un Task objet à partir de la méthode et le signal lorsque l’animation est terminée est TaskCompletionSource .

Plus profondément dans les animations Le système d’animation Xamarin.Forms peut être un peu déroutant. Outre le Easing (classe), le système d’animation comprend le ViewExtensions , Animation , et AnimationExtension classes. Classe de ViewExtensions Vous avez déjà vu ViewExtensions . Il définit neuf méthodes qui retournent Task et CancelAnimations . Sept de la cible de neuf méthodes propriétés de transformation. Les deux autres sont FadeTo , les cibles le Opacity propriété, et LayoutTo , qui appelle le Layout (méthode). Classe d’animation Le Animation classe a un constructeur avec cinq arguments pour définir le rappel et les méthodes terminés et les paramètres de l’animation. Animations enfants peuvent être ajoutées avec .

Add

,

Insert

L’objet d’animation est ensuite démarré avec un appel à la

,

WithConcurrent

Commit

et la surcharge de

WithConcurrent

(méthode).

Classe de AnimationExtensions Le AnimationExtensions classe contient principalement des méthodes d’extension. Il existe plusieurs versions d’un Animate (méthode) et les génériques Animate méthode est donc polyvalente pour qu’il est vraiment de la fonction d’animation uniquement que vous avez besoin.

Utilisation de la classe d’Animation Le ConcurrentAnimations exemple illustre la

Animation

classe avec plusieurs animations différents.

Animations enfants Le ConcurrentAnimations exemple illustre également l’enfant d’animations qui utilisent le (similaire)

Add

et

Insert

méthodes.

Au-delà des méthodes de haut niveau d’animation Le ConcurrentAnimations exemple montre également comment exécuter des animations qui dépassent les propriétés ciblées par le ViewExtensions méthodes. Dans un exemple, une série de périodes d’obtenir plus de temps ; dans un autre exemple, un BackgroundColor propriété est animée. Plusieurs de vos propres méthodes pouvant être attendus Le TranslateTo méthode de ViewExtensions ne fonctionne pas avec le lorsque la sortie accélération obtient supérieures à 1.

Easing.SpringOut

(fonction). Il s’arrête

Le Xamarin.FormsBook.Toolkit bibliothèque contient un MoreViewExtensions classe avec TranslateXTo et TranslateYTo les méthodes d’extension qui n’ont pas ce problème, ainsi que CancelTranslateXTo et CancelTranslateYTo méthodes d’annulation ceux animations. Le SpringSlidingEntrance montre le

TranslateXTo

Le MoreExtensions classe contient également un X et Y, et un CancelTranslateXYTo (méthode).

(méthode).

TranslateXYTo

méthode d’extension qui combine la traduction de

Implémentation d’une animation de Bézier Il est également possible de développer une animation qui déplace un élément le long du tracé d’une spline de Bézier. Le Xamarin.FormsBook.Toolkit bibliothèque contient un BezierSpline structure qui encapsule une spline de Bézier et un BezierTangent énumération pour contrôler l’orientation. Le MoreViewExtensions classe contient un (méthode).

BezierPathTo

méthode d’extension et un

CancelBezierPathTo

Le BezierLoop exemple illustre l’animation d’un élément le long d’un chemin d’accès Beizer.

Utilisation de AnimationExtensions Un seul type d’animation manquant à partir de la collection standard est une animation de couleur. Le problème est qu’il n’existe aucun moyen de droite pour interpoler entre deux Color valeurs. Il est possible d’interpoler les valeurs RVB individuelles, mais simplement comme étant valides interpoler les valeurs TSL. Pour cette raison, le MoreViewExtensions classe dans le Xamarin.FormsBook.Toolkit bibliothèque contient deux Color méthodes d’animation : RgbColorAnimation et HslColorAnimation . ( Il existe également deux méthodes d’annulation : CancelRgbColorAnimation et CancelHslColorAnimation ). Les deux méthodes utilisent ColorAnimation , qui effectue l’animation en appelant le générique étendu méthode dans AnimationExtensions .

Animate

Le ColorAnimations exemple illustre l’utilisation de ces deux types d’animations de couleur.

Structuration de vos animations Il est parfois utile exprimer des animations dans XAML et les utiliser conjointement avec MVVM. Cela est couvert dans le chapitre suivant, chapitre 23. Déclencheurs et comportements.

Liens connexes Chapitre 22 de texte intégral (PDF ) Exemples de chapitre 22 Animation

Résumé du chapitre 23. Déclencheurs et comportements 08/12/2018 • 15 minutes to read • Edit Online

télécharger l’exemple Déclencheurs et comportements sont similaires, car ils sont tous les deux destinés à être utilisé dans les fichiers XAML pour simplifier les interactions d’élément au-delà de l’utilisation des liaisons de données et pour étendre les fonctionnalités des éléments XAML. Déclencheurs et comportements sont presque toujours utilisés avec les objets d’interface utilisateur visual. Pour prendre en charge les déclencheurs et les comportements, les deux charge les deux propriétés de collection :

VisualElement

et

Style

prennent en

et Style.Triggers de type IList VisualElement.Behaviors et Style.Behaviors de type IList VisualElement.Triggers

Déclencheurs Un déclencheur est une condition (une modification de propriété ou le déclenchement d’un événement) qui génère une réponse (un autre changement de propriété ou en cours d’exécution du code). Le Triggers propriété du VisualElement et Style est de type IList . TriggerBase est une classe abstraite dont dérivent les classes sealed quatre : pour les réponses en fonction des modifications de propriété EventTrigger pour les réponses en fonction de déclenchement d’événement DataTrigger pour les réponses en fonction des liaisons de données MultiTrigger pour les réponses selon plusieurs déclencheurs Trigger

Le déclencheur est toujours défini sur l’élément dont la propriété est en cours de modification par le déclencheur. Le déclencheur de la plus simple Le Trigger recherche un changement d’une valeur de propriété de classe et répond en définissant une autre propriété du même élément. Trigger

définit trois propriétés :

de type BindableProperty Value de type Object Setters de type IList , la propriété de contenu de Property

En outre,

Trigger

TargetType

Le

nécessite que la propriété suivante héritée

pour indiquer le type de l’élément sur lequel le

Trigger

TriggerBase Trigger

être définies :

est attaché

et Value constituent la condition et le Setters collection est la réponse. Lorsque l’indiquée Property a la valeur indiquée par Value , le Setter des objets dans le Setters collection sont appliquées. Lorsque le Property a une valeur différente, les accesseurs Set sont supprimés. Setter définit deux propriétés qui sont les mêmes que les deux premières propriétés de Trigger : Property

Property

de type

BindableProperty

Value

de type

Object

Le EntryPop exemple montre comment un Trigger appliqué à un Entry peut augmenter la taille de la via la Scale propriété lorsque la IsFocused propriété de la Entry est true . Bien qu’il n’est pas courant, la exemples.

Trigger

Entry

peut être défini dans le code, comme le EntryPopCode montre des

Le StyledTriggers exemple montre comment la plusieurs Entry éléments.

Trigger

peuvent être définies dans un

Style

à appliquer à

Déclencher des actions et les animations Il est également possible d’exécuter un peu de code basé sur un déclencheur.Ce code peut être une animation qui cible une propriété. Une façon courante consiste à utiliser un EventTrigger , qui définit deux propriétés : de type string , le nom d’un événement Actions de type IList , une liste d’actions à exécuter en réponse. Event

Pour l’utiliser, vous devez écrire une classe qui dérive de TriggerAction , généralement TriggerAction . Vous pouvez définir les propriétés de cette classe. Il s’agit des propriétés CLR normales plutôt que des propriétés pouvant être liées, car TriggerAction ne dérive pas de BindableObject . Vous devez substituer la Invoke méthode est appelée lorsque l’action est appelée. L’argument est l’élément cible. Le ScaleAction classe dans le Xamarin.FormsBook.Toolkit bibliothèque est un exemple. Il appelle le ScaleTo propriété à animer le Scale propriété d’un élément. Étant donné qu’un de ses propriétés est de type Easing , le EasingConverter classe vous permet d’utiliser la norme Easing champs statiques dans XAML. Le EntrySwell exemple montre comment appeler le Focused et Unfocused événements.

ScaleAction

à partir de

EventTrigger

objets qui surveille le

Le CustomEasingSwell exemple montre comment définir une fonction d’accélération personnalisée pour ScaleAction dans un fichier code-behind. Vous pouvez également appeler des actions à l’aide un Trigger (distinguished de que vous êtes conscient que TriggerBase définit deux collections : EnterActions ExitActions

EventTrigger

). Cela nécessite

de type IList de type IList

Le EnterExitSwell exemple montre comment utiliser ces collections. Plusieurs déclencheurs d’événements Le ScaleUpAndDownAction classe dans le Xamarin.FormsBook.Toolkit appels à des bibliothèques ScaleTo à deux reprises pour descendre en puissance. Le ButtonGrowth utilise cela dans un style EventTrigger pour fournir des commentaires visuels lorsqu’un Button est enfoncé. Cette animation double est également possible à l’aide de deux actions dans la collection de type DelayedScaleAction Le ShiverAction classe dans le Xamarin.FormsBook.Toolkit bibliothèque définit une action shiver personnalisable. Le ShiverButtonDemo illustre cela. Le NumericValidationAction classe dans le Xamarin.FormsBook.Toolkit bibliothèque est limitée à éléments et des jeux le TextColor propriété if rouge le Text propriété n’est pas un double . Le TriggerEntryValidation illustre cela.

Entry

Déclencheurs de données Le DataTrigger est similaire à la Trigger , sauf qu’au lieu de la surveillance d’une propriété pour les modifications de valeur, il surveille une liaison de données. Ainsi, une propriété dans un seul élément pour affecter

une propriété dans un autre élément. DataTrigger

définit trois propriétés :

de type BindingBase Value de type Object Setters de type IList Binding

Le GenderColors exemple requiert le SchoolOfFineArt bibliothèque et définit les couleurs des noms des étudiants en bleu ou rose selon le Sex propriété :

Le ButtonEnabler exemples de jeux le IsEnabled propriété d’un Entry à False si le Length propriété de la Text propriété de la Entry est égal à 0. Notez que le Text propriété est initialisée avec une chaîne vide ; par défaut, il est null et le DataTrigger ne fonctionnent pas correctement. Combinaison de conditions dans le MultiTrigger Le MultiTrigger est une collection de conditions. Lorsqu’ils sont tous les appliquées. La classe définit deux propriétés :

true

, puis les accesseurs Set est

de type IList de type IList

Conditions Setters Condition

est une classe abstraite et dispose de deux classes descendants :

, qui a Property et Value propriétés telles que Trigger BindingCondition , qui a Binding et Value propriétés telles que DataTrigger PropertyCondition

Dans le conditionsd exemple, un activés.

BoxView

est coloré uniquement lorsqu’il y a quatre

Switch

éléments sont tous

Le OrConditions exemple montre comment vous pouvez effectuer un BoxView une couleur lorsque n’importe quel de quatre Switch éléments sont sous tension. Cela nécessite une application de la loi de Morgan à l’Allemagne et en inversant toute la logique. Combinaison de AND et ou logique n’est pas si facile et nécessite généralement invisible Switch éléments des résultats intermédiaires. Le XorConditions exemple montre comment un Button peut être activée si une de deux Entry éléments ont du texte tapé, mais pas s’ils ont tous deux du texte tapé dans.

comportements Tout ce que vous pouvez faire avec un déclencheur, vous pouvez également faire avec un comportement, mais les comportements nécessitent toujours une classe qui dérive de Behavior et remplace les deux méthodes suivantes : OnAttachedTo OnDetachingFrom

L’argument est l’élément auquel le comportement est associé à. En règle générale, le OnAttachedTo méthode attache des gestionnaires d’événements, et OnDetachingFrom détache les. Étant donné qu’une telle classe enregistre généralement un état, il généralement ne peut pas être partagé dans un Style . BehaviorEntryValidation exemple est similaire à TriggerEntryValidation sauf qu’elle utilise un comportement — le NumericValidationBehavior classe dans le Xamarin.FormsBook.Toolkit bibliothèque. Comportements avec des propriétés Behavior dérive de Behavior , qui dérive à son BindableObject , de sorte que les propriétés pouvant être liées peuvent être définies sur un comportement. Ces propriétés peuvent être actives dans les liaisons de données. Cela est illustré dans le EmailValidationDemo programme et qui utilisent le ValidEmailBehavior classe dans le Xamarin.FormsBook.Toolkit bibliothèque. ValidEmailBehavior a une propriété en lecture seule et sert de source dans les liaisons de données. Le EmailValidationConv exemple utilise ce même comportement pour afficher un autre type d’indicateur pour signaler qu’une adresse de messagerie est valide. Le EmailValidationTrigger exemple est une variante de l’exemple précédent. ButtonGlide utilise un en association avec ce comportement.

DataTrigger

Active/désactive et les cases à cocher Il est possible d’encapsuler le comportement d’un bouton bascule dans une classe comme ToggleBehavior dans le Xamarin.FormsBook.Toolkit bibliothèque, puis définissez toutes les les éléments visuels pour le bouton bascule entièrement dans XAML. Le ToggleLabel exemple utilise le texte pour le bouton bascule.

ToggleBehavior

avec un

DataTrigger

à utiliser un

Le FormattedTextToggle exemple étend ce concept en basculant entre deux Le

Label

avec deux chaînes de

FormattedString

objets.

classe dans le Xamarin.FormsBook.Toolkit dérive de la bibliothèque ContentView , définit un IsToggled propriété et incorpore un ToggleBehavior pour le bouton bascule logique. Cela rend plus facile de définir le bouton bascule dans XAML, comme illustré par la TraditionalCheckBox exemple. ToggleBase

Le SwitchCloneDemo inclut un SwitchClone classe qui dérive de ToggleBase et utilise un classe pour construire un bouton bascule qui ressemble à la Xamarin.Forms Switch .

TranslateAction

Un RotateAction dans le Xamarin.FormsBook.Toolkit fournit une animation utilisée pour effectuer un levier animé dans la LeverToggle exemple. Réponse aux clics L’inconvénient de EventTrigger est que vous ne pouvez pas attacher un TapGestureRecognizer pour répondre aux clics. Pour contourner ce problème est l’objectif de TapBehavior dans le Xamarin.FormsBook.Toolkit Le BoxViewTapShiver exemple utilise éléments.

TapBehavior

à utiliser l’ancien

ShiverAction

pour l’appui sur

BoxView

Le ShiverViews exemple montre comment réduire le balisage en encapsulant un Cases d’option Le Xamarin.FormsBook.Toolkit bibliothèque possède également un cases d’option qui sont regroupées par un string nom du groupe.

ShiverView

RadioBehavior

classe.

classe pour effectuer des

Le RadioLabels programme utilise des chaînes de texte de sa case. Le RadioStyle exemple utilise un Style pour la différence d’aspect entre les boutons checked et unchecked. Le RadioImages exemple utilise des images boxed pour ses boutons radio :

Le TraditionalRadios exemple dessine traditionnel boutons radio qui apparaît avec un point à l’intérieur d’un cercle. Effectuer des fondus et l’orientation L’exemple final, MultiColorSliders vous permet de basculer entre trois modes de sélection de couleur différente à l’aide de cases d’option. Les trois vues de fondu et arrière à l’aide un FadeEnableAction dans le Xamarin.FormsBook.Toolkit bibliothèque. Le programme répond également aux modifications de l’orientation portrait ou paysage à l’aide un GridOrientationBehavior dans le Xamarin.FormsBook.Toolkit bibliothèque.

Liens connexes Chapitre 23 de texte intégral (PDF ) Exemples de chapitre 23 Utilisation des déclencheurs Comportements de Xamarin.Forms

Résumé du chapitre 24. Navigation entre les pages 08/12/2018 • 18 minutes to read • Edit Online

télécharger l’exemple De nombreuses applications sont constituées de plusieurs pages parmi lesquels l’utilisateur navigue. L’application always a un principal page ou domestique page, et à partir de là, l’utilisateur navigue vers d’autres pages, qui sont conservées dans une pile de navigation vers l’arrière. Options de navigation supplémentaires sont couverts dans chapitre 25. Page variétés.

Pages modales et non modales définit un Navigation propriété de type accéder à une nouvelle page : VisualElement

INavigation

, qui inclut les deux méthodes suivantes pour

PushAsync PushModalAsync

Les deux méthodes acceptent une Page instance en tant qu’argument et retournent un méthodes suivantes accédez à la page précédente :

Task

objet. Les deux

PopAsync PopModalAsync

Si l’interface utilisateur possède son propre retour bouton (comme les téléphones Android et Windows), il n’est pas nécessaire pour l’application d’appeler ces méthodes. Bien que ces méthodes sont disponibles à partir d’un Navigation propriété du courant Page instance.

VisualElement

, elles sont généralement appelées à partir la

Les applications utilisent généralement des pages modales quand l’utilisateur est requis pour fournir des informations sur la page avant de retourner à la page précédente. Les pages qui ne sont pas modales sont parfois appelés non modales ou hiérarchique. Rien dans la page elle-même distingue en tant que modale ou non modale ; Il est soumise à la place la méthode utilisée pour naviguer jusqu'à lui. Pour fonctionner sur toutes les plateformes, une page modale doit fournir sa propre interface utilisateur pour revenir à la page précédente. Le ModelessAndModal exemple vous permet d’Explorer la différence entre les pages non modales et modales. Toute application qui utilise la navigation entre les pages doive passer sa page d’accueil pour le NavigationPage constructeur, généralement dans le programme App classe. Un bonus est que vous n’avez plus besoin de définir un Padding sur la page pour iOS. Vous découvrirez que pour les non modales pages, la page Title propriété s’affiche. IOS, Android et les plateformes de tablette et bureau Windows fournissent un élément d’interface utilisateur pour revenir à la page précédente. Des cours, Android et Windows, les téléphones ont une norme retour bouton revenir en arrière. Pour les pages modales, la page Title n’est pas affichée, et aucun élément d’interface utilisateur n’est fournie pour revenir à la page précédente. Bien que vous pouvez utiliser la norme de téléphone Android et Windows retour bouton pour revenir à la page précédente, la page modale sur d’autres plateformes doit fournir son propre mécanisme pour revenir en arrière. Transitions de page animés Autres versions des différentes méthodes de navigation sont fournies avec un deuxième argument booléen que

vous définissez pour

true

si vous souhaitez que la transition de page à inclure une animation :

PushAsync PushModalAsync PopAsync PopModalAsync Toutefois, les méthodes de navigation de page standard incluent l’animation par défaut, afin qu’ils soient uniquement un outil précieux pour la navigation vers une page particulière au démarrage (comme indiqué à la fin de ce chapitre) ou lorsque vous fournissez votre propre animation d’entrée (comme indiqué dans Chapter22. Animation). Variations de visuels et fonctionnelles NavigationPage inclut deux propriétés que vous pouvez définir lorsque vous instanciez la classe dans votre méthode :

App

BarBackgroundColor BarTextColor

inclut également les quatre propriétés jointes pouvant être liées qui affectent la page spécifique sur lequel elles sont définies : NavigationPage

SetHasBackButton

et

GetHasBackButton

et GetHasNavigationBar SetBackButtonTitle et GetBackButtonTitle Professionnel sur iOS uniquement SetTitleIcon et GetTitleIcon Professionnel sur iOS et Android uniquement SetHasNavigationBar

Explorer la mécanique Les méthodes de navigation de page sont toutes asynchrones et doit être utilisés avec await . La saisie semiautomatique n’indique pas que navigation entre les pages est terminée, mais uniquement qu’il est sécurisé examiner la pile de navigation entre les pages. Lorsqu’une page accède à un autre, la première page obtienne généralement un appel à son OnDisappearing (méthode) et la deuxième page reçoit un appel à son OnAppearing (méthode). De même, quand une page est retournée à l’autre, la première page reçoit un appel à son OnDisappearing (méthode) et la deuxième page obtient généralement un appel à son OnAppearing (méthode). L’ordre de ces appels (et l’achèvement des méthodes asynchrones qui appelle le volet de navigation) est dépendant de la plate-forme. L’utilisation du mot « généralement » dans les deux instructions ci-dessus est en raison de la navigation modale-page Android, dans lequel ces appels de méthode ne se produisent. En outre, les appels à la entre les pages. Le

INavigation

OnAppearing

et

OnDisappearing

méthodes n’indiquent pas nécessairement navigation

interface inclut deux propriétés de collection qui vous permettent d’examiner la pile de navigation : de type IReadOnlyList pour la pile non modale de type IReadOnlyList pour la pile modale

NavigationStack ModalStack

Il est plus sûr d’accéder à ces piles à partir de la Navigation propriété de la NavigationPage (qui doit être le App la classe MainPage propriété). Il n’est plus sûr examiner ces piles une fois que les méthodes de navigation de page asynchrone est terminé. Le CurrentPage propriété de la NavigationPage n’indique pas la page actuelle si la page actuelle est une page modale, mais indique à la place la dernière page non modale. Le SinglePageNavigation exemple vous permet d’Explorer la navigation entre les pages et les piles et les types juridiques de navigation de page :

Une page non modale peut naviguer vers une autre page non modale ou une page modale Une page modale peut uniquement naviguer vers une autre page modale En appliquant la modalité Une application utilise une page modale lorsqu’il est nécessaire obtenir des informations à partir de l’utilisateur. L’utilisateur doit être interdit de retourner à la page précédente jusqu'à ce que cette information est fournie. Sur iOS, il est facile de fournir un retour bouton et activez-la uniquement lorsque l’utilisateur a fini avec la page. Mais pour les appareils Android et Windows phone, l’application doit remplacer le OnBackButtonPressed méthode et retournez true si le programme a géré le retour bouton lui-même, comme illustré dans le ModalEnforcement exemple. Le MvvmEnforcement exemple illustre comment cela fonctionne dans un scénario MVVM.

Variations de navigation Si une page modale particulier peut être accédée à plusieurs fois, il doit conserver les informations afin que l’utilisateur peut modifier les informations au lieu de taper tous dans une nouvelle fois. Vous pouvez le gérer en conservant l’instance particulière de la page modale, mais une meilleure approche (en particulier sur iOS ) conserve les informations contenues dans un modèle de vue. Rendre un menu de navigation Le ViewGalleryType exemple montre comment utiliser un TableView pour répertorier les éléments de menu. Chaque élément est associé un Type objet pour une page particulière. Lorsque cet élément est sélectionné, le programme instancie la page et navigue vers elle.

Le ViewGalleryInst exemple est un peu différente car le menu contient des instances de chaque page plutôt que des types. Cela permet de conserver les informations à partir de chaque page, mais toutes les pages doivent être instanciés au démarrage du programme. Manipulation de la pile de navigation StackManipulation montre plusieurs fonctions définies par pile de navigation de manière structurée :

INavigation

RemovePage InsertPageBefore PopToRootAsync

et

PopToRootAsync

Génération de page dynamique

avec animation facultative

qui vous permettent de manipuler la

Le BuildAPage exemple illustre la construction d’une page lors de l’exécution en fonction de l’entrée d’utilisateur.

Modèles de transfert de données Il est souvent nécessaire de partager des données entre les pages — pour transférer des données vers une page de navigation et d’une page retourner des données à la page qui l’a appelée. Il existe plusieurs techniques permettant de le faire. Arguments de constructeur Lors de la navigation vers une nouvelle page, il est possible d’instancier la classe de page avec un argument de constructeur qui permet à la page pour s’initialiser. Le SchoolAndStudents illustre cela. Il est également possible d’avoir une page naviguée son BindingContext définie par la page qui navigue vers elle. Propriétés et appels de méthode Les autres exemples de transfert de données d’Explorer le problème de passer des informations entre les pages quand une page navigue vers une autre page et inversement. Dans ces discussions, les domestique page accède à la info page et doit transférer des informations initialisées à la info page. Le info page obtient des informations supplémentaires à partir de l’utilisateur et transfère les informations à la domestique page. Le domestique page permettre accéder facilement aux méthodes publiques et les propriétés dans le info page dès qu’il instancie cette page. Le info page permettre également accéder aux méthodes publiques et les propriétés dans le domestique page, mais que le choix d’un bon moment pour Ceci peut être difficile. Le DateTransfer1 exemple fait cela dans son OnDisappearing remplacer. L’inconvénient est que le info page doit connaître le type de la domestique page. MessagingCenter Xamarin.Forms MessagingCenter classe fournit une autre façon pour les deux pages communiquer entre eux. Les messages sont identifiés par une chaîne de texte et peuvent être accompagnés de n’importe quel objet. Un programme qui souhaite recevoir des messages à partir d’un type particulier doit s’abonner à eux à l’aide de MessagingCenter.Subscribe et spécifier une fonction de rappel. Plus tard, il peut se désabonner en appelant MessagingCenter.Unsubscribe . La fonction de rappel reçoit tout message envoyé à partir du type spécifié avec le nom spécifié est envoyé via le Send (méthode). Le DateTransfer2 programme montre comment transférer des données à l’aide du centre de messagerie, mais là encore, ceci nécessite que le info page connaître le type de la accueil page. Événements L’événement est une approche précieuses pour une classe envoyer des informations à une autre classe sans connaître les type de cette classe. Dans le DateTransfer3 exemple le info classe définit un événement qu’il se déclenche lorsque les informations sont prêtes. Toutefois, il n’existe aucun emplacement pratique où les le domestique page pour détacher le Gestionnaire d’événements. L’intermédiaire de la classe application Le DateTransfer4 exemple montre comment accéder aux propriétés définies dans le App classe à la fois par le domestique page et le infopage. Il s’agit d’une bonne solution, mais la section suivante décrit une meilleure solution. Passage à un ViewModel À l’aide d’un ViewModel pour les informations permettant la domestique page et le info page à partager l’instance de la classe d’informations. Cela est illustré dans le DateTransfer5 exemple. Enregistrement et restauration de l’état de la page Le App intermédiaire de la classe ou l’approche ViewModel est idéale lors de l’application doit enregistrer vos informations si le programme se met en veille pendant que le info page est active. Le DateTransfer6 illustre cela.

Enregistrement et restauration de la pile de navigation En règle générale, un programme de plusieurs pages qui se met en veille doit accéder à la même page lorsqu’elle est restaurée. Cela signifie qu’un tel programme doit enregistrer le contenu de la pile de navigation. Cette section montre comment automatiser ce processus dans une classe conçue à cet effet. Cette classe appelle également les pages individuelles pour les autoriser à enregistrer et restaurer leur état de la page. Le Xamarin.FormsBook.Toolkit bibliothèque définit une interface nommée IPersistantPage que les classes peuvent implémenter pour enregistrer et restaurer des éléments dans le Properties dictionnaire. Le MultiPageRestorableApp classe dans le Xamarin.FormsBook.Toolkit dérive de la bibliothèque Application . Vous pouvez ensuite dériver votre App classe MultiPageRestorableApp et effectuer un peu de ménage. Le StackRestoreDemo illustre l’utilisation de

MultiPageRestorableApp

.

Quelque chose comme une application de la vie réelle Le NoteTaker exemple utilise également MultiPageRestorableApp , tout en permettant à l’entrer et de modifier des notes qui sont enregistrés dans le Properties dictionnaire.

Liens connexes Chapitre 24 de texte intégral (PDF ) Exemples de chapitre 24 Navigation hiérarchique Pages modales

Résumé du chapitre 25. Types de page 08/12/2018 • 8 minutes to read • Edit Online

télécharger l’exemple Jusqu'à présent, vous avez vu deux classes qui dérivent de présente deux autres :

et

NavigationPage

Ces types de page fournissent les options de navigation plus sophistiquées que la chapitre 24. Navigation entre les pages.

NavagationPage

Page

:

ContentPage

. Ce chapitre

gère les deux pages, un serveur maître et un détail gère plusieurs pages enfants accédés via les onglets

MasterDetailPage TabbedPage

abordés dans

Maître / détail Le MasterDetailPage définit deux propriétés de type Page : Master et Detail . En règle générale, vous définissez chacune de ces propriétés pour un ContentPage . Le MasterDetailPage affiche et permet de basculer entre ces deux pages. Il existe deux méthodes fondamentales pour basculer entre ces deux pages : Fractionner où maître et détail sont côte à côte menu où la page de détails couvre ou couvre partiellement le contrôleur de page Il existe plusieurs variantes de la menu approche (diapositive, se chevauchent, et échange), mais il s’agit généralement de plateforme dépendants. Vous pouvez définir le MasterDetailBehavior propriété du MasterDetailPage à un membre de la MasterBehavior énumération : Default Split SplitOnLandscape SplitOnPortrait Popover

Toutefois, cette propriété n’a aucun effet sur les téléphones. Les téléphones ont toujours un comportement de menu. Seuls les tablettes et les postes de travail windows peuvent avoir un comportement de fractionnement. Analyse des comportements Le MasterDetailBehaviors exemple vous permet de faire des essais avec le comportement par défaut sur différents appareils. Le programme contient deux distinct ContentPage dérivés pour maître et détail (avec un Title propriété définie sur les deux) et une autre classe qui dérive de MasterDetailPage qui combine les. La page de détails est placée dans un NavigationPage , car le programme UWP ne fonctionnerait pas sans lui. Les plateformes Windows 8.1 et Windows Phone 8.1 exigent qu’une image bitmap soit définie sur le propriété de la page maître.

Icon

Retour à l’école Le SchoolAndDetail exemple adopte une approche un peu différente à construire le programme affiche les étudiants à partir de la SchoolOfFineArt bibliothèque. Le

Master

et

Detail

propriétés sont définies avec des arborescences d’éléments visuels dans le

SchoolAndDetailPage.xaml fichier, qui dérive de entre les pages maître et détail.

MasterDetailPage

. Ceci permet des liaisons de données à définir

Que les fichiers XAML définit également la IsPresented propriété du MasterDetailPage à True . Cela entraîne la page maître à afficher au démarrage. par défaut, la page de détails s’affiche. Le SchoolAndDetailPage.xaml.cs fichier définit IsPresented à false lorsqu’un élément est sélectionné à partir de la ListView dans la page maître. La page de détails s’affiche ensuite :

Votre propre interface utilisateur Bien que Xamarin.Forms fournit une interface utilisateur pour basculer entre les vues maître et détail, vous pouvez fournir votre propre. Pour ce faire : Définir le IsGestureEnabled propriété false pour désactiver le balayage Remplacer le ShouldShowToolbarButton méthode et retournez false pour masquer les boutons de barre d’outils de Windows 8.1 et Windows Phone 8.1. Vous devez ensuite fournir un moyen de basculer entre les pages maître et détail, comme illustré par la ColorsDetail exemple. Le MasterDetailTaps exemple montre comment utiliser une autre approche un pages maître et détail.

TapGestureRecognizer

sur les

TabbedPage Le TabbedPage est une collection de pages que vous pouvez passer à l’aide des onglets. Il dérive MultiPage et ne définit aucun propriétés ou méthodes publiques qui lui sont propres. MultiPage , toutefois, définit une propriété : Children

propriété de type

Vous renseignez ceci

Children

IList

collection avec des objets de la page.

Une autre approche vous permet de définir le TabbedPage enfants fonctionne comme un deux propriétés qui génèrent automatiquement des pages à onglets :

ListView

à l’aide de ces

de type IEnumerable ItemTemplate de type DataTemplate ItemsSource

Toutefois, cette approche ne fonctionne pas correctement sur iOS lors de la collection contient plusieurs éléments.

MultiPage

définit les propriétés vous permettent d’effectuer le suivi de page qui est actuellement affichée :

de type T , qui fait référence à la page SelectedItem de type Object , qui fait référence à l’objet dans le CurrentPage

MultiPage

ItemsSource

collection

définit également deux événements :

Lorsque le ItemsSource modifications de la collection CurrentPageChanged Lorsque la page affichée change PagesChanged

Pages d’onglets discrètes Le DiscreteTabbedColors exemple se compose de trois pages à onglets qui affichent les couleurs de trois façons différentes. Chaque onglet est un ContentPage dérivé, puis le TabbedPage dérivé DiscreteTabbedColorsPage.xaml combine les trois pages. Pour chaque page qui s’affiche dans un TabbedPage , le Title propriété est requise pour spécifier le texte dans l’onglet, et le Store d’Apple nécessite qu’une icône également être utilisé, par conséquent, le Icon propriété est définie pour iOS :

Le StudentNotes exemple comporte une page d’accueil qui répertorie tous les étudiants. Lors de l’appui sur un étudiant, il accède à un TabbedPage dérivé, StudentNotesDataPage , qui intègre trois ContentPage objets dans son arborescence d’éléments visuels, un d'entre eux permet d’entrer des remarques pour que les élèves. À l’aide d’un modèle ItemTemplate Le MultiTabbedColor exemple utilise le NamedColor classe dans le Xamarin.FormsBook.Toolkit bibliothèque. Le MultiTabbedColorsPage.xaml fichier définit les DataTemplate propriété de TabbedPage vers un début de l’arborescence d’éléments visuels avec ContentPage qui contient des liaisons aux propriétés de NamedColor (y compris une liaison à la Title propriété). Toutefois, cela peut être problématique sur iOS. Quelques-uns des éléments peuvent être affichées, et il n’existe aucun bon moyen de leur donner des icônes.

Liens connexes Chapitre 25 de texte intégral (PDF ) Exemples du chapitre 25 Page maître / détails Page à onglets

Résumé du chapitre 26. Dispositions personnalisées 08/12/2018 • 15 minutes to read • Edit Online

télécharger l’exemple Xamarin.Forms inclut plusieurs classes dérivées de StackLayout Grid

Layout

:

,

, et

AbsoluteLayout RelativeLayout

.

Ce chapitre explique comment créer vos propres classes qui dérivent de

Layout

.

Une vue d’ensemble de mise en page Il n’existe aucun système centralisé qui gère la disposition de Xamarin.Forms. Chaque élément est chargé de déterminer ce que sa taille doit être et comment effectuer le rendu de lui-même au sein d’une zone particulière. Parents et enfants Chaque élément qui a des enfants est chargé pour le positionnement de ces enfants à l’intérieur de lui-même. Il est le parent qui détermine la taille adaptée à ses enfants doit être basé sur la taille, il propose disponible et la taille de l’enfant souhaite être. Dimensionnement et de positionnement Disposition commence en haut de l’arborescence d’éléments visuels avec la page et se poursuit dans toutes les branches. La méthode la plus importante publique dans la disposition est Layout défini par VisualElement . Chaque élément est parent d’autres appels éléments Layout pour chacun de ses enfants à donner à l’enfant, une taille et la position par rapport à lui-même sous la forme d’un Rectangle valeur. Ces Layout propagent des appels dans l’arborescence visuelle. Un appel à Layout est requis pour un élément à l’écran et les propriétés en lecture seule suivantes à définir. Elles sont cohérentes avec le Rectangle transmis à la méthode : de type Rectangle X de type double Y de type double Width de type double Height de type double Bounds

Avant la

Layout

Un appel à

appeler,

Layout

Height

et

Width

comportent des valeurs fictifs –1.

déclenche également des appels aux méthodes protégées suivantes :

, qui appelle OnSizeAllocated , qui peut être substitué. SizeAllocated

Enfin, l’événement suivant sont déclenché : SizeChanged

Le OnSizeAllocated méthode est substituée par Page et Layout , qui sont les seules deux classes dans Xamarin.Forms qui peut avoir des enfants. Les appels de méthode substituée UpdateChildrenLayout

pour

pour

Page

LayoutChildren

dérivés et UpdateChildrenLayout pour Layout dérivés, qui appelle dérivés et LayoutChildren pour Layout dérivés. Page

appelle ensuite Layout pour chacun des enfants de l’élément. Si au moins un enfant dispose d’un nouveau Bounds définition, puis l’événement suivant sont déclenché : LayoutChildren

LayoutChanged

pour

Page

dérivés et

LayoutChanged

pour

Layout

dérivés

Contraintes et des demandes de taille Pour LayoutChildren intelligemment appeler Layout sur tous ses enfants, il doit connaître un préféré ou souhaitée taille pour les enfants. Par conséquent, les appels à Layout pour chacun des enfants sont généralement précédé par des appels à GetSizeRequest

Une fois que le livre a été publié, le

GetSizeRequest

méthode a été déconseillée et remplacée par

Measure

Le Measure méthode prend en compte la deux membres :

Margin

propriété et comprend un argument de type

MeasureFlag

, qui a

IncludeMargins None

Pour ne pas inclure les marges

Pour de nombreux éléments, GetSizeRequest ou Measure Obtient la taille native de l’élément à partir de son convertisseur. Les deux méthodes ont des paramètres pour la largeur et la hauteur contraintes. Par exemple, un Label utilisera la contrainte de largeur pour déterminer comment encapsuler plusieurs lignes de texte. Les deux

GetSizeRequest

Request Minimum

de type de type

et

Measure

retournent une valeur de type

, qui a deux propriétés :

Size Size

Très souvent ces deux valeurs sont identiques et le

Minimum

valeur peut généralement être ignorée.

définit également une méthode protégée similaire à GetSizeRequest : VisualElement

OnSizeRequest

SizeRequest

Retourne un

SizeRequest

GetSizeRequest

qui est appelée à partir de

valeur

Cette méthode est maintenant déconseillée et remplacée par : OnMeasure

Chaque classe qui dérive de Layout ou Layout doit substituer OnSizeRequest ou OnMeasure . Il s’agit d’où une classe de disposition détermine sa propre taille, qui est généralement basé sur la taille de ses enfants, il obtient en appelant GetSizeRequest ou Measure sur les enfants. Avant et après l’appel OnSizeRequest ou OnMeasure , GetSizeRequest ou Measure apporte des ajustements basés sur les propriétés suivantes : de type double , affecte le Request propriété de SizeRequest HeightRequest de type double , affecte le Request propriété de SizeRequest MinimumWidthRequest de type double , affecte le Minimum propriété de SizeRequest MinimumHeightRequest de type double , affecte le Minimum propriété de SizeRequest WidthRequest

Contraintes infinies Les arguments de contrainte passés à GetSizeRequest (ou Measure ) et OnSizeRequest (ou OnMeasure ) peut être infinie (par exemple, les valeurs de Double.PositiveInfinity ). Toutefois, le SizeRequest retourné à partir de ces méthodes ne peuvent pas contenir des dimensions infinies. Contraintes infinies indiquent que la taille demandée doit refléter la taille naturelle de l’élément. Un vertical StackLayout appels GetSizeRequest (ou Measure ) sur ses enfants, avec une contrainte de hauteur infinie. Appelle une disposition de pile horizontale GetSizeRequest (ou Measure ) sur ses enfants, avec une contrainte de largeur infinie. Un AbsoluteLayout appels GetSizeRequest (ou Measure ) sur ses enfants, avec des contraintes de la largeur et hauteur infinies. Lecture à l’intérieur du processus Le ExploreChildSize affiche contrainte et la taille de demander des informations pour une disposition simple.

Dérivation à partir de la mise en page Une classe de disposition personnalisée dérive

Layout

. Il possède deux responsabilités :

Substituer OnMeasure pour appeler Measure sur les enfants de tous les la disposition. Retourner une taille demandée pour la disposition lui-même Substituer LayoutChildren pour appeler Layout sur les enfants de tous les la disposition Le for ou sur false .

foreach

boucle dans ces remplacements doit ignorer tout enfant dont

IsVisible

propriété est définie

Un appel à OnMeasure n’est pas garanti. OnMeasure ne sera pas appelé si le parent de la disposition est régissant la taille de la mise en page (par exemple, une disposition qui remplit une page). Pour cette raison, LayoutChildren ne peuvent pas reposer sur les tailles enfant obtenus au cours de la OnMeasure appeler. Très souvent, LayoutChildren doit lui-même appeler Measure sur les enfants de la mise en page, ou vous pouvez implémenter une sorte de taille de la mise en cache logique (décrite ultérieurement). Un exemple simple Le VerticalStackDemo exemple contient un simplifiée utilisation.

VerticalStack

classe et une démonstration de son

Simplifié de positionnement vertical et horizontal Un des travaux qui VerticalStack doit effectuer se produit pendant la LayoutChildren remplacer. La méthode utilise l’enfant HorizontalOptions propriété afin de déterminer comment positionner l’enfant dans son emplacement dans le VerticalStack . Vous pouvez appeler la méthode statique Layout.LayoutChildIntoBoundingRect . Cette méthode appelle Measure sur l’enfant et utilise son HorizontalOptions et VerticalOptions propriétés pour positionner l’enfant dans le rectangle spécifié. Invalidation Souvent une modification de propriété d’un élément sur comment cet élément apparaît dans la disposition. La disposition doit être rendus non valide pour déclencher une nouvelle disposition. définit une méthode protégée InvalidateMeasure , qui est généralement appelée par le Gestionnaire de modification de propriété de n’importe quelle propriété pouvant être liée dont la modification affecte la taille de l’élément. Le InvalidateMeasure méthode déclenche un MeasureInvalidated événement. VisualElement

Le Layout classe définit une méthode protégée similaire nommée InvalidateLayout , qui une Layout dérivé doit appeler pour toute modification qui affecte la façon dont il positionne et redimensionne ses enfants. Certaines règles de codage des dispositions 1. Propriétés définies par Layout dérivés doivent être assorties de propriétés pouvant être liées et les

gestionnaires de modification de propriété doivent appeler

InvalidateLayout

.

2. Un Layout dérivé qui définit les propriétés pouvant être liées attachées doit substituer OnAdded pour ajouter un gestionnaire de modification de propriété à ses enfants et OnRemoved pour supprimer les Gestionnaire. Le gestionnaire doit vérifier pour les modifications dans ces attachés propriétés pouvant être liées et répondre en appelant InvalidateLayout . 3. Un

dérivée qui implémente un cache de tailles d’enfants doit substituer OnChildMeasureInvalidated et effacer le cache lorsque ces méthodes sont appelées. Layout

InvalidateLayout

et

Une disposition avec des propriétés Le WrapLayout classe dans le Xamarin.FormsBook.Toolkit suppose que tous ses enfants sont la même taille et les enfants est renvoyé à partir d’une ligne (ou colonne) à l’autre. Il définit un Orientation propriété comme StackLayout , et ColumnSpacing et RowSpacing propriétés telles que Grid , et il met en cache les tailles d’enfant. Le PhotoWrap exemple met un

WrapLayout

dans un

ScrollView

pour l’affichage des photos en stock.

Aucune dimension sans contrainte autorisée ! Le UniformGridLayout dans le Xamarin.FormsBook.Toolkit bibliothèque est destinée à afficher tous ses enfants en lui-même. Par conséquent, il ne peut pas traiter avec des dimensions sans contrainte et lève une exception si un est rencontré. Le PhotoGrid illustre

UniformGridLayout

:

Enfants qui se chevauchent Un Layout dérivé peut se chevaucher ses enfants. Toutefois, les enfants sont rendus dans leur ordre dans le Children collection et pas l’ordre dans lequel leurs Layout méthodes sont appelées. Le

Layout

classe définit deux méthodes qui vous permettent de déplacer un enfant au sein de la collection :

LowerChild RaiseChild

Pour déplacer un enfant au début de la collection Pour déplacer un enfant à la fin de la collection

Pour les enfants qui se chevauchent, enfants à la fin de la collection s’affichent visuellement au-dessus enfants au début de la collection. Le OverlapLayout classe dans le Xamarin.FormsBook.Toolkit bibliothèque définit une propriété jointe pour indiquer l’ordre de rendu et permettra ainsi à un de ses enfants à afficher sur les autres. Le StudentCardFile illustre cela :

Plus attaché propriétés pouvant être liées Le CartesianLayout classe dans le Xamarin.FormsBook.Toolkit bibliothèque définit des propriétés pouvant être liées attachées pour spécifier deux Point valeurs et un valeur d’épaisseur et manipule BoxView éléments qui ressemble à celle des lignes. Le UnitCube exemple qui utilise pour dessiner un cube 3D. Mise en page et LayoutTo Un Layout dérivé peut appeler LayoutTo plutôt que Layout pour animer la disposition. Le AnimatedCartesianLayout classe pour cela et le AnimatedUnitCube illustre cela.

Liens connexes Chapitre 26 de texte intégral (PDF ) Exemples de chapitre 26 Création de dispositions personnalisées

Résumé du chapitre 27. Renderers personnalisés 08/12/2018 • 7 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Un élément Xamarin.Forms comme Button est rendu avec un bouton spécifique à la plateforme encapsulé dans une classe nommée ButtonRenderer . Voici le version iOS de ButtonRenderer , le version Android du ButtonRenderer et le version UWP de ButtonRenderer . Ce chapitre explique comment vous pouvez écrire vos propres convertisseurs pour créer des vues personnalisées qui mappent aux objets spécifiques à la plateforme.

La hiérarchie de classe complète Il existe quatre assemblys qui contiennent le code spécifique à la plateforme Xamarin.Forms. Vous pouvez afficher la source sur GitHub à l’aide de ces liens : Xamarin.Forms.Platform (très petite) Xamarin.Forms.Platform.iOS Xamarin.Forms.Platform.Android Xamarin.Forms.Platform.UAP NOTE Le WinRT mentionnés dans le livre des assemblys ne font plus partie de cette solution.

Le PlatformClassHierarchy exemple affiche une hiérarchie de classes pour les assemblys qui sont valides pour la plateforme en cours d’exécution. Vous remarquerez une classe importante nommée ViewRenderer . Il s’agit de la classe que vous dérivez de lors de la création d’un convertisseur spécifique à la plateforme. Il existe en trois versions différentes, car il est lié au système de vue de la plateforme cible : IOS

ViewRenderer

a des arguments génériques :

limité à Xamarin.Forms.View TNativeView limité à UIKit.UIView TView

Android

ViewRenderer

a des arguments génériques :

limité à Xamarin.Forms.View TNativeView limité à Android.Views.View TView

La plateforme Windows universelle arguments génériques : TElement

limité à

ViewRenderer

Xamarin.Forms.View

a nommé différemment les

TNativeElement

limité à

Windows.UI.Xaml.FrameworkElement

Lorsque vous écrivez un convertisseur, vous serez dérivant une classe de View , puis en écrivant plusieurs ViewRenderer des classes, une pour chaque plateforme prise en charge. Chaque implémentation propre à la plateforme référencera une classe native qui dérive du type que vous spécifiez comme le TNativeView ou TNativeElement paramètre.

Hello, renderers personnalisés ! Le HelloRenderers programme fait référence à une vue personnalisée nommée Le

HelloView

HelloView

classe est incluse dans le HelloRenderers de projet et dérive simplement de

dans son View

classe.

.

Le HelloViewRenderer classe dans le HelloRenderers.iOS dérive de projet ViewRenderer

Le HelloViewRenderer classe dans le HelloRenderers.Droid dérive de projet ViewRenderer

.

classe dans le HelloRenderers.UWP et autres projets Windows dérive ViewRenderer . Dans le OnElementChanged override, il crée un Windows TextBlock et appelle SetNativeControl . HelloViewRenderer

Tous les le

dérivés contiennent un ExportRenderer attribut sur le niveau de l’assembly qui associe le HelloView classe avec le particulier HelloViewRenderer classe. Voici comment Xamarin.Forms localise les convertisseurs dans les projets de plateforme individuels : ViewRenderer

Convertisseurs et des propriétés L’ensemble suivant de convertisseurs implémente le dessin de l’ellipse et se trouve dans les différents projets de la Xamarin.FormsBook.Platform solution. Le

classe se trouve dans le Xamarin.FormsBook.Platform plateforme. La classe est similaire à et définit qu’une seule propriété : Color de type Color .

EllipseView

BoxView

Les convertisseurs peuvent transférer des valeurs de propriétés définies sur un View à l’objet natif en substituant le OnElementPropertyChanged méthode dans le convertisseur. Dans cette méthode (et, dans la plupart du convertisseur), deux propriétés sont disponibles :

, l’élément Xamarin.Forms Control , le mode natif ou l’objet de widget ou de contrôle Element

Les types de ces propriétés sont déterminés par les paramètres génériques à Element est de type EllipseView . Le

ViewRenderer

remplacement peut transférer par conséquent la Color valeur de la objet, probablement avec un type de conversion. Les convertisseurs de trois sont :

OnElementPropertyChanged

Control

. Dans cet exemple,

Element

natif

iOS : EllipseViewRenderer , qui utilise un EllipseUIView classe pour l’ellipse. Android : EllipseViewRenderer , qui utilise un EllipseDrawableView classe pour l’ellipse. UWP : EllipseViewRenderer , qui peut utiliser le Windows native Ellipse classe. Le EllipseDemo classe affiche plusieurs de ces

Le BouncingBall rebondit un

EllipseView

EllipseView

objets :

désactivé les côtés de l’écran.

Convertisseurs et des événements Il est également possible pour des convertisseurs générer des événements indirectement. Le StepSlider classe est semblable à la normale Xamarin.Forms Slider mais permet de spécifier un nombre d’étapes distinctes entre le Minimum et Maximum valeurs. Les convertisseurs de trois sont : iOS : StepSliderRenderer Android : StepSliderRenderer UWP : StepSliderRenderer Les convertisseurs de détecter les modifications apportées au contrôle natif, puis appelez SetValueFromRenderer , qui fait référence à une propriété définie dans le StepSlider , une modification apportée à ce qui conduit le StepSlider pour déclencher un ValueChanged événement. Le StepSliderDemo exemple illustre ce nouveau curseur.

Liens connexes Chapitre 27 de texte intégral (PDF )

Exemples de chapitre 27 Renderers personnalisés

Résumé du chapitre 28. Emplacement et mappages 08/12/2018 • 18 minutes to read • Edit Online

télécharger l’exemple NOTE Notes sur cette page indiquent des zones où Xamarin.Forms est différente de la matière présentée dans le livre.

Xamarin.Forms prend en charge un Map élément dérivé View . En raison des exigences de plate-forme spéciales liées à l’utilisation de cartes, elles sont implémentées dans un assembly distinct, Xamarin.Forms.Maps, impliquent l’intervention d’un autre espace de noms : Xamarin.Forms.Maps .

Le système de coordonnées géographique Un système de coordonnées géographiques identifie les positions sur un objet sphérique (ou presque sphérique), comme la terre. Une coordonnée comprend à la fois un latitude et longitude exprimée en angles. Un plus grand cercle appelé le s’étend sur le plan conceptuel.

equator

se trouve à mi-chemin entre deux pôles par le biais duquel l’axe de la terre

Parallels et latitude Angle mesuré à l’Équateur à partir du centre des marques de terre Nord ou lignes de latitude égale appelé parallels. Ces comprises entre 0 degrés à l’Équateur et 90 degrés dans le nord et sud du centre pôles. Par convention, les latitudes au nord de l’Équateur sont des valeurs positives et celles au sud de l’Équateur sont des valeurs négatives. Longitude et méridiens Moitiés de cercles great depuis le pôle nord au Pôle Sud sont des lignes de longitude égale, également appelés méridiens. Il s’agit par rapport à du premier méridien de Greenwich en Angleterre. Par convention, longitudes à l’est des valeurs positives de 0 degrés et 180 degrés et longitudes à l’ouest du premier méridien sont des valeurs négatives comprises entre 0 degré à –180 degrés. La projection équirectangulaire Tout mappage plat de la terre introduit des distorsions. Si toutes les lignes de latitude et longitude sont droits, et si égales différences dans les angles de latitude et longitude correspondent aux distances égales sur la carte, le résultat est un projection équirectangulaire. Ce mappage déforme plus près des zones et les pôles, car ils sont étirées horizontalement. La projection Mercator La célèbre projection Mercator tente de compenser l’étirement horizontal en l’étirant également ces zones de verticalement. Cela entraîne une carte où les zones proches pôles apparaissent bien plus important qu’elles sont réellement, mais n’importe quel réseau local conforme très près à la zone réelle. Services de mappage et des vignettes Services de carte utilisent une variation de la projection Mercator appelée Web Mercator . Les services de mappage remettre les vignettes de bitmap à un client basé sur l’emplacement et niveau de zoom.

Obtention de l’emplacement de l’utilisateur

Xamarin.Forms Map classes n’incluent pas une fonctionnalité pour obtenir l’emplacement géographique de l’utilisateur, mais il est souvent souhaitable lors de l’utilisation de cartes, par conséquent, un service de dépendance doit la gérer. NOTE Les applications Xamarin.Forms peuvent utiliser à la place la

Geolocation

classe inclus dans Xamarin.Essentials.

L’API de traceur emplacement Le Xamarin.FormsBook.Platform solution contient le code pour une API de traceur emplacement. Le GeographicLocation structure encapsule une latitude et une longitude. Le ILocationTracker interface définit deux méthodes pour démarrer et interrompre le dispositif de suivi d’emplacement et un événement lorsqu’un nouvel emplacement est disponible. Le Gestionnaire d’emplacement iOS

L’implémentation d’iOS de CLLocationManager .

ILocationTracker

est un

LocationTracker

classe rend utiliser d’iOS

Le Gestionnaire d’emplacement Android

L’implémentation Android de LocationManager classe.

ILocationTracker

est un

LocationTracker

classe qui utilise le Android

Le localisateur de géo UWP

L’implémentation de la plateforme Windows universelle de utilise la plateforme Windows universelle Geolocator .

ILocationTracker

est un

LocationTracker

classe qui

Afficher l’emplacement du téléphone Le WhereAmI exemple utilise le dispositif de suivi d’emplacement pour afficher l’emplacement du téléphone, à la fois dans le texte et sur une carte équirectangulaire. La surcharge de requis Une certaine surcharge est requise pour WhereAmI à utiliser le dispositif de suivi d’emplacement. Tout d’abord, tous les projets dans le WhereAmI solution doit disposer de références aux projets correspondants dans Xamarin.FormsBook.Platformet chaque WhereAmI projet doit appeler le Toolkit.Init (méthode). Une surcharge supplémentaire spécifique à la plateforme, sous la forme d’autorisations de localisation, est requise. Autorisation d’emplacement pour iOS

Pour iOS, le info.plist fichier doit inclure les éléments contenant le texte d’une question demandant à l’utilisateur pour permettre l’obtention de l’emplacement de l’utilisateur. Autorisations de localisation pour Android

Les applications Android qui obtiennent l’emplacement de l’utilisateur doivent avoir une autorisation ACCESS_FILE_LOCATION dans le fichier AndroidManifest.xml. Autorisations de localisation pour la plateforme Windows universelle

Une application de plateforme Windows universelle doit avoir un dans le fichier Package.appxmanifest.

location

fonctionnalité de l’appareil est marqué

Utilisation de Xamarin.Forms.Maps Plusieurs conditions requises sont impliqués dans à l’aide de la

Map

classe.

Le package NuGet Le Xamarin.Forms.Maps bibliothèque NuGet doit être ajouté à la solution d’application. Le numéro de version doit être le même que le Xamarin.Forms package actuellement installé.

L’initialisation de l’ensemble de cartes Les projets d’application doivent appeler la Xamarin.Forms.Forms.Init .

Xamarin.FormsMaps.Init

méthode après avoir effectué un appel à

L’activation des services de mappage Étant donné que le Map peut obtenir l’emplacement de l’utilisateur, l’application doit obtenir l’autorisation nécessaire pour l’utilisateur de la manière décrite plus haut dans ce chapitre : L’activation d’iOS mappe

Une application iOS à l’aide

Map

a besoin de deux lignes dans le fichier info.plist.

L’activation d’Android mappe

Une clé d’autorisation est nécessaire pour l’utilisation des services de mappage de Google. Cette clé est insérée dans le AndroidManifest.xml fichier. En outre, le AndroidManifest.xml fichier nécessite manifest balises nécessaires pour obtenir l’emplacement de l’utilisateur. L’activation UWP mappe

Une application de plateforme Windows universelle nécessite une clé d’autorisation pour l’utilisation de Bing Maps. Cette clé est passée en tant qu’argument à la Xamarin.FormsMaps.Init (méthode). L’application doit également être activée pour les services d’emplacement. La carte non Le MapDemos exemple se compose d’un MapsDemoHomePage.xaml fichier et MapsDemoHomePage.xaml.cs fichier de code-behind Permet d’accéder à différents programmes de démonstration. Le BasicMapPage.xaml fichier montre comment afficher le mappage peut être manipulé par l’utilisateur.

Map

vue. Par défaut, il affiche la ville de Rome, mais le

Pour désactiver le défilement horizontal et vertical, définissez la HasScrollEnabled propriété false . Pour désactiver le zoom, définissez HasZoomEnabled à false . Ces propriétés peut ne pas fonctionnent sur toutes les plateformes. Rues et le Terrain Vous pouvez afficher différents types de cartes en définissant le énumération avec trois membres : Street

Map

propriété

MapType

de type

MapType

, une

, la valeur par défaut

Satellite Hybrid

Le MapTypesPage.xaml fichier montre comment utiliser un bouton radio pour sélectionner le type de carte. Il utilise le RadioButtonManager classe dans le Xamarin.FormsBook.Toolkit bibliothèque et une classe basée sur le MapTypeRadioButton.xaml fichier. Coordonnées de la carte Un programme peut obtenir la zone actuelle qui le Map affiche via les VisibleRegion propriété. Cette propriété est pas soutenu par une propriété pouvant être liée, et il n’existe aucun mécanisme de notification pour indiquer quand elle a changé, donc un programme qui souhaite surveiller la propriété doit probablement utiliser un minuteur à cet effet. VisibleRegion Center

est de type

de type

MapSpan

, une classe avec quatre propriétés en lecture seule :

Position

de type double , indiquant la hauteur de la zone affichée de la carte LongitudeDegrees de type double , indiquant la largeur de la zone affichée de la carte Radius de type Distance , indiquant la taille de la plus grande surface circulaire visible sur la carte LatitudeDegrees

Position Position

et Distance sont les deux structures. constructeur:

Position

définit deux propriétés en lecture seule définies via la

Latitude Longitude

vise à fournir une distance centrée sur l’unité par la conversion entre les métriques et les unités en anglais. Un Distance valeur permettre être créée de plusieurs façons : Distance

constructeur avec une distance en mètres Distance.FromMeters méthode statique Distance.FromKilometers méthode statique Distance.FromMiles méthode statique Distance

La valeur est disponible à partir de trois propriétés : de type double Kilometers de type double Miles de type double Meters

Le MapCoordinatesPage.xaml fichier contient plusieurs Label éléments pour afficher les MapSpan plus d’informations. Le MapCoordinatesPage.xaml.cs fichier code-behind utilise un minuteur pour conserver les informations de mise à jour que l’utilisateur manipule la carte. Extensions de position Une nouvelle bibliothèque pour ce livre nommé Xamarin.FormsBook.Toolkit.Maps contient des types spécifiques à la carte mais indépendante de la plateforme. Le PositionExtensions classe a un ToString méthode pour Position et une méthode pour calculer la distance entre deux Position valeurs. Définissez un emplacement initial Vous pouvez appeler la MoveToRegion méthode de Map pour définir par programmation un emplacement et niveau de zoom sur la carte. L’argument est de type MapSpan . Vous pouvez créer un MapSpan de l’objet à l’aide d’une des opérations suivantes : constructeur avec un Position et l’intervalle de latitude et longitude MapSpan.FromCenterAndRadius avec un Position et radius MapSpan

Il est également possible de créer un nouveau WithZoom .

MapSpan

à partir d’un à l’aide de méthodes

ClampLatitude

ou

Le WyomingPage.xaml fichier et WyomingPage.xaml.cs fichier code-behind montre comment utiliser le MoveToRegion méthode pour afficher l’état du Wyoming. Vous pouvez également utiliser le Map constructeur avec un MapSpan objet pour initialiser l’emplacement de la carte. Le XamarinHQPage.xaml fichier montre comment effectuer cette opération entièrement dans XAML pour afficher le siège social de Xamarin à San Francisco. Le zoom dynamique Vous pouvez utiliser un Slider pour zoomer dynamiquement une carte. Le RadiusZoomPage.xaml fichier et RadiusZoomPage.xaml.cs fichier code-behind montrent comment modifier le rayon d’une table basée sur la Slider valeur. Le LongitudeZoomPage.xaml fichier et LongitudeZoomPage.xaml.cs fichier code-behind afficher une autre approche qui fonctionne mieux sur Android, mais aucune de ces approches fonctionne correctement sur le Windows plateformes.

L’emplacement du téléphone Le IsShowingUser propriété du Map fonctionne un peu différemment sur chaque plateforme en tant que le ShowLocationPage.xaml fichier montre : Sur iOS, un point bleu indique l’emplacement du téléphone, mais vous devez accéder manuellement Sur Android, une icône s’affiche que quand vous appuyez déplace le mappage à l’emplacement du téléphone La plateforme Windows universelle est similaire à iOS, mais parfois automatiquement accède à l’emplacement Le MapDemos projet tente de reproduire l’approche Android en premier définissant un bouton basé sur l’icône en fonction de la MyLocationButton.xaml fichier et MyLocationButton.xaml.cs fichier code-behind. Le GoToLocationPage.xaml fichier et GoToLocationPage.xaml.cs fichier code-behind Utilisez ce bouton pour accéder à l’emplacement du téléphone. Musées de science et codes confidentiels Enfin, le Map classe définit un Pins propriété de type

IList

. Le

Pin

classe définit quatre propriétés :

de type string , une propriété obligatoire Address de type string , une adresse explicite facultative Position de type Position , indiquant où le code confidentiel est affiché sur la carte Type de type PinType , une énumération, qui n’est pas utilisée Label

Le MapDemos projet contient le fichier ScienceMuseums.xml, qui répertorie des musées science aux États-Unis, et Locations et Site classes pour la désérialisation de ces données. Le ScienceMuseumsPage.xaml fichier et ScienceMuseumsPage.xaml.cs broches d’affichage de fichier code-behind pour ces musées science dans le mappage. Lorsque l’utilisateur appuie sur un code confidentiel, il affiche l’adresse et un site Web pour le musée. La distance entre deux points Le PositionExtensions classe contient un emplacements géographiques.

DistanceTo

méthode avec un calcul simplifié de la distance entre deux

Cela est utilisé dans le LocalMuseumsPage.xaml fichier et LocalMuseumsPage.xaml.cs fichier code-behind pour afficher également la distance rend au musée à partir de l’emplacement de l’utilisateur :

Le programme montre aussi comment limiter dynamiquement le nombre de codes confidentiels en fonction de l’emplacement de la carte.

Géocodage et revenir Le Xamarin.Forms.Maps assembly contient également un Geocoder classe avec un GetPositionsForAddressAsync méthode convertit une adresse de texte en zéro ou plus possibles géographiques positions et une autre méthode GetAddressesForPositionAsync qui convertit dans l’autre direction. Le GeocoderRoundTrip.xaml fichier et GeocoderRoundTrip.xaml.cs fichier code-behind illustrent cette fonctionnalité.

Liens connexes Chapitre 28 de texte intégral (PDF ) Exemples de chapitre 28 Mappage de Xamarin.Forms