Introduction à . Développement NET MAUI

1. Introduction: Bienvenue dans une introduction au développement de Dotnet Maui. Je suis votre instructeur pour Williams et je suis ingénieur logiciel et conférencier. Pour la durée de ce cours, vous allez apprendre le développement mobile à travers les yeux de Dotnet Maui.net. Maui est un framework multiplateforme qui nous est donné en le parsemant, et il nous permet d' avoir une base de code unique pour nombreux systèmes d'exploitation mobiles. Pendant ce cours, vous allez comprendre comment fonctionne Dotnet Maui. Nous allons comprendre la syntaxe XAML. Jetez un coup d'œil au développement axé sur les événements et examinez d'autres éléments tels que navigation et compréhension des ressources et des mises en page globales. Pour ce cours, nous allons avoir besoin de Visual Studio 2022, livré avec la génétique et les émulateurs Android sont intégrés. Une fois de plus, bienvenue dans ce cours et j'ai hâte de commencer. 2. Configurer l'environnement de développement: Salut les gars, bienvenue. Dans cet épisode, nous allons configurer notre environnement afin pouvoir coder avec Maui. Maui au moment de cet enregistrement est en avant-première, qui signifie que nous avons besoin de Visual Studio 2020 pour prévisualiser la version. Visual Studio 2022 est peut-être déjà installé. Vous allez avoir besoin de l'aperçu. Si ce n'est pas le cas, aucun problème. Nous allons passer par les étapes de base qui sont les étapes les plus nécessaires ensemble. Commençons donc par aller dans Visual Studio.Microsoft.com. Ensuite, lorsque vous êtes sur cette page, vous devez accéder à la dernière version de l'aperçu , puis télécharger l'aperçu. Ce programme d'installation sera téléchargé sur votre ordinateur. Et lorsque ce lancement aura lieu, vous voudrez vous assurer que vous obtenez les aperçus. Donc, si vous passez à la section disponible, vous verrez 201720222019. Vous voulez donc vous assurer que vous obtenez celui qui est marqué comme aperçu, n'est-ce pas ? Nous pouvons donc aller de l'avant et obtenir les ajouts de Community Preview. Je ne l'ai pas répertorié ici. C'est parce que je l' ai déjà installé. Vous pouvez donc lancer le programme d'installation. Et ce qui se passera, c'est qu'elle ouvrira cette fenêtre où elle vous demandera quelles charges de travail voulez-vous. Vous pouvez donc regarder les charges de travail que j'ai. Mais ceux qui sont essentiels pour ce cours sont ASP.Net et le développement Web, car vous allez créer une API. Nous avons donc besoin de la charge de travail Web et vous avez vraiment besoin de la charge de travail Maui. Maintenant, je vais juste jouer. Étant donné qu'il s'agit d'un aperçu, je suis sûr que ce sont des problèmes qui seront réglés au fur et à mesure que l'équipe de développement va de mieux libérer ces charges de travail et ces packs de développement. Mais en l'état actuel, j'ai dû sélectionner le développement de l'interface utilisateur multiplateforme Dotnet, qui est Maui, n'est-ce pas ? J'ai dû obtenir le développement de bureau et j'ai aussi dû obtenir l'UWP. Très bien ? Maintenant, après avoir sélectionné, tous ces éléments sont toujours en cours avec des composants individuels. Et j'ai cherché Android et je me suis assuré que toutes ces choses étaient cochées. Très bien, donc certains d'entre eux auraient été cochés en raison du que vous avez choisi les charges de travail et d'autres pourraient ne pas l'être. Je me suis donc assuré que j'avais coché l' émulateur Google Android et les outils de développement Android C Plus Plus pour faire tout cela. Très bien, j'espère que lorsque vous suivez ce cours, vous n'aurez peut-être pas besoin de suivre tout cela, ou peut-être que la charge de travail sélectionnera tout ce qu' elle devrait sélectionner. Mais je ne fais que vous montrer ces choses pour que vous puissiez avoir le chemin du moins de résistance lorsque vous traversez cet exercice. Maintenant, une fois que vous avez sélectionné tous ces éléments, les charges de travail s' installeront probablement près d' environ 40 gigaoctets. Vous pouvez donc procéder à l'installation, j'espère que vous aurez assez d'espace. Je suis sûr que vous le faites, mais une fois que vous procédez à l' installation et qu'ils sont terminés, vous pouvez continuer cette vidéo. Désormais, une fois installé, vous pouvez lancer Visual Studio 2022. Nous allons maintenant créer un nouveau projet. Et quand ça arrivera, on va vouloir un Mawi Dotnet. Maintenant, si vous ne l'avez pas à gauche comme moi, c' est parce que j'en ai créé un récemment. Vous pouvez toujours effectuer une recherche et elle filtrera cette liste pour vous. Allez-y et sélectionnez Dotnet Maui, puis vous allez lui donner un nom. Je vais donc appeler ça mon premier Mawi. Très bien ? Vous pouvez donc aller de l'avant et le nommer que ce n'est pas le projet avec lequel nous allons développer. s'agit simplement d'un projet pour que nous puissions configurer notre environnement et nous habituer à ce à quoi il ressemble. Très bien, alors lorsque Visual Studio démarre, nous avons le fichier XAML de point de page principale chargé pour nous. Maintenant, il y a peu de choses dont je veux que nous prenions note ici. Encore une fois, c'est toujours en avant-première, donc ils vont être des problèmes que je vais vous guider. Et j'espère que vous aurez la même expérience que moi et vous n'aurez aucune attrition pour accomplir ces tâches. La première chose dont je veux que nous soyons présents est le fait qu'il s'agit d'un fichier XAML, qui est vraiment un dialecte de XML. Donc, vous pouvez voir ici, au sommet, ça fait mal. Vous savez, il s'agit en effet d'un fichier XML. Et c'est la page principale. C'est donc l'exemple de page que nous obtenons avec cet exemple, avec ce modèle de projet à peu près. Et si vous venez de le lire, vous pouvez voir qu'il ressemble un peu au HTML car une fois de plus, les deux sont basés sur XML. Et vous verrez que chaque étiquette a du sens. C'est vraiment juste un anglais standard. Nous voyons donc ici que nous avons une balise qui indique image et nous avons des attributs pour cette balise d'image, que nous avons des attributs pour cette balise d'image, nous avons une étiquette des attributs et une autre étiquette et un bouton Haut. C'est vrai ? Maintenant, pour chaque page XAML, qui ressemblerait vraiment à une page littérale de votre application que vous allez créer. Vous allez avoir un code derrière le fichier. Nous avons donc la page principale pas l'été, et ensuite nous avons la page principale pas XAML dot CSS. Donc, dans ce fichier CSV, il est en cours d'initialisation. Donc, si vous avez déjà travaillé avec WPF ou Windows Forms , ce type de code vous semble familier, n'est-ce pas ? Nous avons donc une page principale de classe partielle et elle hérite d'une autre classe appelée page de contenu. Et il a une variable globale ou globale pour la classe, au moins nous avons notre constructeur qui initialise tous les composants. Et c'est juste une méthode qui s'exécute dans un buck initialisant tous les contrôles qui seront utilisés tout au long l'application ou à la gorge de ce contrôle particulier, n'est-ce pas ? Ensuite, nous avons ici une méthode qui voit sur le compteur cliqué. C'est ce que nous appelons un événement. Ainsi, lorsque vous cliquez sur un contrat, il s'agit d'un événement ou d'une méthode qui sera appelé chaque fois que le bouton est cliqué. Nous avons donc le contrôle du bouton ici. Permettez-moi de zoomer un peu pour m' assurer que nous pouvons voir. Nous avons donc le contrôle de notre bouton, nous lui donnons un nom. C'est donc l'un des attributs, non ? Cet attribut de nom nous permet donc référencer à partir du code derrière. Donc, si nous voulions modifier quelque chose concernant le bouton, l'étiquette ou tout ce que nous avons défini ici, nous nous assurons de lui donner un nom. Ensuite, nous avons les textes que possède le bouton, puis nous avons des propriétés sémantiques, des points, des indices. Et puis il nous indique que les cônes okayed le nombre de fois où vous cliquez puis cliqué, ce sera notre événement de clic. Et puis, quand on clique dessus, appelez cette méthode. Alors, quand on clique sur Intercalate, qu'est-ce qui n'est pas contacté ? Eh bien, c'est la méthode que nous avons ici. Cette méthode prend des informations sur les personnes qui appellent l'événement et le type d'événements qui l'ont déclenché. Il serait donc en mesure de savoir que le bouton appelait l'événement et qu'il a été déclenché par un événement de clic. Ensuite, il effectue une opération où il incrémente les cônes précédemment définis. Ensuite, il définit le texte en fonction du fait que les cônes sont équivalents à un ou plusieurs, puis il envoie un message au lecteur d'écran sémantique, car le texte du bouton Contenu est inconnu. En d'autres termes, nous sommes enchaînés. C'est donc ce qu'on appelle un BTN. J'ai dit quoi et qu'est-ce qui contribue ? Qu'est-ce qui contribue ? C'est le nom que nous donnons à ce bouton. Donc, nous voyons ici quand on clique sur le bouton, changer son texte pour qu'il soit ce que je veux. Et puis on ignore à notre écran que le texte du bouton a changé, n'est-ce pas ? Ce lecteur d'écran sémantique va donc être notre petit pont entre notre code derrière et ce que nous voyons visiblement sur l'application, n'est-ce pas ? C'est donc à cela que cela sert. Aucun autre fichier n'inclut le fichier program.cs. C'est donc le bootstrapper. Avec la plupart, sinon tous les programmes C-sharp, ils auront un program.cs, que ce soit WinForms, WPF ou ASP.Net, il va avoir un program.cs lointain avec une méthode principale qui va s'exécuter initialement. Cela représenterait donc ce fichier dans une IMAO. Et puis ce sera le cas, il faut les créer tous. Il démarre un constructeur, puis il dit « User up », et nous verrons ce que c'est. mise à jour XAML est ici. Il s'agit donc d'utiliser cela, configurer les polices, puis de construire. Bon, alors quoi de neuf ? Que signifie Abdul ? Ça dit sauter en haut. Ccm est l'un de ces fichiers de base, vous ne voulez donc pas supprimer ces fichiers. Ces fichiers sont très essentiels. Essentiellement, nous ne faisons que déclarer quelques espaces de noms. Il sait quelle est sa classe, donc elle n'est pas à la hauteur. C'est pourquoi nous sommes en mesure de l'appeler encore une fois dans l' accord. Très bien ? Ensuite, il définit certaines ressources applicatives, des styles et des couleurs, etc. Et c'est à ça que sert notre fichier XAML d' application. Nous avons également le shell de l'application. Le shell de l'application définit à nouveau certains espaces de noms, puis il s'agit du contenu. La page d'accueil est censée être la page principale. Nous l'envoyons à la hauteur moyenne dès les téléchargements. Donc, si vous souhaitez créer une page d'accueil différente, vous devez vous assurer de lui dire qu' il ne s'agit plus d'une page principale. Ce n'est pas une page que j'ai créée contrôle autosomique que j'ai créé. Bien que les dossiers aient des ressources, que se passe-t-il ? Laissez-moi d'abord aller sur les plateformes. Que se passe-t-il avec Xamarin ? Parce que Mawi est essentiellement un remplaçant de Xamarin. Xamarin a été un pionnier du développement multiplateforme, où il vous permet d'avoir un seul projet avec une seule base de code. On pourrait être comme étant juste un point fort pour entretenir, hum, plusieurs interfaces mobiles et systèmes mobiles. Maintenant, ce qui se passe, c'est Maui, au lieu de vous demander créer un projet différent par cours avec Xamarin, je devrais avoir un projet pour Android après un projet pour iOS, etc. etc. Au lieu de faire un projet, un projet, projet, il nous donne un seul projet. Et pour toutes les ressources uniques dont nous avons besoin pour ce système d' exploitation mobile particulier, nous avons un dossier. Par conséquent, au lieu de plusieurs projets, nous avons un projet avec plusieurs dossiers capables de stocker instructions et les ressources spécifiques sur tout ce qui est nécessaire pour cela. huile particulière. Donc nous voyons ici que nous avons le dossier Android avec les gauches du dossier iOS dans lequel je pense que Samsung aura Mac catalyst et nous avons des fenêtres, non ? Donc, un code basé sur un code pour les régner tous, à peu près. C'est ce que nous voyons dans le dossier des plates-formes, puis dans ressources, nous pouvons maintenant disposer de toutes les ressources dont nous avons besoin. Parce que ce qui arriverait, c'est qu'avec Xamarin, vous pourriez finir par placer une icône dans le dossier ou le projet Android et en oubliant de la placer dans le dossier iOS. Ici, nous avons un dossier. Eh bien, nous pouvons mettre tout ce dont nous avons besoin pour que toutes nos applications puissent paraître en uniforme à partir de celle-ci appelée BCE. Maintenant, vous verrez ici que j'ai cette petite icône d'avertissement pour les dépendances et vous verrez que certaines dépendances sont manquantes et quelques trucs. Si je fais un loyer de construction, non, je vais avoir un tas d'erreurs. Maintenant, j'ai parcouru Internet. Donc encore une fois, il s'agit d'un aperçu, donc je suis sûr qu'une fois qu'elle sera entièrement publiée, je devrais réenregistrer cette leçon et ne pas avoir à mettre dans ce que je vais partager. Mais pour non, pendant que vous le faites en avant-première, ce que vous voulez faire est d' aller dans le fichier de solution, ouvrir dans le terminal. Ensuite, vous voulez taper ceci dans .net. J'ai mis un espace là-dedans pour que ce soit plus d'espace. Donc, Dotnet, nouveau global, Jason, puis Dash, Dash, SDK Dash version. Ensuite, vous allez mettre en avant-première 6.300 tiret. Donc, comme je l'ai dit, assurez-vous mettre ces chiffres exacts, n'est-ce pas ? Donc, comme je l'ai dit, c' est toujours le précédent, donc c'est juste un travailleur pour s'assurer que tous les SDK savent quelle version ils devraient être sur. Parce qu'une fois que vous utilisez l'aperçu de Visual Studio à ce stade comme au moment de cet enregistrement, valeur par défaut est dotnet sept, qui n'est pas encore ancienne et qualifiée pour Les applications Maui, non ? Alors assurez-vous de le mettre comme vous me voyez ici, puis vous pouvez appuyer sur Entrée. Et ce que cela va faire, c'est créer un fichier JSON global point à la racine ou au niveau de la solution, n'est-ce pas ? Une fois cela fait, nous pourrons effectuer un changement de contrôle et B et lui permettre de se reconstruire lui-même. Et une fois la construction terminée, vous remarquerez que ce panneau d'avertissement n' est plus là. Et toutes nos dépendances ne sont pas, nous ne vous avertissons plus. C'est donc bon signe. Très bien, alors passons pour voir à quoi ressemble cette application lorsqu'elle est en cours voir à quoi ressemble cette application lorsqu'elle est en d'exécution. En haut de notre bouton de jeu, je vais frapper la carotte et ensuite je vais choisir ça. Je veux utiliser le, d'accord, donc je vais faire une pause, juste savoir parce que je n'ai pas vu ce que je m'attendais à voir. Une fois de plus, je vous guide à travers chaque étape dont j'ai besoin que vous soyez conscient. Si vous ne voyez la machine Windows que lorsque vous la déposez sur cette carotte et que vous ne voyez pas autant d'options que je le vois. Redémarrez votre Visual Studio. studio de réserve si proche a relancé le projet. Quand c'est le cas, il y a des chances que tu verras ce que je vois, non ? Nous avons également accédé à l'émulateur Android. Ce qui se passe, c'est que quelques instances de l'émulateur étaient déjà en cours d'exécution. Ainsi, lorsque vous accédez à Outils, vous allez sur Android, puis vous pouvez accéder au Gestionnaire de périphériques. Et une fois que cela sera lancé, nous vous montrerons tous les émulateurs que vous avez probablement en cours d'exécution. J'ai eu trois ans de course, non ? J'arrête celui-ci et je retire les deux autres qui ont été lancés de mes précédentes expériences avec MAOI. Donc, entre toutes ces actions, vous devriez être en mesure d'arriver à ce point où vous voyez toutes ces options, n'est-ce pas ? Je vais donc passer à l'émulateur Android et je vais sélectionner l'émulateur Android. Et puis je suis allé sur le bouton de lecture parce que je veux voir à quoi cela ressemble sur Android. Très bien, voici donc notre application mobile. Et si vous le regardez et que vous le regardez avec le code, vous pourrez cartographier chaque élément, n'est-ce pas ? Voici donc notre image, le Dotnet, le point PNG. On y va. Nous avons le label Hello World. Nous avons celui qui dit Bienvenue. Et puis nous avons notre bouton qui dit « cliquez sur moi ». Donc, lorsque je clique sur moi, j'ai défini un point d'arrêt sur l'événement de clic et vous voyez qu' il atteint cet événement de clic. Collins est donc égal à 0. Au premier sombre, nous allons voir que la clique est une fois. Et puis il va déclarer ou inconnu plutôt au lecteur d' écran sémantique pour le mettre à jour. Donc je vais juste frapper F5, donc ça continue. Et vous pouvez voir ici qu'il y a cliqué une fois. Mais si je clique à nouveau dessus, vais voir ou entendre cliqué deux fois, F5. Et voilà, on a cliqué deux fois. C'est donc à peu près comme ça qu'un Mawi Up fonctionne hors de la boîte. C'est comme ça que ça fonctionne. Oui, la configuration peut être douloureuse, mais j'espère que vous réussirez cet exercice. Si ce n'est pas le cas, n'hésitez pas à utiliser cette section questions-réponses et à me le faire savoir. 3. Créer des contrôles avec C#: Très bien les gars, alors continuons notre découverte de Maui. Sachez que nous l'avons opérationnel et que nous connaissons bien les différentes pièces mobiles. Essayons donc de créer une nouvelle page. Je vais donc cliquer avec le bouton droit sur le projet ou ajouter un nouvel élément. Et puis je vais vouloir de la section Dotnet Maui sur la nouvelle page de contenu, n'est-ce pas ? Et puis appelons cette page de test simple et agréable. Ce que cela nous donne, c'est une nouvelle classe C-Sharp qui nous permet de définir ce que nous voulons sur la page. s'agit donc pas d'une page XAML, n'est-ce pas ? Il existe donc deux façons de créer du contenu sur une page ou une page de croyance. L'une est avec le fichier XAML supportant le code C-Sharp. Et nous pouvons réellement faire en sorte que le C-sharp génère les pièces que nous mettons au rythme. Par exemple, je vais prendre cette page de test et je vais en faire le démarrage. Donc, en sautant pour mettre à jour XAML, je vais dire que je veux, je suis désolé, je ne résume pas. Coquille XAML. Je vais lui dire que je voulais passer à la page de test. Donc la page Tests au lieu de peut-être. Jetons donc un coup d'œil à ce que nous obtenons avec cela. Et c'est ce que nous obtenons. Nous obtenons une étiquette simple avec le texte. Bienvenue à Dotnet Maui. Et c'est exactement ce que nous avons sur l'application, n'est-ce pas ? Vous pouvez donc voir que notre classe C-Sharp fonctionne. Nous allons donc bâtir un peu plus là-dessus. Donc, ce que nous avons essentiellement serait un, l'objet de contenu ici qui représente le contenu de la vue, n'est-ce pas ? Ensuite, nous disons que nous voulons une nouvelle mise en page de pile avec les enfants. s'agit donc d'une mise en page et il existe différents types de mises en page que vous pouvez faire. Donc, si vous deviez simplement taper la mise en page des mots , ils sont un peu brouillés ici, mais vous avez Absolute Layout. Vous avez le type de carrousel, disposition des compresseurs, des mises en page flexibles. Il existe plusieurs options de mise en page. Donc, cette option par défaut que nous avons obtenue était une mise en page de pile. Ensuite, nous pourrions ajouter les enfants et nous pourrions avoir une nouvelle étiquette. Ensuite, faisons un exercice où nous allons mettre en place d'autres éléments. Commençons donc par effacer tout ce qui se trouve à l'intérieur de cette classe ou de ce constructeur autre. Vous pouvez donc voir ici que tout commence avec le constructeur. Oui, c'est une classe ce qu'est le constructeur, où se produira la section ou l'initialisation, n'est-ce pas ? Donc, ce que nous allons faire, c'est construire un chargement similaire à ce que nous avons sur la page principale, mais nous allons uniquement utiliser. Cool. Commençons donc par initialiser notre compteur à 0. Et puis je vais avoir une étiquette statique que je veux appeler, disons une étiquette de compteur. C'est toujours une bonne pratique, même avec des formes en bois lorsque nous faisons de la programmation visuelle. Il donne toujours des noms à nos contrôles et a soit un préfixe soit un postfix qui indique de quel type de contrôle il s'agit. Mon général, ce serait que je dirais comme LBL et ensuite le nom. C'est vrai ? LBL est donc l'abréviation d'une étiquette. C'est le mien. Vous pouvez donc développer votre propre technique si vous le souhaitez. Mais c'est généralement une bonne pratique car plus tard, lorsque la base de code se développe, il est plus facile d'identifier quand on veut étiqueter plutôt qu'une zone de texte par rapport à quelqu'un, etc. de texte par rapport à quelqu'un, ils doivent être en dehors du constructeur. Excuses. Donc, les cônes et l'étiquette en dehors du constructeur. Ensuite, à l'intérieur du constructeur, nous pouvons définir un nouveau type de vue. Je vais donc dire défilement. Donc je vais juste nouveau ou désolé, je dirai simplement que la vue de défilement var est égale à une nouvelle vue de défilement. Très bien ? Et puis je vais enregistrer ma mise en page de pile égale à une nouvelle disposition de pile. On y va. Ensuite, je peux voir la vue de défilement. Donc, en mode défilement, je veux que votre contenu soit la disposition de la pile. Donc, juste là, je vois une plus grande vue de défilement à l'intérieur de cette page. Puis, à l'intérieur de la Terre, crée une vue de défilement, crée une disposition de pile, puis place cette disposition empilée à l'intérieur de la vue de défilement. Donc, même si la vue de défilement peut être explicite, je vais tout de même expliquer cela. C'est le contrôle qui vous permet faire défiler vers le haut et vers le bas sur l'application mobile, n'est-ce pas ? Donc le contenu est trop important, nous le mettons simplement en mode défilement. Et cela gère le défilement pour le débordement du contenu. À l'intérieur de l'étiquette. Pour le compteur, je vais dire qu'il est égal à une nouvelle étiquette, que je vais initialiser avec quelques valeurs. Donc, ici, je peux définir ces dimensions sont ces attributs. Donc, peu importe ce que vous auriez mis en décimal et nous allons faire un exercice où nous passons par le XAML, n'est-ce pas. Je vais dire Conte, et je suis allé mettre des zéros. Nous commençons donc avec les cônes à 0. Très bien ? Nous pouvons définir la taille de la police et tous les autres attributs que nous voulons, la famille, etc. Je voulais donc définir la valeur 22. Que voulons-nous probablement souhaiter les attributs de police ? Voyons ce que nous avons ici. Les attributs de police qui, donc c'est une énumération et que nous pouvons la mettre en gras, nous pouvons la mettre en italique, nous pouvons la mettre à un certain nombre de choses. Eh bien, c'est vraiment audacieux et italique à ce stade. Ensuite, nous avons les options horizontales. Est-ce que nous voulons qu'il soit centré, nous le voulons à gauche ou à droite, etc. Je suis donc allé voir les options de mise en page, lieu qui prend le centre. Maintenant que j'ai construit ce contrôle ici, Visual Studio me guide juste là suggérant que vous avez ajouté à la disposition de la pile. Très bien, donc je peux simplement appuyer sur Tab, laisser cela faire, sont construits sur mon contrôle et je vois la mise en page de la pile pour vos enfants. Ajoutez ce contrôle. Très bien, créons notre bouton. Donc je peux dire var btn, deux-points, deux-points Tr est égal à un nouveau bouton. Et ce nouveau bouton, je veux qu'il ait le texte qui indique Cliquer pour compter. Et puis nous avons aussi, disons, l'option horizontale qui le fait centrer toutes sortes. Je l'utilise donc encore une fois. Après avoir obtenu ce bouton, nous pouvons également l'ajouter. Donc la mise en page. Très bien, je vais simplement copier et coller et modifier ce que je sais que je dois changer. De toute évidence, les enfants seraient génériques et tous ces contrôles sont de type standard qui peuvent être ajoutés en tant qu'enfants. Après tout cela, nous pouvons dire que ce contenu de points est égal à tout ce qui est en mai, désolé, tout ce qui se trouve dans la vue de défilement. Très bien. Le contenu de ce point est donc égal à la vue de défilement. Passons donc en revue très rapidement. Nous avons créé une vue de défilement, nous avons créé une disposition de pile. Nous avons ajouté la disposition de la pile à la vue de défilement. Ensuite, nous avons rempli la disposition de la pile avec différents contrôles. Et puis à la fin de tout, nous voyons que le contenu et ceci ici représentent la page de test, n'est-ce pas ? C'est juste que si vous connaissez C-Sharp, vous comprendriez ce que c'est. Très bien. Cela représente donc notre page de test. Je vois cette page, votre contenu est égal à tout ce qui se trouve dans la vue défilement. Maintenant, jetons un coup d' œil à ce que nous en tirons et je vais juste courir sans déboguer. Très bien, donc nous sommes ici et nous avons notre étiquette avec une mention 22, c'est le cône 0. Et nous avons notre bouton qui dit cliquer sur les cônes. Maintenant, lorsque nous cliquons, rien ne se passe. Pourquoi rien ne se passe-t-il ? Eh bien, nous n'avons pas dit au bouton qu' il devrait faire quoi que ce soit quand on clique dessus. Alors, que devons-nous ajouter ? Non, nous devons ajouter ce que nous appelons notre. Si vous avez dit événement de clic, vous avez tout à fait raison. Donc ce que je vais faire ici, c'est dire compteur BTN, points, cliquer ou cliquer. Et puis je dirai plus égal sur cliqué, non ? Ou événement OnClick. Maintenant, ce que cela fait, c'est relier l'événement de clic à cette méthode que nous allons bien sûr définir juste en dessous de notre constructeur, qui était de bootstrapping et de créer tous nos contrôles. Nous savons que nous avons notre méthode privée de vide, et j'appelle ça un événement de clic. Ensuite, nos événements prennent généralement l'expéditeur de l'objet, ainsi qu'un onglet appelé args d'événements. Et nous l'appellerons simplement E la plupart du temps. Ensuite, nous avons nos méthodes. Dans notre méthode, je veux voir des cônes. Je veux que vous augmentiez le nombre plus, plus. Et puis je dirais LBL, contre ça. Votre texte est égal à. Et puis je peux faire preuve de créativité avec ce message. Cliquez ou cliquez sur des cônes. Et puis je peux simplement mettre mon compte. Et puis, comme nous l'avons vu dans le précédent, nous devons dire que le lecteur d'écran sémantique ne sait pas que le texte du point de compteur LBL a changé. Et c'est vraiment ça. Très bien ? Donc après avoir fait tout ça, si vous utilisez une machine assez rapide et qu'il peut garder l'Emily ouverte. Vous pouvez réellement toucher le Hot Reload, qui va reconstruire votre application pour vous. Mais cela fonctionne généralement avec les modifications XAML. Donc, ce que je vais faire, c'est relancer l'application et nous laisser le faire et attendre un peu. Et maintenant, quand je clique, vous voyez que cela fonctionne. Notre événement Click fonctionne donc juste là. Nous avons créé notre toute première page MAOI. 4. Créer des contrôles avec XAML: Très bien, maintenant que nous avons vu comment créer une nouvelle page et des contrôles à l'aide du code C-Sharp. Recréons cela à l'aide du code XAML. Très bien, donc nous allons passer à notre projet, créerons un désolé, ajouterons un nouvel article. Et puis cette fois, nous allons utiliser le contenu de Maui. Remarquez donc que le premier était C-sharp et celui-ci est XAML. Très bien, nous allons donc choisir celui-là. Et cela vient de laisser le nom par défaut , car nous sommes encore dans les états explorateurs. Vous voyez donc que nous obtenons les mises en page des stocks et nous obtenons ces étiquettes par défaut. Commençons donc à modifier cet arbitraire. Donc notre étiquette la dernière fois, c'est rouge et je vais juste basculer entre le C-sharp et le XAML, juste pour pouvoir copier et coller et aller un peu plus rapidement. Donc, le texte ici dit cône 0. Nous pouvons définir l'option verticale, ce qui signifie son centre verticalement. Et ensuite, nous avons mis l' horizontale au centre également. Mais d'autres éléments que nous avions besoin d'avoir ce nom, n'est-ce pas ? Nous lui avons donc donné le nom de compteur LBL. Je vais donc voir le nom de x deux-points, s'il vous plaît égal au compteur LBL. De cette façon, nous savons bonjour pour vous référer, référencez-le à partir du code derrière. Il veut probablement lui donner une taille de police. Et vous voyez tous les attributs que je pourrais m'asseoir dans le C-Sharp. Je peux vraiment m'asseoir ici dans le XAML, non ? Vous trouverez peut-être cette vue un peu plus intuitive, mais c'est vraiment à vous de choisir. Je ne fais que vous montrer vos options. Donc, une police, un boulon d'attributs, n'est-ce pas ? C'est donc notre label. Ensuite, nous avons notre bouton, ouvrez une nouvelle étiquette de bouton. Et j'aime simplement ouvrir et fermer en même temps puis remplir tous les attributs, n'est-ce pas ? Le texte ici disait que je saute pour compter. Très bien, cliquez sur deux cônes. Et qu'avons-nous d'autre ? Nous avons eu l'événement de clic, donc peu importe ce qu'il a cliqué, nous voulons de l'huile ici. Ils disent que vous pouvez créer un nouveau gestionnaire d'événements. Je cliquerai simplement sur le fait qu'il a généré un formulaire que vous allez voir ce qui a été généré pour nous dans quelques-uns. Nous pouvons lui attribuer les mêmes attributs centraux et verticaux, horizontaux et verticaux. Et je pense que je vais m'en occuper pour l'instant. Maintenant, passons à notre code derrière. Le code derrière le fichier va généralement être imbriqué sous le fichier XAML, non ? Et si vous le regardez , vous verrez une partie et elle porte le même nom que les fichiers XAML. Si partielle dans C-Sharp signifie simplement que j'ai plusieurs classes et chaque fichier de code est comme une instance de cette classe ou une partie de la définition de cette classe. Cela fait donc partie de la définition du fichier XAML et le fichier C-Sharp fait partie de la définition. Et celui-ci hérite de la page de contenu. Maintenant que je l'ai déjà fait, j'ai fait le champ privé pour les cônes. Nous avons notre constructeur, puis nous avons cette méthode appelée initialize component. N'oubliez donc pas que la page précédente nous aurions défini tout ce qui aurait été sur la partie visible de notre page. À l'intérieur de notre constructeur, le composant initialisera exactement cela , sauf qu' il est automatiquement généré parallèlement à ce que nous faisons dans le fichier XAML. Donc, si vous le regardez, vous verrez que les noms et les types de contrôle s'affichent en conséquence. Donc, tout ce que vous allez faire à l'intérieur du constructeur, je le conseillerais avant ou après l'initialisation du composant, mais ne modifiez pas ce neuf. Nous avons maintenant notre événement Click qui a été généré pour nous. Et ce que je vais faire, c'est simplement réutiliser le même code d'événement de clic du contrôle précédent, plutôt de la page précédente, afin que nous ayons le même comportement, n'est-ce pas ? Maintenant. Pour tester cela, je vais passer au shell de l'application et je vais dire non pas la page de test, mais la nouvelle page 1. Très bien. Faisons donc une nouvelle page une, notre première grosse et testez cela. Donc, lorsque cela se charge, nous obtenons une disposition très similaire. Nous pouvons voir en haut ici qu'il s'agit d'une nouvelle page 1. Et lorsque nous cliquons, nous obtenons le même comportement. Donc, à ce stade, vous savez, vous savez maintenant deux façons de créer une page à l'intérieur de votre bouche vers le haut, vous pouvez soit utiliser le code C-Sharp et coder tous vos éléments comme vous le souhaitez. Ou vous pouvez le mélanger là où vous avez le XAML ainsi que le code derrière. 5. Comprendre les mises en page MAUI: Très bien les gars, donc dans cette leçon, nous allons nous concentrer sur Leodes, non ? Commençons donc par créer une nouvelle page de contenu. Je l'ai déjà fait, mais vous pouvez cliquer avec le bouton droit de la souris, aller dans Ajouter un nouvel élément, puis nous voulons une nouvelle page de contenu, j'appelle cela un exemple de mise en page. Vous pouvez donc y aller de l'avant et le faire. Et pendant que nous y sommes, laissons simplement le nœud réel, cet exemple de mise en page est notre nouvelle page d'accueil, n'est-ce pas ? conséquent, dans l'exemple de mise en page, nous avons notre disposition de pile. Nous avons déjà vu cette disposition de pile. Nous avons d'autres mises en page. Nous avons la disposition verticale de la pile. Très bien, comment ça va pour la taille ? Maintenant, à partir de notre mise en page, nous pouvons définir des marges et des rembourrages. Et si vous êtes familier avec le HTML, vous savez que la marge signifie que, où que soit l'élément, il va créer autant d'espaces entre lui-même et l'élément le plus proche dans n'importe quel élément direction que nous avons spécifiée. Alors que le rembourrage est l'épaisseur holistique, nous voulons que l'élément lui-même soit que, eh bien, la contrainte directionnelle s'applique également là, tout comme pour la marge. Avec la définition de la mise en page, nous pouvons dire que nous voulons un rembourrage. Et si je mets ça à 30 dans toutes les directions ? Très bien ? Nous sommes donc séparés par des virgules. Très bien, je vais en fait utiliser différentes valeurs pour que nous puissions voir visiblement au moins où ces valeurs de remplissage sont appliquées, n'est-ce pas ? Je suis donc sûr que nous allons voir des tailles bizarres, mais nous pouvons toujours revenir en arrière et changer cela. Nous pouvons également définir la marge si nous le voulons. Je ne fais que vous montrer quelles sont vos options, n'est-ce pas ? C'est donc la pile verticale Leo. La disposition verticale de la pile signifie qu'elle va tout empiler de haut en bas, un, le dessus de l' autre en descendant. Très bien. Le prochain très populaire serait donc une grille. Non, une grille nous donne généralement quelque chose comme une disposition de table, qui peut être très utile, des contrôles les uns à côté de l'autre, etc. Donc, si nous le voulons, nous pourrions en fait, à l'intérieur de cette pile , définissez une grille. Nous pouvons donc simplement ouvrir notre grille, ouvrir et fermer. Ensuite, à l'intérieur de la grille, nous pouvons définir nos définitions. Mais avant de définir nos définitions, nous voudrions faire définitions de colonnes à l'intérieur de cette grille. Les définitions de colonnes nous permettent spécifier la taille de chaque colonne. Et en fonction de ce que nous spécifions que le nombre de colonnes que nous obtiendrons. Donc, vous verriez probablement quelque chose comme l'auto. Auto signifie quelle que soit la taille du contrôle lorsqu'il entre. C'est la taille de cette colonne. Nous pouvons également utiliser une valeur plus élevée et dire, eh bien, respecter cette colonne exactement autant d'espaces. Et puis, comme je l'ai dit, autant que nous avons mis dans ce nombre de colonnes que nous recevons. En ce moment, j'ai défini trois colonnes différentes. Deux d'entre eux sont automatiques, l'un est une valeur fixe de 30. C'est vrai ? Maintenant, à l'intérieur de ces colonnes, je peux définir différents contrôles, n'est-ce pas ? Disons donc que je voulais un bouton à l'intérieur de la première colonne. Et le bouton est une étiquette à fermeture automatique. Et que voulez-vous à l'intérieur de ce bouton ? Tout d'abord, je veux qu'il soit dans la colonne Grille. Je peux donc dire colonne ici. Et je vois que vous devriez être dans la première colonne de la grille. Il commence donc à compter à 0. Donc, ce serait 012, non ? Donc en voyant la position 0 de la grille, ou laissez-moi la taper ici. La colonne de la grille est égale à 0. Cela signifie que je veux que vous soyez dans la première colonne. Et disons que je voulais que le texte soit le bouton Test. Et la largeur. Supposons qu'une demande de largeur soit 100. Et si je le voulais, je clique sur événement, on pourrait mettre ce que nous voulons, on peut le mettre dedans, n'est-ce pas ? Voyons donc, c'est tout pour la première fois. Nous allons juste dupliquer cette ligne. Donc je viens de contrôler D. Et puis je veux celui-ci en troisième année, qui serait la deuxième colonne de la grille, désolé, dans la troisième colonne, qui sera une colonne avec le numéro deux. Souvenez-vous donc de 012. Et celui-ci va avoir la même largeur. Très bien, donc c'est comme ça que vous pouvez commencer à définir vos commandes. Vous savez vraiment quoi faire si je le veux ? Eh bien, laissez-moi renoncer toute autre modification et testons ce vieux. Alors allez-y et lancez-le. Et pendant que vous l'exécutez, je vais juste vous guider à travers ce que vous regardez sur mon écran. Vous pouvez donc voir que les bordures, la mise en page sont plutôt bizarres et c'est à cause des différentes valeurs que nous utilisons. Dix étaient donc à gauche, 50 en haut, Haïti, puis dix en dessous, à droite. C'est donc à gauche, en haut, à droite, en bas. Et ce que nous remarquerions aussi, c'est que les boutons dans les colonnes automatiques. Et puis, parce que nous avons un écart de 30, c'est ainsi que nous avons créé cet espace entre les deux, n'est-ce pas ? Ce sont donc de petites choses de design. Ce sont des choses que vous voudriez peut-être faire différemment. Mais le fait est qu' une fois que vous savez ou avez une appréciation du fonctionnement des Leodes, vous pouvez le faire fonctionner comme vous le souhaitez. Vous pouvez donc aller de l'avant et jouer avec eux. Vous avez des mises en page différentes. Comme je l'ai dit, vous avez la disposition verticale de la pile. Et vous pouvez en fait obtenir plus d'informations sur les différentes mises en page à partir de la documentation de la mise en page Dotnet Maui. Vous avez donc la disposition de la pile, vous avez la disposition absolue. Nous avons regardé la grille, vous avez les mises en page flex flokes est presque comme si vous utilisez un jour Bootstrap, je vais exécuter des parallèles parce que plus que probablement vous avez été un web développeur à un moment donné et vous avez utilisé Bootstrap. Ainsi, avec Bootstrap, vous avez un rôle et il y a jusqu'à 12 espaces de colonnes. Et si vous dépassez cela, il s' enroule dans l'espace suivant. C'est tout ce que les flocons fonctionnent. Vous mettez donc autant d'éléments de gauche à droite. Ensuite, quand il les dépasse dans l'espace, il s'enroule et il tombe et tombe et tombe et tombe, non ? Donc je suis sûr que vous pouvez, vous ne faites que regarder ces choses. Votre cerveau devient fou. Et si vous regardez à gauche ici, vous verrez d'autres types de Laozi de la grille. Vous avez le SAR, nous avons parlé de la grille ou de l' idée, du classeur. Vous l'avez absolument dû. Vous avez la disposition horizontale de la pile et celle que nous avons examinée, la disposition verticale de la pile. 6. Définir des valeurs mondiales de balisage: Bienvenue les gars de retour. Dans cette leçon, nous allons examiner XAML, balisage, extension snow. plupart du temps. Nous allons avoir XAML que nous voulons normaliser, n'est-ce pas ? Prenons donc, par exemple, revenant à la page principale, nous avons des étiquettes différentes et il se peut que vous ayez plusieurs étiquettes sur un champ particulier et que vous voudriez qu' elles soient toutes de la même taille. Maintenant, si vous avez cinq étiquettes et que vous définissez la taille cinq fois, il serait fastidieux de la changer cinq fois, puis de la multiplier par 50. Je pense que vous arrivez là où je vais. Les extensions de balisage nous aident donc à rester comme une valeur statique dans le code derrière, puis à référencer cette valeur statique. Donc, si nous devons apporter un changement, nous l'avons fait une fois. Voyons donc ce que cela prend. Si nous passons au code derrière notre page principale sur XAML, la première chose que nous pouvons faire est définir notre valeur que nous voudrions. Je vais donc dire const public, double. La taille de la police est égale à 22. Très bien ? C'est donc la taille de police que nous savons que nous voulons. Et je vais suivre la convention de dénomination appropriée. Puisqu'il s'agit d'un public ou d'une propriété, je vais le faire lettres majuscules ou commencer par une itération épithéliale. Ensuite, à l'intérieur de cette classe, je dois définir ou au lieu du même fichier avec cet espace de noms, je vais devoir définir une autre classe, donc une classe publique. Ensuite, je vais dire la taille globale de la police. Et puis la convention de dénomination exige que je l'ajoute avec l'extension de mot. Et puis je vais le laisser hériter de l'extension de balisage, qui me dira alors que je dois implémenter l'interface. L' implémentation de l'interface pour cela est donc fournie avec une méthode appelée fourniture de valeur. Et il faut injecter un fournisseur de services d'IA. Et ensuite, nous devons préciser ou ce que nous voulons ici. Donc je vais juste dire retourner la page moyenne, tourner la page moyenne. Et c'est le nom de la classe ici. Laissez-moi juste m' assurer qu'il sait, oh, j'ai mal divisé le retour, retourne la page principale. Ensuite, nous verrions la taille de la police. Donc, en substance, lorsqu'il s'agit de référence, il sait simplement renvoyer la taille de la police au contrôle de page principale. Et ensuite, la page principale serait en mesure d'y accéder en conséquence. Ainsi, dans notre XAML, ce que nous voulons faire avant tout, est défini l'espace de noms en haut. Nous devons donc lui faire savoir qu'un nouvel espace de noms est là. Nous allons donc dire deux-points d'espace de noms XML et XML, puis nous lui donnerons un nom. Je peux donc voir ma taille de police ici. Très bien ? Et ensuite, ça va être égal à. Et puis je dirai CLR, noms de trait d' union, deux-points, puis l'espace de noms qui cause avec l'endroit où il a été défini. Il a été défini dans l'espace de noms, mon premier Mawi Up. Il s'agit donc de la valeur de l'espace de noms qui existe. Très bien. Donc, tout ça n'est qu'un câblage. Par conséquent, aucune page principale ne sait comment faire référence à la taille de la police. Maintenant, lorsque je veux faire référence à la taille de la police, et utilisons cette étiquette comme exemple. Au lieu d'écrire la valeur comme nous l'avons dit, la taille de la police, ce que je ferai est de faire référence à un alias d'espace de noms ici que j'ai défini. Voyons donc, allez dans cet espace de noms, puis donnez-moi la taille de police globale. Très bien, donc vous avez dit que c'était terminé automatiquement pour moi. Je n'ai pas eu à toucher cet orteil car il identifie déjà que depuis cet espace de noms, je peux obtenir cette valeur. Quelle est la taille de police globale ? Une fois de plus, la taille globale des polices est ce que nous avons défini. Par conséquent, si l'extension 12e et la taille globale de la police est le nom de la classe, nous n'avons pas besoin de l'extension de mot lorsque nous y faisons référence dans l'accord. Donc, simplement en faisant cela, nous pouvons avoir ce peu de code n'importe où sans vouloir utiliser cette taille de police spécifique. Comme vous le montrerez, allez dans le shell de l'application et nous changeons la page principale. Et lorsque nous testons cela, vous constatez que notre étiquette s'affiche correctement. Une fois de plus, l'objectif de cet exercice est de vous montrer comment définir ces valeurs statiques pour un accès et une portée plus globaux. Ainsi, si vous avez besoin de faire face au changement, vous n'avez qu'un seul endroit qui a fait le changement. Et cela peut affecter plusieurs contrôles. 7. Définir des valeurs spécifiques à la plateforme: Très bien les gars, alors jetons un coup d'œil au balisage spécifique à la plateforme. Ce qui se passe donc, c'est la rumeur selon laquelle nous avons un ensemble de pages et de contrôles de base. Et nous devons desservir plusieurs appareils. Certains appareils peuvent avoir certaines considérations de conception que d'autres. Et Mawi nous permet de spécifier très facilement certaines valeurs pour certains systèmes d'exploitation dans le code. Ainsi, il va consigner ou rendre contextuellement le contenu en fonction de la montre est déclaré. Commençons donc par voir comment vous verriez sur quel appareil nous voulons, quelle que soit la marge ou le rembourrage avec notre disposition verticale de pile. Pour les contextes, je suis de retour dans la mise en page de ce fichier XAML. Dans ce dossier, ce que je vais faire , c'est lui donner un genou, non ? Donc je vais voir que le nom de x deux-points est égal à, et puis c'est un C Leo. Le stock. Ça devrait être bloqué. Laissez-moi faire la mise en page de la pile. Très bien, maintenant que nous avons ce nom dans le code derrière, je peux faire référence à ce que c'est juste dans le constructeur de mise en page. Et si je voulais dire que le remplissage des points de mise en page de la pile V. Je veux que cela soit égal à quelque chose de différent si c'est une plate-forme iOS plutôt que si c'est autre chose, non ? Je peux donc voir les informations sur l'appareil, qui est une classe spéciale qui nous est donnée qui nous permet de spécifier la plateforme. Donc, la plate-forme info point de l'appareil, si elle est équivalente à et puis nous avons accès à la plate-forme de l'appareil, qui est à peu près une énumération. Dès que je le vois, on y va. Donc Devise Platform. Nous pouvons spécifier pour Android, iOS , Mac, catalyseur, macOS, Diesen, etc. Vous voyez ici tous les appareils que vous pouvez réellement essayer de faciliter le commerce. Disons donc que pour iOS, si la plate-forme de l'appareil est pour iOS , je vais simplement utiliser un opérateur ternaire ici. Nous voulons ensuite définir une nouvelle épaisseur, qui est l'objet ou le trait à utiliser pour le rembourrage. Laissez-moi, laissez-moi revenir un peu en arrière. Donc, s'il s'agit d'iOS , nous voulons une nouvelle épaisseur. Et disons que je voulais 30 sur dix, 30 par dix, etc. Sinon, je voudrais qu' il n'y ait que 30 ans, tous les nôtres. Je peux donc simplement dire ou en obtenir 25 tous les nôtres, n'est-ce pas. Et c'est tout. Juste là. Je précise simplement que je veux que le rembourrage soit différent. Si nous utilisons un appareil iOS, c'est ce que je veux. Sinon, pour tout autre appareil, faites-le. Donc, évidemment, si vous vouliez répondre à d'autres scénarios, vous voudrez probablement utiliser une instruction if ou une instruction switch. Pour qu'il ne s'agisse pas d'un opérateur ternaire, nous ne comparons qu' un à la fois. Très bien ? C'est donc tout ce que nous allons faire dans le code derrière. Non, sinon, dans le balisage, ce que nous pourrions faire est de mettre les attributs sorte que le rembourrage soit égal à et ensuite nous pourrions imposer notre propre plateforme ici. Très bien vu sur la plateforme. Ensuite, nous avons juste énuméré toutes les plateformes potentielles. Et ici, nous pouvons recommencer avec iOS et définir les valeurs que nous venons d'utiliser. Laissez-moi juste voir si je peux aller les attraper rapidement. Quelques valeurs arbitraires. Je ne prends pas vraiment ça au sérieux, non ? Non. Mais nous pouvons les définir. Ils devraient être entre guillemets simples. guillemets simples parce que nous sommes déjà à l'intérieur des guillemets doubles ici. Par conséquent, de vouloir utiliser des guillemets simples pour spécifier les valeurs iOS et toute autre valeur. Et puis comme nous l'avons fait, nous avons fait iOS puis par défaut, donc virgule. Ensuite, vous verrez par défaut l'une des options, ce qui signifie que tout ce qui n'est pas iOS, quelle valeur voulez-vous ? Je veux que ce soit, voyons voir, 30 ans, non ? C'est donc une bonne façon de spécifier simplement que le rembourrage sur la plate-forme iOS tel ou tel. On pourrait aussi faire quelque chose avec la couleur de fond, non ? Je pouvais donc voir la couleur de fond ici, n'est-ce pas ? Et puis faites la même chose sur la plateforme. Sur la plateforme iOS, je veux que ce soit vert, non ? Sur Android, je veux que ce soit Alice, bleu, etc. Pour que nous puissions continuer et encore. C'est donc tout ce que nous pouvons faire, des configurations spécifiques à la plateforme dans le même balisage. Encore une fois, en utilisant notre base de code singulière au maximum. 8. Ressources partagées: Salut les gars, bienvenue. Cette fois-ci, nous allons examiner les ressources partagées. ressources partagées seraient une extension de ce que nous avons examiné plus tôt avec l'extension, sauf qu'elle ne sera pas si étroitement liée à un seul contrôle, n'est-ce pas ? Commençons donc par ajouter une nouvelle classe, cliquez avec le bouton droit de la souris sur Ajouter une nouvelle classe. Ensuite, je vais appeler cela des ressources partagées. Cliquez sur Ajouter. Et ensuite, nous fabriquons celui-ci en classe statique. Il s'agit donc d'une classe statique appelée ressources partagées. Et ici, nous pouvons définir des propriétés publiques statiques en lecture seule, n'est-ce pas ? Commençons donc par dire que nous voulons peut-être une certaine couleur pour notre police. Donc public statique, statique, en lecture seule, et je vais appeler ça gonfle. Le type va être de couleur. La couleur est donc un type, et appelons-la couleur de police. J'épele de la couleur avec un U , donc tu vas toujours me voir faire ça. Et ensuite, nous allons lui donner une valeur, non ? Donc, la couleur de notre police sera ici des points de couleur. Et nous pouvons le faire de fin, de RGB, et cetera. Faisons une chose RVB qui est assez facile pour s'en sortir. Donc, si nous voulions qu'il s'agisse d'un RVB rouge, vert et bleu, nous pouvons utiliser des entiers compris entre 0,255. Si vous connaissez le CSS, cela ne devrait pas être un concept étranger pour vous. Nous pouvons donc utiliser quelque chose comme 0 virgule 0 0 virgule 25 pour l'amour de l'argument. Cela nous donnerait donc une couleur de police plus bleue. Très bien, nous pouvons également définir d'autres valeurs pour que je puisse définir ma couleur d'arrière-plan, que je puisse définir la couleur de premier plan. Je pourrais régler toutes sortes de choses. Une fois que j'ai le type de données et je lui donne un nom et je peux lui donner une valeur. Il peut être placé dans ce fichier de ressources partagées statiques. Notez que pour utiliser cette ressource ou l'une des ressources de ce fichier, j'ai juste besoin d'accéder à un contrôle. Laissez-moi passer à la nouvelle page 1. Et puis ici, je veux faire quelque chose de similaire où je dois inclure l'espace de noms ou XML et le deux-points S. Et puis je vais lui donner un nom, appelons-le des ressources. Et je vais dire que vous êtes égal à CLR, noms d' union, deux-points. Et l'espace de noms de mon fichier de ressources partagées est en effet toujours mon premier MAOI une fois, bien sûr, il va dans un dossier, nous ne sommes pas p et les tensions dans une structure de dossiers sont trop difficiles ici car j'aurais pu facilement le mettre dans le dossier des ressources. Alors, laissez-moi vraiment le faire. Je vais donc déplacer ce fichier de ressources partagées vers le dossier Ressources. Ensuite, ce que je vais faire, c'est synchroniser l'espace de noms pour que nous puissions nous assurer qu'il se trouve dans l'espace de noms actuel. Donc, à ce stade, lorsque je l'inclus dans le XAML, je dois m'assurer pointer vers l'espace de noms du panier. Nous étions donc un nouvel espace de noms CLR page 1. L'espace de noms, Désolé, est mon premier chemin vers le haut. Dots ressources, n'est-ce pas ? Nous savons maintenant où se trouve ce bouton. Pour y faire référence dans le code où je veux que cette couleur soit utilisée. Disons que je le veux dans l'étiquette ici. Ensuite, j'opterais pour l' attribut qui dit texte, couleur est égale à. Et puis ouvrez mon attelle bouclée. Tout d'abord, je dirais x deux-points statiques. Donc, il sait que, d'accord, je reçois ma valeur pour mon membre statique. Alors, membre statique, laissez-moi bien comprendre mon orthographe. Et c'est égal à, puis nous voyons une ressource qui est notre alias pour notre nouvel espace, les ressources partagées de Sherry, qui est le nom de notre fichier, puis les couleurs de police. Nous voyons donc aller chercher la couleur de la police à partir de ce fichier de ressources partagées statiques. N'importe où dans notre code que nous voulons partager cette couleur. Nous pouvons faire quelque chose comme ça. Et nous pouvons avoir une fois de plus, autant de ressources répertoriées ici que nous savons nous voulons rester cohérents dans l'ensemble de l'application. Vous pouvez donc aller de l'avant et tester cette vieille. Vous pouvez aller de l'avant et l'exécuter, placer à plusieurs endroits et simplement aller de l'avant et vous assurer que la couleur que vous auriez définie ici est réellement affichée dans ces zones. 9. Naviguer dans plusieurs pages: Dans cette leçon, nous allons envisager configurer la navigation volante, qui est un type de navigation dans lequel une fenêtre de l'élément de menu sélectionné passe de ce côté vers le centre. de l'écran. Et il y aurait généralement ce que nous appelons le hamburger. Ces trois lignes en haut, à gauche ou à droite de l'écran, je pense qu'il est plus probable que vous le verrez à gauche. Mais nous verrons ces pilules de hamburger ici. Lorsque nous le touchons, nous devrions être en mesure de sélectionner la page sur laquelle vous souhaitez accéder , puis cette page s'affichera. Jetons donc un coup d'œil à ce que nous devons faire pour que ce soit ouvert. Désolé, le voyage commence avec notre shell d'application. Jusqu'à présent, nous avons interagi avec ce fichier chaque fois que nous voulions modifier la page de démarrage, n'est-ce pas ? Nous nous concentrons donc sur l'exemple de mise en page. Nous l'avons changé, nous nous sommes concentrés sur la page principale ou la modifions, etc. Ce qui se passe, c'est que nous pouvons réellement avoir plusieurs nœuds à l'intérieur de cette zone. Je vais donc en créer une pour chaque page que nous avons jusqu'ici. Nous avons donc des mises en page, par exemple, et je vais également modifier le titre. d'espace de disposition et exemple de mise en page des redevances. Nous avons également une nouvelle page 1. Et bien qu'il ne s' agisse pas de nouvelles officielles, mais elles sont là. Alors, travaillons simplement avec eux. Et je ne pense pas que nous ayons d'autres Pedro. Oui, nous avons une page de test. J'ai donc une page de test. Et je vous montre vraiment que peu importe que ce soit la page XAML ou la page C-sharp, chacune d'entre elles est une option, n'est-ce pas ? Mais lorsque nous exécutons, notre application ne verra rien de visiblement différent en dehors de celle qui figure en premier dans la liste. Ce qui se passe, c'est que nous devons voir une série sur le comportement des flux. Ensuite, nous l'avons changé de handicapé pour s'envoler. Très bien, nous allons donc faire cet ajustement et tester. Lorsque notre application est en cours d'exécution, nous verrons que nous avons nos pilules de hamburger. Quand on tape dessus, on voit qu'il s'envole. Et avec chaque titre que nous avons donné, nous pouvons le voir apparaître, alors nous cliquons sur Exemple de mise en page. On y va. Si nous choisissons une nouvelle page, nous y allons. Très bien. Ainsi, chaque page que nous avons créée jusqu'à présent, nous pouvons facilement basculer entre elles en utilisant cette méthode de toute façon, c'était assez facile. Je suis sûr que vous réalisez que c'était un exercice très facile à réaliser. Maintenant, si nous voulions des icônes sur ces éléments de menu, ce serait aussi simple qu' à l'intérieur du contenu du shell. Nous pourrions simplement dire icône et ensuite lui donner le chemin. Alors essayons peut-être les bots dotnet, je pense que la page principale comment faire référence au Dotnet, mais je voulais juste m'assurer que j'obtiens ce chemin correctement. Et bien, il y a juste le chemin là-bas. Essayons donc cela. Mettons simplement le Dotnet acheté sur la page principale et essayons cela. On y va. Donc, lorsque je mets l'icône dotnet, mais lorsque je touche le menu, je vois maintenant cette icône. Donc, n'importe quel PNG, n'importe quelle ressource que vous ajoutez. Et encore une fois, vous ajouteriez ces ressources ici, ce qui se trouve ici en images. Vous pouvez toujours ajouter ces images selon vos besoins. Ensuite, il vous suffit d'ajouter l' icône à chaque élément de menu. Cela donne donc à votre application un peu plus de caractère et un peu plus, aspect et une sensation plus agréables au fur et à mesure que vous avancez. Maintenant, le prochain type de navigation que nous voudrions examiner est la navigation par onglets. navigation par onglets provient généralement du bas de l' écran et vous aurez alors une icône par onglet que vous pouvez sélectionner et voir le début de la période moderne, n'est-ce pas ? Nous sommes donc toujours ici dans la coquille. Et ce que nous voulons faire, c'est créer une page à onglets. Je vais donc ouvrir une nouvelle balise, et celle-ci sera une barre d'onglets. Et puis, à l'intérieur de la barre d'onglets, nous allons avoir des onglets. Nous avons donc l'étiquette de la baignoire. Et puis à l'intérieur de cette balise de tabulation, il y aurait ce contenu Shell. Très bien, alors faisons-en quelques-uns. Je vais donc créer quelques baignoires, trois autres baignoires, puis mettre le contenu de la coquille dans chacun d'eux. Très bien, donc nous sommes en train de passer de la navigation à onglets, n'est-ce pas ? Et comme vous pouvez le constater, c'est assez cohérent. La syntaxe n'est donc pas la syntaxe la plus difficile à suivre. Et si vous avez déjà la mouche ou le comportement le permet. Je vais donc vous montrer comment les deux peuvent combiner pour donner une expérience utilisateur particulière. Très bien, nous sommes ici dans l'application. Si je vais aux pilules de la barre de navigation, je ne vois rien. Si je regarde ci-dessous, je ne vois rien. Cependant, lorsque je clique, vous remarquerez qu' il est en train de changer. Il y a donc évidemment quelque chose, mais nous avons besoin de quelques éléments supplémentaires. Par conséquent, l'icône ne serait pas dans le contenu de la coque, mais dans la baignoire. Ainsi, l'onglet lui-même peut obtenir un titre. Donc, je pourrais dire ici que c'est un pH. Et je pourrais aussi donner cette icône à cette icône. Eh bien, laissez-moi, je pense que je l' ai déjà dans le presse-papiers. On y va. Très bien, nous allons donc tester cette première étape. Très bien, donc on y va. Nous avons donc ici la page principale avec l'icône. Très bien, donc vous pouvez simplement aller de l'avant et le faire. Je n'ai donc pas d'autres icônes ou sans garder la même icône pour les autres baignoires. Mais je vais bien sûr changer l' étiquette, la mise en page. Cet onglet serait une nouvelle page. Et le dernier était la page de test. Après avoir effectué toutes ces modifications, je réexécute mon application. Et quand je jette un coup d'oeil maintenant, je vois mes onglets, non ? Il s'agit donc de la navigation par tabulation. Jolie et facile. La deuxième consiste à naviguer entre toutes les pages que vous avez dans votre application. Vous avez le menu déroulant, et vous avez la page à onglets. 10. Conclusion: Très bien, les gars, félicitations d'être arrivés jusqu'ici. Nous avons créé avec succès notre toute première application mobile à l'aide de dotnet Maui. Sachez que ce n'est pas grand chose, pas grand chose à regarder en ce moment. Il n'a pas vraiment de fonctionnalités réelles, mais nous avons au moins les concepts fondamentaux sous nos ceintures. Nous savons comment créer de nouvelles pages. Nous comprenons où nous devons aller pour accomplir certaines choses. Nous comprenons comment naviguer dans le code derrière ou configurer des événements, comment générer des événements visuels à l'aide du code C-Sharp. Nous avons tous ces exemples ici, et nous savons également comment naviguer entre plusieurs pages. Donc, à ce stade, nous pouvons simplement ajouter ceci, le contrôle source. Vous pouvez rechercher le lien pertinent dans les ressources jointes pour cette vidéo particulière. Et quand nous reviendrons, nous allons créer une vraie application à l'aide de Dotnet Maui.