‫Content de te revoir.
‫Et cette vidéo, nous allons parler de listbox à panneaux empilés, puis du trois logique et du trois visuel.
‫Alors tout d'abord, allons-y et débarrassons-nous de cette grille car nous n'avons pas encore touché à la grille.
‫Nous n'avons donc pas encore utilisé correctement, mais nous le ferons dans l'une des prochaines vidéos.
‫Donc, au lieu d'une grille, je veux utiliser un panneau de bâton.
‫Un panneau d'état me permet d'empiler des éléments les uns sur les autres afin que je puisse simplement
‫ajouter un bloc de texte ici, par exemple, et je vais simplement écrire le texte comme du texte simple Hello World.
‫Comme vous pouvez le voir, il y a mon texte du monde maintenant.
‫Ce que je veux aussi faire, c'est l'aligner.
‫Donc l'alignement horizontal, je vais utiliser le centre ici.
‫Alors maintenant, je centre le texte, comme vous pouvez le voir ici maintenant au Texas, centré également sur peut-être une petite marge
‫dans toutes les directions, qui est de 20.
‫Donc, comme vous pouvez le voir, j'utilise une marge et je dis juste 20, ce qui dira ou qui
‫créera une marge vers les quatre directions de 20 pixels.
‫Maintenant, la prochaine chose est une zone de liste, et je veux utiliser une zone de liste, juste pour que vous voyiez à quoi elle ressemble.
‫Donc, cette zone de liste ici est actuellement vide, mais nous pouvons changer cela très facilement en créant un élément ListBox
‫là-dedans.
‫Alors allons-y et créons un élément ListBox.
‫Et cet élément devrait avoir le contenu de, disons, le contenu est égal à l'élément un.
‫Et maintenant, au lieu d'avoir une balise d'ouverture et de fermeture, je veux juste avoir cette version plus courte.
‫J'utilise donc ce studio visuel l'année dernière assez intelligent pour me débarrasser automatiquement de la balise de fermeture.
‫Alors maintenant, cette zone de liste contient cet élément et je vais simplement le copier et le coller plusieurs fois.
‫Je vais donc avoir les points un, deux et trois.
‫Et maintenant, cette listbox occupe toute la largeur.
‫Comme vous pouvez le voir, cela prend tout le parent et c'est seulement aussi haut ou aussi haut que nécessaire.
‫Cela signifie donc que seulement autant d'espace est requis que les éléments à l'intérieur sont à leur hauteur.
‫Donc c'est à peu près, disons, cet élément un et les éléments deux et trois, ils sont chacun liés à 30 pixels.
‫Donc, toute cette boîte ne ferait que 90 pixels de hauteur.
‫Mais nous pouvons changer cela, disons, en ajustant la hauteur.
‫Et je vais juste utiliser une hauteur de 100.
‫Comme vous pouvez le voir, il est plus haut que l'objet ne l'était auparavant.
‫Et maintenant, créons également une largeur.
‫Aussi cent pixels.
‫Alors maintenant, vous pouvez voir que cette boîte est beaucoup plus petite et qu'elle s'intègre parfaitement.
‫D'accord.
‫Maintenant, si je veux avoir une marge vers toutes les directions, je peux aussi donner cet élément dans la marge.
‫Mais comme vous pouvez le voir, parce que cela a un bloc de texte mondial, il a une marge de vingt dans toutes les directions.
‫Il y a aussi une distance entre ces deux éléments ici entre la ListBox et le bloc de texte.
‫Maintenant, si nous exécutons ce code, nous verrons que nous avons cette petite fenêtre principale, qui est belle
‫et a notre zone de liste avec ses éléments.
‫Donc, comme vous pouvez le voir ici dans le monde, le bloc de texte et ensuite ces éléments de liste, vous pouvez cliquer dessus, vous
‫pouvez même les sélectionner, comme vous pouvez le voir.
‫Mais rien d'autre ne se passe car nous n'avons pas encore vérifié l'événement, ce que nous ferons dans la prochaine
‫vidéo.
‫OK, donc je vais refermer ça.
‫Et maintenant, parlons rapidement du régal logique et visuel.
‫Donc ce que nous avons ici est un arbre logique ou nous pouvons voir l'arbre logique dans Zemel.
‫L'arbre logique est donc une fenêtre à l'intérieur de cette fenêtre.
‫Nous avons un panneau empilé à l'intérieur de ce panneau empilé.
‫Nous avons un bloc de texte et une zone de liste.
‫Et dans la ListBox, nous avons en fait la ListBox, élément un, ListBox, élément deux et trois.
‫Voilà donc l'arbre logique.
‫Vous avez à peu près plusieurs branches.
‫Cela va de plus en plus profond.
‫Ainsi, la fenêtre a une branche de panneau empilé qui a deux branches, et l'une d'elles est ListBox, qui a aussi
‫des branches et ainsi de suite.
‫Donc, comme je l'ai dit encore une fois, c'est l'arbre logique.
‫Jetons maintenant un coup d'œil à l'arborescence visuelle, car si, par exemple, j'ajoute un bouton ici, j'en aurai besoin
‫pour quelque chose dans une seconde.
‫Je crée donc un nouveau bouton.
‫Je lui donne le contenu de Callignee.
‫Et je vais également ajouter une méthode ici qui sera appelée chaque fois que quelqu'un cliquera.
‫J'utilise donc click here et je crée un nouveau gestionnaire d'événements.
‫Et ce que cela fait pour moi, cela crée une nouvelle méthode appelée clic sur un bouton.
‫Si vous regardez, vous savez, nous pouvons voir qu'il existe une méthode appelée Button Click, qui a
‫un expéditeur d'objet et des arguments d'événement routés appelés EHP.
‫Donc, ce que cela fait à peu près, c'est que cette méthode sera appelée chaque fois que nous cliquons sur le bouton et tout ce que
‫nous avons à l'intérieur de ce corps de méthode sera exécuté.
‫Alors disons que nous utilisons une boîte de message, quelque chose que nous n'avons pas encore utilisé et que nous appelons sa méthode show.
‫Nous pouvons simplement afficher une boîte ou une boîte apparaîtra comme une petite fenêtre contextuelle et qui nous montrera du texte.
‫Donc quelque chose comme merci d'avoir cliqué sur moi.
‫Et le texte dit, cliquez sur moi et le puits, le texte qui apparaîtra comme ceci, merci d'avoir cliqué sur la boîte de message montrera
‫quelque chose de beau comme merci d'avoir cliqué sur moi.
‫Comme vous pouvez le voir, ce bouton cliquez sur moi est juste en dessous de notre liste.
‫Alors non, allez-y et ajoutez un peu de distance entre eux.
‫Très bien, j'espère que vous essayez de faire cela et que nous pouvons soit donner notre marge botanique et je vais juste en utiliser à nouveau
‫20, soit nous aurions pu donner une marge à notre ListBox, mais donner la marge au bouton devrait tout
‫à fait convenir.
‫Alors maintenant, si vous exécutez le code, nous obtiendrons ce magnifique bouton cliquez sur moi ici.
‫Nous avons donc le monde entier avec le texte et ainsi de suite ou la listbox.
‫Et maintenant, si nous cliquons sur Cliquez sur moi, cette boîte de message apparaît et dit quelque chose comme, merci d'avoir cliqué sur
‫moi et nous pouvons cliquer sur OK pour fermer à nouveau cette boîte de message.
‫Alors ouvrons-le.
‫Comme tu peux le voir.
‫Cliquez sur moi.
‫Merci d'avoir cliqué sur moi.
‫C'est donc une boîte de message et nous pouvons l'utiliser, disons, de la même manière que nous avons utilisé la ligne
‫rouge de la console et nos applications de console à des fins de test.
‫Alors c'est plutôt cool.
‫Si nous voulons ouvrir quelque chose après un événement, nous ouvrons simplement une boîte de message pour que nous sachions, d'accord.
‫Cela a très bien fonctionné.
‫Voilà donc le bouton et nos trois logiques.
‫Regardons maintenant l'arborescence visuelle.
‫Ainsi, pour obtenir l'arbre visuel, il existe plusieurs façons.
‫Mais celui que je vais utiliser est que je vais ajouter un point ici, un point de débogage, afin qu'il s'exécute dans le
‫débogage chaque fois que cette ligne de code est exécutée.
‫Alors laissez-moi démarrer le code ou démarrer notre programme.
‫Maintenant, je clique sur le bouton et notre programme s'arrête et nous entrons en mode débogage.
‫Et ici, je peux accéder au WP Free Visualizer.
‫Donc, ce que je vais faire, c'est que je vais cliquer dessus et cela ouvre le visualiseur, qui a
‫le régal visuel, qui a également ces propriétés en haut à droite ou sur le côté droit.
‫Comme vous pouvez le voir, il y a tellement de propriétés pour notre bouton, par exemple, ou pour notre listbox, aussi
‫beaucoup de propriétés.
‫Et il me dit même toutes les valeurs de ces propriétés.
‫Et nous n'en avons même pas défini.
‫Enfin, à part la marge peut-être.
‫Mais à part ça, il n'y a rien que nous ayons mis en place.
‫Et comme vous pouvez le voir, le fond est large.
‫C'est toujours bon.
‫Nous pourrions donc également modifier cela dans le code.
‫Et au fait, ce qui est important ici maintenant, c'est notre arbre visuel.
‫Et vous voyez certains aspects de notre arbre logique ici, ainsi que, par exemple, vous pouvez voir la fenêtre principale,
‫puis vous voyez le panneau empilé et là vous voyez la zone de texte sans tracé et le bouton.
‫Mais il y a beaucoup plus, comme vous pouvez le voir, la fenêtre principale a une bordure, que nous ne voyons pas
‫dans l'arbre logique, mais nous faisons un arbre individuel.
‫Ensuite, il a un décorateur donateur, un centre de contenu, qui affiche alors le contenu, c'est-à-dire le
‫panneau empilé.
‫Et le panneau empilé, encore une fois, a un blog de texte, une zone de liste, qui a une bordure.
‫Ensuite, cette boîte a une vue de défilement.
‫Donc, s'il y a trop d'éléments à afficher dans la hauteur qu'il a faite, il aura
‫une capacité de défilement, alors c'est une grille qui contient un rectangle et un présentateur de contenu de défilement, qui a un
‫élément à présenter visualisant le panneau de pile.
‫Et puis, là-dedans, nous trouvons notre élément ListBox un, qui a à nouveau une bordure qui a un présentateur de contenu.
‫Et enfin, nous pouvons trouver le bloc de texte.
‫Alors vous voyez, c'est un arbre très, très long ici, avec de très nombreuses branches.
‫Mais au final, ce que vous pouvez trouver, ce sont tous les différents éléments qui sont visuellement dans votre programme.
‫Et cela peut être très utile si vous voulez en savoir plus sur ce qui est représenté ou utilisé dans votre
‫programme et ce que vous avez ajouté à votre programme, mais c'est généralement ainsi que vous pouvez tout savoir
‫sur le traitement visuel.
‫Comme vous pouvez le voir, nous avons une grille dans notre zone de liste, que nous n'avons pas configurée nous-mêmes, mais elle est juste
‫là.
‫Droit.
‫Et si vous cliquez sur la grille, vous pouvez également trouver les propriétés de cette grille sur le côté droit.
‫Okeydokey.
‫C'était donc à peu près tout pour l'arbre visuel.
‫L'arbre logique.
‫Nous avons le panneau USEC et ListBox.
‫Nous utiliserons beaucoup plus ce panneau à l'avenir.
‫Alors habitue-toi à ça.
‫Et ouais.
‫Et la prochaine vidéo, nous allons vérifier les événements.
‫Alors rendez-vous là-bas.