‫Content de te revoir.
‫Et cette vidéo, nous allons examiner de plus près Zemel et vous voudrez peut-être l'examiner.
‫Zemel est un type de langage XML, comme vous pouvez le voir ici en bas.
‫Et en fait, je vais le faire glisser encore plus loin pour nous permettre d'écrire notre interface utilisateur afin que nous n'ayons pas besoin
‫d'aller de l'avant et de faire glisser tous les éléments dans notre interface graphique et de l'ajuster là-dedans.
‫Nous pouvons faire tout cela dans le code.
‫Maintenant, vous pourriez dire que je suis plus un gars visuel.
‫Je veux aller de l'avant et faire glisser les choses et ça me va pendant que vous pouvez le faire.
‫Mais vous êtes limité à simplement traîner alors.
‫Et avec l'exemple, vous pouvez ajuster beaucoup et vous pouvez ajuster non seulement ces choses comme cet emballage, mais vous avez vu
‫dans la dernière vidéo que vous pouvez faire beaucoup plus et nous verrons ce qu'est la liaison de données, quelles
‫propriétés ou propriétés de dépendance et ainsi de suite, ce sont des choses que vous pouvez faire avec Zemel, qui
‫nous permettent de créer de très bonnes interfaces utilisateur qui sont facilement maintenables.
‫Donc et ici ce que vous pouvez voir est cette fenêtre, tout d'abord.
‫Donc, à peu près généralement, vous avez une balise d'ouverture et une balise de fermeture.
‫Si vous connaissez le HTML, vous le connaissez peut-être.
‫Vous avez les accolades de coin et vous les avez également fermées.
‫Donc moins que signe le mot et ensuite plus grand que sine.
‫Et vous voyez que nous avons la même chose avec la fenêtre et ici aussi.
‫Puis une fermeture.
‫Vous avez également la barre oblique juste avant le mot.
‫C'est donc la même chose pour la grille, pour la fenêtre pour tout le reste.
‫Donc, si je veux, par exemple, utiliser un bouton, je peux continuer et le faire.
‫Et si j'utilise le signe plus grand que, cela crée automatiquement la balise de fermeture.
‫Maintenant, ce que je peux faire, c'est faire tous les ajustements à l'intérieur de la balise d'ouverture.
‫Comme vous pouvez le voir ici, Button, je peux aller de l'avant et, par exemple, y ajouter du contenu.
‫Il y a donc beaucoup de propriétés différentes, comme vous pouvez le voir.
‫Et je vais juste utiliser la propriété content et je vais juste utiliser quelque chose comme Click me.
‫Maintenant, il y a ce bouton au centre, comme vous pouvez le voir, et il dit, cliquez sur moi.
‫Bien sûr, nous n'avons pas de hauteur.
‫Nous n'avons pas de compte avec tous ces types de propriétés qui ne sont pas encore définis.
‫Mais disons que je veux que ce bouton fasse 50 pixels de haut, puis que je veux qu'il fasse 100 pixels de large, comme vous pouvez le
‫voir.
‫Maintenant, c'est mon bouton que j'ai créé.
‫Bien sûr, j'aurais pu le faire glisser, mais faire un exemple est assez utile.
‫Et maintenant?
‫Quelque chose que je n'ai pas encore trop abordé et qui ne sera requis que plus tard dans le
‫cours.
‫Mais généralement, ce que vous pouvez voir ici, ce sont X et L et S, ce que cela signifie, par exemple, l'espace de noms.
‫Et Zemel signifie Extensible Application Markup Language.
‫Alors permettez-moi d'ajouter cela ici.
‫Ajoutons un commentaire.
‫Je vais utiliser un commentaire comme ça.
‫Comme vous pouvez le voir, c'est Greeno et c'est à peu près un commentaire.
‫Je peux donc écrire quelque chose ici, comme Zemel est un
‫langage de balisage d'application extensible.
‫D'accord.
‫Maintenant, le bouton, comme vous pouvez le voir, est ici.
‫Et maintenant, allons de l'avant et faisons d'autres choses avec des boutons.
‫Créons donc des boutons supplémentaires, s'il vous plaît.
‫Allez-y et créez un autre bouton.
‫OK, j'espère que vous l'avez essayé, utilisez simplement le nom du bouton ici ou le mot clé, puis continuez et créez le
‫bouton supplémentaire.
‫Maintenant, vous pourriez vous demander, oh --, il ne se positionne pas correctement.
‫J'ai donc ce bouton et il a le contenu avec.
‫Salut.
‫Maintenant, pourquoi se trouve ce bouton cliquez sur moi maintenant ?
‫Eh bien, c'est dans la grille et ça a disparu parce que nous utilisons une grille pour que les boutons n'apparaissent pas les uns sur
‫les autres et ainsi de suite.
‫Donc si vous avez essayé, vous l'avez vu.
‫Et nous examinerons également les grilles plus tard.
‫Mais je voulais juste te montrer ça pour le moment.
‫D'accord.
‫Alors débarrassons-nous à nouveau de ce bouton.
‫Maintenant, nous avons ce bouton cliquez sur moi et exécutons simplement l'application afin que nous puissions
‫voir à quoi cela ressemble réellement dans la vraie vie et comment tout cela peut rendre notre vie belle en cliquant simplement dessus.
‫Donc, comme vous pouvez le voir, je peux le survoler et il change de couleur et je peux
‫cliquer dessus et il fait cette petite animation de clic et c'est tout.
‫Mais rien ne se passe lorsque vous cliquez dessus.
‫Et il existe plusieurs façons de mettre en œuvre une fonctionnalité de clic.
‫Et nous le ferons plus tard.
‫Droit.
‫C'est ainsi que nous pouvons créer un bouton dans l'exemple.
‫Maintenant, il y a beaucoup d'éléments supplémentaires auxquels nous pouvons accéder ici ou propriétés.
‫Par exemple, nous pouvons accéder à la propriété font size et augmenter la taille de la police jusqu'à, disons, 32.
‫Alors maintenant, le bouton n'est pas aussi large que le texte, alors ajustons la largeur.
‫Alors maintenant, ça va.
‫Encore une fois, nous pouvons voir tout le texte du bouton, mais lorsque vous jouez avec la taille de la police
‫et tous ces éléments, vous devez faire attention à ce qu'il s'intègre toujours.
‫Maintenant, ce que vous pouvez également faire, c'est que vous pouvez, au lieu d'ajouter le contenu ici à la propriété de
‫contenu, vous pouvez simplement l'ajouter dans le texte du bouton.
‫Donc ici, je vais dire quelque chose comme, cliquez sur moi.
‫Et comme vous pouvez le voir, il est là.
‫C'est donc le contenu entre les balises où vous avez votre contenu.
‫C'est donc une façon de procéder.
‫L'autre consiste simplement à utiliser la propriété content ici et à affecter le texte comme ceci, comme nous l'avons vu
‫auparavant.
‫Maintenant, ce bouton de balise de fermeture n'est pas nécessaire si vous fermez simplement le bouton tout de suite comme ceci afin que vous puissiez le
‫fermer de manière plus courte comme cela afin que vous n'ayez pas besoin du bouton de balise de fermeture.
‫Et une autre façon de concevoir un bouton est la suivante.
‫Donc, si vous voyez quelque chose comme ça, c'est très bien aussi.
‫Vous créez donc la balise bouton la fermeture et celle d'ouverture.
‫Et ici, vous avez le bouton point et vous pouvez ensuite ajuster toutes les différentes propriétés que vous souhaitez.
‫Comme vous pouvez le voir, il existe de nombreuses propriétés différentes auxquelles nous pouvons accéder, par exemple,
‫la taille de la police comme celle-ci.
‫Je peux donc définir la taille de la police sur 72 comme cela, par exemple, et une autre propriété de bouton que je souhaite ajuster car
‫disons le contenu pour que je puisse continuer et que le contenu soit élevé là-bas.
‫Alors maintenant, vous voyez qu'il y a cet énorme bouton avec une taille de police de 72 et il dit bonjour.
‫C'est donc l'approche numéro deux.
‫Et il y a même autre chose que vous pouvez faire.
‫Ajustons donc ce bouton encore plus loin.
‫Alors disons que le contenu, je ne veux pas avoir juste un texte de salut là-bas.
‫Je veux aller encore plus loin.
‫Je veux ajouter un panneau d'emballage.
‫Maintenant, ce que fait le panneau, c'est qu'il enveloppe simplement tous ses contrôles ou éléments les uns à côté des autres, de
‫gauche à droite.
‫Ainsi, le premier élément sera, disons, un bloc de texte.
‫Et nous avons vu quels blocs de texte sont du texte simple.
‫Et celui-ci va dire multi.
‫Maintenant, j'ai besoin d'un autre bloc de texte et du troisième.
‫Donc ça dit plusieurs, trois fois.
‫Mais maintenant, ce que je peux faire, c'est ajuster la couleur de chaque aspect.
‫Donc pour chaque bloc de texte.
‫Alors disons que je change cela en bleu, alors cela a le premier plan.
‫Donc le premier plan est la couleur du premier plan et celui-ci sera rouge.
‫Et enfin, mon dernier bloc de texte aura le premier plan en blanc.
‫Et maintenant, au lieu de multi, multi, multi, c'est un bouton multi couleur.
‫Et maintenant, peut-être que nous voulons ajuster un peu la taille de la police, réduisons-la également le premier bouton, comme
‫vous pouvez le voir, il est masqué car la grille n'affiche que le dernier élément s'ils ne
‫sont pas affectés dans la bonne grille structure, que nous verrons plus loin.
‫Mais débarrassons-nous du premier bouton que nous avions.
‫Et maintenant, définissons également une taille de bouton.
‫Alors allons-y et utilisons le bouton avec lequel sera, disons deux cents.
‫Et un bouton troisième hauteur, qui sera de 100.
‫Et comme ça, nous y sommes et la taille de la police est trop grande pour tout contenir.
‫Donc, si nous allons de l'avant et faisons cela avec 24 maintenant, c'est dedans.
‫Donc, si j'exécute le code, j'aurai un bouton multicolore, qui contient plusieurs blocs de texte différents.
‫Et nous y sommes.
‫Donc, juste pour que vous voyez, il existe plusieurs approches différentes pour le faire.
‫Si vous souhaitez y saisir plusieurs aspects, vous pouvez utiliser ce panneau.
‫Vous pouvez même utiliser une grille dans le bouton et utiliser la balise grid afin de créer plusieurs
‫contrôles différents à l'intérieur de votre bouton.
‫Mais c'est quelque chose que nous aborderons plus tard.
‫Pour l'instant, il est juste important que vous compreniez que cet exemple vous permet de faire beaucoup de choses fantaisistes
‫avec votre interface graphique sans avoir à glisser-déposer et également avec un contrôle total sur l'apparence des choses et ce qu'elles
‫font.
‫Ce que je vais faire, c'est commenter cela et vous montrer comment faire la même chose que nous avons vu ici
‫avec le code, car nous l'avons vu avec le code Zemel.
‫Mais nous pouvons aussi le faire en code derrière, c'est-à-dire en C Sharp, ce que nous avons à peu près appris
‫pour toute la classe jusqu'à présent ou pour tout le cours.
‫Entrons donc dans le code derrière.
‫Comme vous pouvez le voir, il existe un bon fichier d'exemple, qui est celui que nous avons ouvert
‫ici, la démo de la fenêtre principale et notre fichier d'exemple a un code derrière le fichier, qui est un Zemel total.
‫Ce fichier de cas et celui-ci est un fichier C sharp, ce qui signifie que nous avons une classe partielle C sharp
‫ici, que nous pouvons maintenant utiliser pour ajuster ou créer notre interface utilisateur.
‫Et comme vous pouvez le voir, cela s'appelle Main Window et hérite de window.
‫Et ici, nous avons une méthode appelée Main Window, qui est similaire à la méthode principale de nos applications console que
‫nous avons vues jusqu'à présent.
‫Celui-ci est appelé dès l'ouverture de la fenêtre ou dès le démarrage de l'application.
‫Et comme vous pouvez le voir ici, il y a un composant initialisé appelé qui initialise simplement tout
‫ce qui est requis pour que notre fenêtre s'exécute.
‫Par exemple, il initialise le titre et s'initialise à la taille et ainsi de suite.
‫Et maintenant, nous pouvons aller de l'avant et écrire notre propre code ici.
‫Je vais donc vous montrer comment créer un bouton en premier.
‫Donc tout d'abord, nous avons besoin d'une grille dans laquelle nous pouvons affecter ce bouton.
‫Je vais donc l'appeler grille, qui est une nouvelle grille.
‫Ensuite, j'ai dit le contenu de ceci à ma grille, mais cela suffira, je dis simplement la fenêtre principale.
‫Il devrait avoir du contenu.
‫Exact, comme nous l'avons vu dans le fichier d'exemple.
‫Donc, la fenêtre de cette balise s'ouvre ici et tout ce qui se trouve entre ces balises d'ouverture et de fermeture est my.
‫Donc à peu près tout ce contenu ici.
‫C'est le contenu de ma fenêtre.
‫Et ce que je dis ici, c'est que le contenu doit être la grille.
‫Nous créons donc une nouvelle grille comme nous l'avons vu ici.
‫Nous avons donc également une grille ici, qui est comme une balise d'ouverture et de fermeture de la grille ici.
‫Et maintenant j'ai dit ça comme son contenu et maintenant je peux ajouter des trucs à cette grille.
‫Par exemple, je peux ajouter un bouton à la grille.
‫Tout d'abord, créons ce bouton et je vais l'appeler BGN va être un nouveau bouton.
‫Maintenant, j'ai ce bouton et je peux ajuster ses propriétés, alors disons que je veux définir la taille de la police de mon
‫bouton et je peux simplement le faire de cette façon.
‫Je peux simplement dire que ça va être quelque chose comme 26.
‫Maintenant, dans notre bouton, comme vous l'avez vu ici, nous avions un panneau wrap, qui est le contenu du bouton.
‫Donc, ce que je vais faire, c'est créer un panneau pour ce panneau et je vais l'appeler un
‫panneau qui sera un nouveau panneau d'emballage.
‫Nous pouvons maintenant ajouter des éléments au panneau d'emballage.
‫Nous ajoutons le panneau wrap au bouton et nous ajoutons le mauvais bouton à la grille.
‫Et la grille fait déjà partie de notre contenu.
‫Alors maintenant, allons de l'avant et créons tous les éléments que nous voulons ajouter au panneau et ajoutés à cela.
‫Nous devons donc d'abord bloquer le texte.
‫Et le bloc de texte, comme vous l'avez vu ici, est celui-ci ici.
‫Nous créons donc un, deux, trois blocs de texte.
‫Le premier va être à 60 va être un nouveau bloc de texte.
‫Et je dis simplement texter le texte.
‫Il a donc un accessoire de texte. , ce texte ici, qui est le contenu.
‫Ainsi, pour le bouton, le contenu est appelé contenu et pour le bloc de texte, le texte lui-même est appelé
‫texte.
‫Nous avons donc eu accès à la propriété text de notre bloc de texte et nous l'avons dit à multi.
‫Ensuite, nous définissons la couleur.
‫Donc, le texte de ce premier plan sera une pensée de pinceaux.
‫Et quelle couleur avais-je d'abord pour le multi et était bleu.
‫D'accord.
‫Alors je vais faire ça en bleu.
‫Et comme vous pouvez le voir, les pinceaux, eh bien, le texte est fait avec des pinceaux ou la couleur du texte est faite avec
‫la classe brushes.
‫Je dois donc utiliser cette classe brushless puis accéder à sa couleur.
‫Donc pinceau de couleur unie de type pinceaux.
‫Et ensuite, je peux l'ajouter au panneau d'enregistrement.
‫Alors maintenant que j'ai le texte connecté au panneau et je le fais en accédant à ses enfants et en y
‫ajoutant mon texte.
‫C'est ainsi que j'ajoute un bloc de texte.
‫Et si nous exécutions ce rien, nous ne verrions rien pour le moment car nous n'avons pas encore ajouté le panneau de représentation
‫au bouton ni le bouton à la grille.
‫Mais nous le ferons dans une seconde.
‫Alors allons-y et ajustons le texte ou ajustons à nouveau ces trois pièces.
‫Donc, ce que nous faisons ensuite, nous ajoutons juste un texte à plusieurs couleurs et le dernier était un bouton.
‫Et maintenant nous avions la couleur rouge et nous avions la couleur blanche.
‫OK, donc j'ai juste copié et collé ces trois lignes car elles sont identiques.
‫Je n'ai pas besoin de créer un nouveau bloc de texte à chaque fois que j'ajoute l'ancien.
‫Et puis je me suis ajusté.
‫Ou ajustez ses valeurs, puis à nouveau sur les panneaux rouges.
‫Maintenant, si ces trois textes dans mon panneau d'emballage et ce que je peux faire maintenant, c'est que je peux ajouter le panneau rouge à mon bouton.
‫Alors bouton, ce contenu va être mon panneau rouge et enfin griller les enfants, cette annonce.
‫Et ici, j'ajoute mon bouton.
‫C'est donc de cela que je parlais.
‫Nous avons donc la grille, nous avons le bouton, nous avons le panneau d'habillage.
‫Et maintenant, nous ajoutons ces textes au panneau.
‫On ajoute le panneau rouge au bouton, on ajoute le bouton à la grille et on ajoute la grille à la fenêtre.
‫Et comme vous pouvez le voir, voici comment vous pouvez le faire avec du code.
‫Et avant d'exécuter le code, ce que je dois faire, c'est aussi commenter la grille.
‫Donc en fait, je ne peux avoir que la fenêtre.
‫Il n'y a donc que la fenêtre dans notre fenêtre principale, par exemple, le fichier et tout le reste du code
‫se trouve dans notre assemblage de fenêtre principale qui se trouve, qui est le code derrière.
‫Ce fichier est donc le code derrière notre fenêtre principale que Zemel.
‫Maintenant, il manque une chose avant de tester cela, c'est que j'affecte un nouveau bloc d'impôt à mon
‫texte.
‫Je dois donc le faire pour les deux de mon texte.
‫Donc le truc c'est qu'on bien, on crée un texte ici et on l'initialise avec un nouveau bloc de texte.
‫Et maintenant, nous devons créer un nouveau bloc de texte et l'attribuer à notre texte avant de pouvoir l'ajouter à notre panneau de
‫représentation.
‫Alors maintenant, nous avons que nous pouvons exécuter le code.
‫Et nous verrons que nous avons également notre bouton multicolore, et comme vous pouvez le voir, nous avons fait la même
‫chose que nous avons fait auparavant avec Zemo, c'était ça ici, qui a aussi l'air assez simple et soigné.
‫Nous l'avons fait avec du code C sharp comme ça.
‫Maintenant, vous pouvez suivre le chemin que vous préférez, mais nous travaillerons principalement avec le Zemel.
‫Je voulais juste vous montrer que vous pouvez tout ce que vous faites avec eux, tout ce que vous pouvez faire avec le code derrière
‫aussi.
‫Mais parfois, il est beaucoup plus logique d'utiliser du code derrière.
‫Ainsi, par exemple, si vous souhaitez ajouter quelque chose de manière dynamique, le code derrière cela a plus de sens.
‫Donc, l'exécuter avec C sharp ou faire les ajustements avec C Sharp et le Zemel a plus de sens
‫lorsque vous avez des interfaces utilisateur statiques.
‫Et au fait, chaque fois que vous créez le fichier Zemel comme nous l'avons ici, il continue et
‫crée ce code derrière le fichier.
‫Il crée donc simplement ce code et l'exécute une fois que l'application commence à s'exécuter, une fois que notre fenêtre principale est
‫interceptée.
‫Donc c'est fait quand même.
‫Et on le fait comme ça avec Zemo ou on le fait manuellement en créant le code.
‫Alors maintenant, vous pouvez bien sûr discuter, hé, il y a quelque chose comme ça avec et décider ce que vous n'avez pas dit,
‫eh bien, je peux le faire très facilement ici.
‫Je pourrais simplement dire bouton cette largeur et je pourrais régler cela à cent cinquante et bouton cette hauteur
‫et régler à cent par exemple.
‫Ensuite, le bouton sera ajusté en conséquence.
‫Et comme vous pouvez le voir maintenant, c'est déjà réparti sur deux lignes, c'est donc Zemel et le code derrière avec code.
‫Je sais que c'était une longue vidéo, mais nous allons voir encore plus de choses cool et fantaisistes dans la prochaine vidéo.
‫Alors je vous verrai là-bas.