‫Willkommen zurück.
‫Und in diesem Video werden wir über die Listenbox mit gestapelten Panels sprechen, dann die logische Drei und die visuelle Drei.
‫Lassen Sie uns also zuallererst dieses Raster loswerden, da wir das Raster noch nicht berührt haben.
‫Wir haben es also noch nicht richtig verwendet, aber wir werden dies in einem der nächsten Videos tun.
‫Anstelle eines Rasters möchte ich also ein Stickpanel verwenden.
‫Ein Zustandsfenster ermöglicht es mir, Elemente übereinander zu stapeln, sodass ich hier beispielsweise
‫einfach einen Textblock hinzufügen und den Text einfach wie Hello World Simple Text schreiben kann.
‫Wie Sie sehen, gibt es jetzt meinen Text der Welt.
‫Was ich auch tun möchte, ist, es auszurichten.
‫Also horizontale Ausrichtung, ich werde hier die Mitte verwenden.
‫Also zentriere ich den Text jetzt, wie Sie hier sehen können, auf Texas, zentriert auf vielleicht auch einen kleinen
‫Rand in alle Richtungen, der 20 ist.
‫Wie Sie sehen können, verwende ich einen Rand und sage nur 20, was einen Rand
‫von 20 Pixeln in alle vier Richtungen erzeugt.
‫Als nächstes kommt eine Listbox, und ich möchte eine Listbox verwenden, damit Sie sehen, wie sie aussieht.
‫Diese Listbox hier ist derzeit also leer, aber wir können das sehr einfach ändern, indem wir dort ein ListBox-Element
‫erstellen.
‫Lassen Sie uns also fortfahren und ein ListBox-Element erstellen.
‫Und dieses Element sollte den Inhalt von beispielsweise Inhalt haben, der mit Element eins übereinstimmt.
‫Und jetzt möchte ich anstelle eines öffnenden und schließenden Tags nur diese kürzere Version haben.
‫Also benutze ich dieses letzte Jahr und Visual Studio schlau genug, um das schließende Tag für mich automatisch loszuwerden.
‫Jetzt hat diese Listbox dieses Element eins und ich werde es einfach mehrmals kopieren und einfügen.
‫Also werde ich Punkt eins und zwei und drei haben.
‫Und nun nimmt diese Listbox die ganze Breite ein.
‫Wie Sie sehen können, braucht es das gesamte Elternteil und es ist nur so hoch oder so hoch, wie es erforderlich ist.
‫Es wird also nur so viel Platz benötigt, wie die Elemente darin in ihrer Höhe sind.
‫Es ist also ziemlich viel, sagen wir, dieser Punkt eins und Punkt zwei und drei, sie sind jeweils 30-Pixel-Bindung.
‫Diese ganze Box wäre also nur 90 Pixel hoch.
‫Aber wir können das ändern, indem wir beispielsweise die Höhe anpassen.
‫Und ich werde nur eine Höhe von 100 verwenden.
‫Wie Sie sehen, ist es höher als das Objekt zuvor.
‫Und jetzt erstellen wir auch eine Breite.
‫Auch einhundert Pixel.
‫Jetzt können Sie sehen, dass diese Box viel kleiner ist und genau hineinpasst.
‫Gut.
‫Wenn ich nun einen Rand in alle Richtungen haben möchte, kann ich dieses Element auch im Rand angeben.
‫Aber wie Sie sehen können, hat dieser Welttextblock einen Spielraum von zwanzig in alle Richtungen.
‫Auch hier gibt es einen Abstand zwischen diesen beiden Elementen zwischen der ListBox und dem Textblock.
‫Wenn wir diesen Code jetzt ausführen, sehen wir, dass wir dieses kleine Hauptfenster haben, das schön
‫ist und unser Listenfeld mit seinen Elementen enthält.
‫So wie Sie hier bei der Welt sehen können, den Textblock und dann diese Listenelemente, können Sie darauf klicken, Sie
‫können sie sogar auswählen, wie Sie sehen.
‫Aber sonst passiert nichts, weil wir die Veranstaltung noch nicht ausgecheckt haben, was wir im nächsten Video tun
‫werden.
‫OK, also schließe ich das wieder.
‫Und jetzt reden wir schnell über den logischen und den optischen Leckerbissen.
‫Was wir hier also haben, ist ein logischer Baum oder wir können den logischen Baum in Zemel sehen.
‫Der logische Baum ist also ein Fenster innerhalb dieses Fensters.
‫Wir haben ein gestapeltes Panel innerhalb dieses gestapelten Panels.
‫Wir haben einen Textblock und eine Listbox.
‫Und innerhalb der ListBox haben wir tatsächlich die ListBox, Element eins, ListBox, Element zwei und drei.
‫Das ist also der logische Baum.
‫Sie haben so ziemlich mehrere Filialen.
‫Es geht tiefer und tiefer.
‫Das Fenster hat also einen Zweig des gestapelten Panels, der zwei Zweige hat, und einer davon ist ListBox, der
‫auch Zweige hat und so weiter.
‫Wie ich schon sagte, dies ist der logische Baum.
‫Schauen wir uns nun den visuellen Baum an, denn wenn ich hier zum Beispiel eine Schaltfläche hinzufüge,
‫brauche ich diese gleich für etwas.
‫Also erstelle ich eine neue Schaltfläche.
‫Ich gebe ihm den Inhalt von Callignee.
‫Und ich werde hier auch eine Methode hinzufügen, die aufgerufen wird, wenn jemand klickt.
‫Also verwende ich Click here und erstelle einen neuen Event-Handler.
‫Und was das für mich bedeutet, erstellt eine neue Methode namens Schaltflächenklick.
‫Wenn Sie genau hinschauen, sehen wir, dass es eine Methode namens Button Click gibt,
‫die einen Objektsender und Routing-Ereignisargumente namens EHP hat.
‫Was dies also ziemlich genau macht, ist, dass diese Methode jedes Mal aufgerufen wird, wenn wir auf die Schaltfläche klicken, und alles,
‫was wir in diesem Methodenrumpf haben, wird ausgeführt.
‫Nehmen wir also an, wir verwenden eine Messagebox, etwas, das wir noch nicht verwendet haben, und wir nennen ihre Methode show.
‫Wir können einfach ein Kästchen anzeigen oder ein Kästchen erscheint wie ein kleines Popup und zeigt uns etwas Text.
‫Also so etwas wie Danke, dass du auf mich geklickt hast.
‫Und der Text, der sagte, klick mich an und der Text, der so erscheinen wird, danke für das Klicken auf das Nachrichtenfeld, wird etwas Schönes
‫anzeigen, wie z. B. Danke für das Klicken auf mich.
‫Wie Sie sehen können, befindet sich diese Schaltfläche "Klick mich" direkt unter unserer Listbox.
‫Also nein, bitte fahren Sie fort und fügen Sie einen kleinen Abstand zwischen ihnen hinzu.
‫In Ordnung, ich hoffe, Sie versuchen es und wir können entweder unserer Botanik einen Rand geben und ich werde einfach wieder 20 verwenden, oder
‫wir hätten unserer ListBox einen Rand geben können, aber dem Button den Rand zu geben, sollte völlig in
‫Ordnung sein.
‫Wenn Sie nun den Code ausführen, erhalten wir hier diese schöne Schaltfläche zum Klicken auf mich.
‫Wir haben also die ganze Welt mit dem Text usw. oder der Listbox.
‫Und jetzt, wenn wir auf Click Me klicken, erscheint dieses Meldungsfeld und sagt etwas wie, danke, dass Sie auf mich geklickt
‫haben, und wir können auf OK klicken, um dieses Meldungsfeld wieder zu schließen.
‫Also öffnen wir es.
‫Wie du siehst.
‫Klick mich.
‫Danke, dass du mich angeklickt hast.
‫Das ist also ein Meldungsfeld, und wir können es auf ähnliche Weise verwenden, wie wir die rote
‫Linie der Konsole und unsere Konsolenanwendungen zu Testzwecken verwendet haben.
‫Es ist also ziemlich cool.
‫Wenn wir nach einer Veranstaltung etwas öffnen möchten, öffnen wir einfach eine Messagebox, damit wir wissen, OK.
‫Es hat super funktioniert.
‫Das ist also der Button und unsere logische Drei.
‫Werfen wir nun einen Blick auf den visuellen Baum.
‫Um den visuellen Baum zu erhalten, gibt es mehrere Möglichkeiten.
‫Aber ich werde hier einen Punkt hinzufügen, einen Debug-Punkt, damit er immer dann
‫debuggt, wenn diese Codezeile ausgeführt wird.
‫Lassen Sie mich also den Code starten oder unser Programm starten.
‫Jetzt klicke ich auf den Button und unser Programm stoppt und wir kommen in den Debug-Modus.
‫Und hier kann ich zum WP Free Visualizer gehen.
‫Was ich also tun werde, ist, darauf zu klicken und es öffnet sich der Visualizer, der
‫den visuellen Leckerbissen hat, der auch diese Eigenschaften oben rechts oder rechts hat.
‫Wie Sie sehen, gibt es zum Beispiel für unseren Button oder für unsere Listbox so viele Eigenschaften,
‫auch viele Eigenschaften.
‫Und es sagt mir sogar alle Werte dieser Eigenschaften.
‫Und wir haben nicht einmal etwas davon eingestellt.
‫Naja, bis auf den Rand vielleicht.
‫Aber ansonsten haben wir nichts eingerichtet.
‫Und wie Sie sehen, ist der Hintergrund breit.
‫Das ist immer gut.
‫Also könnten wir das auch im Code ändern.
‫Und übrigens, was hier jetzt wichtig ist, ist unser visueller Baum.
‫Und Sie sehen hier einige Aspekte unseres logischen Baums, sowie zum Beispiel das Hauptfenster,
‫dann das gestapelte Panel und dort das plotlose Textfeld und die Schaltfläche.
‫Aber es gibt noch viel mehr, wie Sie sehen können, das Hauptfenster hat einen Rahmen, den wir im logischen
‫Baum nicht sehen, aber einen einzelnen Baum.
‫Dann hat es einen Spender-Dekorator, ein Inhaltszentrum, das dann tatsächlich den Inhalt anzeigt, das
‫gestapelte Panel.
‫Und das gestapelte Panel hat wieder einen Text-Blog, ein Listenfeld, das einen Rahmen hat.
‫Dann hat diese Box eine Scroll-Ansicht.
‫Wenn es also zu viele Elemente gibt, um in der Höhe angezeigt zu werden, die es
‫getan hat, hat es eine Bildlauffähigkeit, dann ist es ein Raster darin, das ein Rechteck und einen Bildlauf-Inhaltspräsenter enthält, der ein Element
‫zur Visualisierung des Stapelbereichs für den Präsentator hat.
‫Und dann finden wir dort unser ListBox-Element eins, das wiederum einen Rahmen mit einem Inhaltsvorführer hat.
‫Und schließlich können wir den Textblock finden.
‫Sie sehen also, es ist hier ein sehr, sehr langer Baum, sehr viele Äste.
‫Aber am Ende finden Sie all die verschiedenen Elemente, die visuell in Ihrem Programm enthalten sind.
‫Und dies kann sehr hilfreich sein, wenn Sie allgemein mehr darüber erfahren möchten, was in Ihrem Programm dargestellt oder
‫verwendet wird und was Sie Ihrem Programm hinzugefügt haben, aber so erfahren Sie in der Regel alles
‫über die visuelle Behandlung.
‫Wie Sie sehen, haben wir in unserer Listbox ein Raster, das wir nicht selbst eingerichtet haben, sondern einfach da
‫ist.
‫Rechts.
‫Und wenn Sie auf das Raster klicken, finden Sie auch die Eigenschaften dieses Rasters auf der rechten Seite.
‫Alles klar.
‫Das war es also für den visuellen Baum.
‫Der logische Baum.
‫Wir haben ein USEC-Panel und eine ListBox.
‫Wir werden dieses Panel in Zukunft noch häufiger verwenden.
‫Also gewöhne dich daran.
‫Und ja.
‫Und im nächsten Video werden wir uns Events ansehen.
‫Wir sehen uns also dort.