‫Willkommen zurück.
‫Und in diesem Video werden wir uns Zemel genauer ansehen und Sie möchten dies vielleicht untersuchen.
‫Zemel ist eine Art XML-Sprache, wie Sie hier unten sehen können.
‫Und eigentlich werde ich es noch weiter ziehen, damit wir unsere Benutzeroberfläche schreiben können, damit wir
‫nicht alle Elemente in unsere GUI ziehen und dort anpassen müssen.
‫All das können wir im Code tun.
‫Nun könnte man sagen, ich bin eher ein visueller Typ.
‫Ich möchte weitermachen und die Dinger reinziehen und mir geht es gut, solange Sie das tun können.
‫Aber Sie sind dann darauf beschränkt, nur herumzuschleppen.
‫Und zum Beispiel können Sie viel anpassen und Sie können nicht nur solche Dinge wie diese Umhüllung anpassen, sondern Sie
‫haben im letzten Video gesehen, dass Sie noch viel mehr tun können und wir werden sehen, was Datenbindung
‫ist, welche Eigenschaften oder Abhängigkeitseigenschaften und so weiter sind Dinge, die Sie mit Zemel tun können, die es
‫uns ermöglichen, sehr großartige Benutzeroberflächen zu erstellen, die leicht zu warten sind.
‫Also und hier sehen Sie zuallererst dieses Fenster.
‫Im Allgemeinen haben Sie also ein öffnendes Tag und ein schließendes Tag.
‫Wenn Sie sich mit HTML auskennen, kennen Sie das vielleicht.
‫Sie haben die Eckstreben und Sie müssen sie auch schließen.
‫Also das Wort kleiner als das Vorzeichen und dann größer als der Sinus.
‫Und Sie sehen, wir haben dasselbe mit dem Fenster und auch hier.
‫Dann eine Schließung.
‫Sie haben auch den Schrägstrich direkt vor dem Wort.
‫Das ist also dasselbe für Raster, für Fenster für alles andere.
‫Wenn ich also zum Beispiel eine Schaltfläche verwenden möchte, kann ich das tun.
‫Und wenn ich das Größer-Dann-Zeichen verwende, wird automatisch das schließende Tag erstellt.
‫Jetzt kann ich alle Anpassungen innerhalb des öffnenden Tags vornehmen.
‫Wie Sie hier sehen können, Button, kann ich fortfahren und zum Beispiel Inhalte hinzufügen.
‫Es gibt also viele verschiedene Eigenschaften, wie Sie sehen können.
‫Und ich werde einfach die Content-Eigenschaft verwenden und ich werde einfach so etwas wie Klicken Sie auf mich verwenden.
‫Jetzt gibt es diesen Knopf in der Mitte, wie Sie sehen können, und er sagt, klick mich an.
‫Natürlich haben wir keine Höhe.
‫Wir haben noch keine mit all diesen Eigenschaften, die noch nicht festgelegt sind.
‫Aber sagen wir, ich möchte, dass diese Schaltfläche 50 Pixel hoch und dann 100 Pixel breit sein soll, wie Sie sehen können.
‫Nun, das ist meine Schaltfläche, die ich erstellt habe.
‫Natürlich hätte ich es mit hineinziehen können, aber ein Beispiel zu machen ist sehr nützlich.
‫Und was jetzt?
‫Etwas, das ich noch nicht allzu sehr berührt habe und das erst später im Kurs benötigt
‫wird.
‫Aber im Allgemeinen sehen Sie hier X und L und S, wofür das zum Beispiel Namespace steht.
‫Und Zemel steht für Extensible Application Markup Language.
‫Lassen Sie mich das hier hinzufügen.
‫Lassen Sie uns einen Kommentar hinzufügen.
‫Ich werde so einen Kommentar verwenden.
‫Wie Sie sehen können, ist dies Greeno und dies ist so ziemlich ein Kommentar.
‫Ich kann also hier etwas schreiben, zum Beispiel Zemel
‫ist eine erweiterbare Anwendungs-Auszeichnungssprache.
‫Gut.
‫Jetzt ist die Schaltfläche, wie Sie sehen können, hier drin.
‫Und jetzt lass uns weitermachen und noch ein paar Dinge mit Knöpfen machen.
‫Lassen Sie uns also bitte einige zusätzliche Schaltflächen erstellen.
‫Fahren Sie fort und erstellen Sie eine weitere Schaltfläche.
‫OK, ich hoffe, Sie haben es versucht, verwenden Sie einfach den Buttonnamen hier oder das Schlüsselwort und erstellen Sie dann den
‫zusätzlichen Button.
‫Jetzt fragen Sie sich vielleicht, oh --, es ist nicht richtig positioniert.
‫Also ich habe diesen Button und er hat den Inhalt mit.
‫Hi.
‫Warum ist jetzt diese Schaltfläche "Klick mich"?
‫Nun, es ist innerhalb des Rasters und es ist verschwunden, weil wir ein Raster verwenden, damit die Schaltflächen nicht übereinander
‫erscheinen und so weiter.
‫Wenn Sie das also versucht haben, haben Sie es gesehen.
‫Und wir werden uns später auch mit Rastern befassen.
‫Aber das wollte ich dir jetzt nur zeigen.
‫Gut.
‫Also lass uns diesen Knopf wieder loswerden.
‫Jetzt haben wir diese Schaltfläche "Klick mich" und lassen Sie uns einfach die Anwendung ausführen, damit
‫wir sehen können, wie sie im wirklichen Leben aussieht und wie diese ganze Sache unser Leben verschönern kann, indem Sie einfach darauf klicken.
‫Wie Sie sehen können, kann ich mit der Maus darüber fahren und es ändert seine Farbe und
‫ich kann darauf klicken und es macht diese kleine Klick-Animation und das war's.
‫Aber es passiert nichts, wenn Sie darauf klicken.
‫Und es gibt mehrere Möglichkeiten, eine Klickfunktion zu implementieren.
‫Und das werden wir später tun.
‫Rechts.
‫So können wir im Beispiel eine Schaltfläche erstellen.
‫Nun gibt es viele zusätzliche Elemente, auf die wir hier zugreifen können, oder Eigenschaften.
‫Beispielsweise können wir auf die Eigenschaft Schriftgröße zugreifen und die Schriftgröße auf beispielsweise 32 erhöhen.
‫Die Schaltfläche ist jetzt nicht so breit wie der Text, also passen wir die Breite an.
‫Also jetzt ist es gut.
‫Auch hier können wir den gesamten Text der Schaltfläche sehen, aber wenn Sie mit der Schriftgröße und
‫all diesen Elementen herumspielen, müssen Sie aufpassen, dass sie noch hineinpasst.
‫Was Sie jetzt auch tun können, ist, anstatt den Inhalt hier zur Inhaltseigenschaft hinzuzufügen, können
‫Sie einfach innerhalb des Schaltflächentexts hinzufügen.
‫Also hier drin werde ich etwas sagen wie, klick mich an.
‫Und wie Sie sehen, ist es da.
‫Dies ist also der Inhalt zwischen den Tags, an dem Sie Ihren Inhalt haben.
‫Das ist also eine Möglichkeit.
‫Die andere besteht darin, hier einfach die content-Eigenschaft zu verwenden und den Text so zuzuweisen, wie wir zuvor gesehen
‫haben.
‫Diese schließende Tag-Schaltfläche ist jetzt nicht erforderlich, wenn Sie die Schaltfläche einfach sofort auf diese Weise schließen, damit Sie sie
‫auf diese Weise kürzer schließen können, sodass Sie die schließende Tag-Schaltfläche nicht benötigen.
‫Und eine andere Möglichkeit, eine Schaltfläche zu entwerfen, ist die folgende.
‫Wenn Sie so etwas sehen, ist das auch völlig in Ordnung.
‫Sie erstellen also das Schaltflächen-Tag, das schließende und das öffnende.
‫Und hier haben Sie einen Schaltflächenpunkt und können dann alle gewünschten Eigenschaften anpassen.
‫Wie Sie sehen, gibt es viele verschiedene Eigenschaften, auf die wir zugreifen
‫können, beispielsweise die Schriftgröße.
‫So kann ich zum Beispiel die Schriftgröße auf 72 setzen und eine weitere Schaltflächeneigenschaft, die ich anpassen möchte, weil ich den Inhalt,
‫damit ich fortfahren kann, und dort nur den Inhalt zu hoch stellen möchte.
‫Jetzt sehen Sie also, dass es diesen riesigen Button mit der Schriftgröße 72 gibt und er sagt Hallo.
‫Das ist Ansatz Nummer zwei.
‫Und es gibt sogar noch etwas, das Sie tun können.
‫Lassen Sie uns diese Schaltfläche also noch weiter anpassen.
‫Sagen wir als Inhalt, ich möchte nicht nur einen Text von Hallo haben.
‫Ich möchte noch weiter gehen.
‫Ich möchte ein Wrap-Panel hinzufügen.
‫Was das Panel nun macht, ist, dass es einfach alle seine Steuerelemente oder Elemente nebeneinander von links nach
‫rechts umschließt.
‫Das erste Element ist also, sagen wir, ein Textblock.
‫Und wir haben gesehen, welche Textblöcke der einfache Text sind.
‫Und dieser wird Multi sagen.
‫Jetzt brauche ich noch einen Textblock und den dritten.
‫Das heißt also mehrfach, dreimal.
‫Aber jetzt kann ich die Farbe jedes einzelnen Aspekts anpassen.
‫Also für jeden einzelnen Textblock.
‫Nehmen wir an, ich ändere das in Blau, dann hat dies den Vordergrund.
‫Vordergrund ist also die Farbe zur Vordergrundfarbe und diese wird rot sein.
‫Und schließlich wird mein letzter Textblock den Vordergrund weiß haben.
‫Und jetzt ist es anstelle von Multi, Multi, Multi eine Multi-Color-Taste.
‫Und jetzt wollen wir vielleicht die Schriftgröße etwas anpassen, verkleinern wir auch den ersten Button, wie Sie
‫sehen, ist er ausgeblendet, da das Raster nur die letzten Elemente anzeigt, wenn sie nicht
‫im richtigen Raster zugeordnet sind Struktur, die wir später sehen werden.
‫Aber lassen Sie uns den ersten Knopf loswerden, den wir hatten.
‫Und jetzt legen wir auch eine Schaltflächengröße fest.
‫Also lasst uns fortfahren und die Schaltfläche verwenden, die sein wird, sagen wir zweihundert.
‫Und eine dritte Knopfhöhe, die 100 beträgt.
‫Und so sind wir da und die Schriftgröße ist zu groß, um alles hineinzupassen.
‫Wenn wir also weitermachen und das mit 24 machen, ist es jetzt drin.
‫Wenn ich also den Code ausführe, habe ich eine mehrfarbige Schaltfläche, die mehrere verschiedene Textblöcke enthält.
‫Und da sind wir.
‫Nur damit Sie sehen, es gibt mehrere verschiedene Ansätze, dies zu tun.
‫Wenn Sie mehrere Aspekte darin erfassen möchten, können Sie dieses Bedienfeld verwenden.
‫Sie können sogar ein Raster innerhalb der Schaltfläche verwenden und das Raster-Tag verwenden, um mehrere verschiedene
‫Steuerelemente innerhalb Ihrer Schaltfläche zu erstellen.
‫Aber das ist etwas, das wir später behandeln werden.
‫Im Moment ist es nur wichtig, dass Sie verstehen, dass Sie mit diesem Beispiel viele ausgefallene Sachen mit Ihrer GUI
‫machen können, ohne sie ziehen und ablegen zu müssen, und auch mit voller Kontrolle darüber, wie die Dinge aussehen und was sie
‫tun.
‫Was ich tun werde, ist, dass ich das auskommentiere und Ihnen zeigen werde, wie Sie das Gleiche tun, wie wir es hier
‫mit Code gesehen haben, weil wir es mit Zemel-Code gesehen haben.
‫Aber wir können es auch im Code Behind machen, also in C Sharp, was wir bisher so ziemlich für
‫die ganze Klasse oder für den ganzen Kurs gelernt haben.
‫Kommen wir also zum Code dahinter.
‫Wie Sie sehen können, gibt es eine gute Beispieldatei, die wir hier geöffnet
‫haben, die Hauptfenster-Demo und unsere Beispieldatei hat einen Code hinter der Datei, die ein totales Zemel ist.
‫Diese Falldatei und diese ist eine Cis-Datei, was bedeutet, dass wir hier eine Cis-Partialklasse haben, die wir
‫jetzt verwenden können, um unsere Benutzeroberfläche anzupassen oder zu erstellen.
‫Und wie Sie sehen, heißt es Main Window und erbt von window.
‫Und hier haben wir eine Methode namens Main Window, die der main-Methode in unseren Konsolenanwendungen ähnelt, die
‫wir bisher gesehen haben.
‫Dieser wird aufgerufen, sobald das Fenster geöffnet oder die Anwendung gestartet wird.
‫Und wie Sie hier sehen können, wird eine initialisierte Komponente aufgerufen, die einfach alles andere initialisiert,
‫was für die Ausführung unseres Fensters erforderlich ist.
‫Zum Beispiel initialisiert es den Titel und initialisiert auf Größe und so weiter.
‫Und jetzt können wir hier unseren eigenen Code schreiben.
‫Daher zeige ich Ihnen zuerst, wie Sie eine Schaltfläche erstellen.
‫Als erstes brauchen wir also ein Raster, in dem wir diese Schaltfläche zuweisen können.
‫Also werde ich es Gitter nennen, was ein neues Gitter ist.
‫Dann habe ich den Inhalt in mein Raster geschrieben, aber das reicht, wenn ich einfach das Hauptfenster sage.
‫Es sollte etwas Inhalt haben.
‫Richtig, wie wir in der Beispieldatei gesehen haben.
‫Dieses Fenster öffnet sich also hier und alles, was sich zwischen diesen öffnenden und schließenden Tags befindet, ist mein.
‫So ziemlich dieser ganze Inhalt hier.
‫Dies ist der Inhalt meines Fensters.
‫Und was ich hier sage, ist, dass der Inhalt das Raster sein sollte.
‫Also erstellen wir ein neues Raster, wie wir hier gesehen haben.
‫Wir haben also auch hier ein Raster, das wie das öffnende und schließende Tag des Rasters hier ist.
‫Und jetzt habe ich das als Inhalt gesagt und jetzt kann ich diesem Raster etwas hinzufügen.
‫Zum Beispiel kann ich dem Raster eine Schaltfläche hinzufügen.
‫Zuerst erstellen wir diesen Button und ich nenne ihn BGN wird ein neuer Button sein.
‫Jetzt habe ich diese Schaltfläche und kann ihre Eigenschaften anpassen. Nehmen wir also an, ich möchte die Schriftgröße meiner
‫Schaltfläche einstellen und kann es einfach so machen.
‫Ich kann nur sagen, es werden ungefähr 26.
‫Nun hatten wir in unserem Button, wie Sie hier gesehen haben, ein Wrap-Panel, das den Inhalt des Buttons darstellt.
‫Ich werde also ein Panel für dieses Panel erstellen und es als Panel bezeichnen,
‫das ein neues Wrap-Panel sein wird.
‫Jetzt können wir Dinge zum Wrap-Panel hinzufügen.
‫Wir fügen der Schaltfläche das Wrap-Panel hinzu und wir fügen die schlechte Schaltfläche dem Raster hinzu.
‫Und das Raster ist bereits Teil unserer Inhalte.
‫Lassen Sie uns nun alle Dinge erstellen, die wir dem Panel hinzufügen und hinzufügen möchten.
‫Also müssen wir zuerst einen Textblock erstellen.
‫Und der Textblock, wie Sie hier gesehen haben, ist dieser hier.
‫Also erstellen wir einen, zwei, drei Textblöcke.
‫Der erste wird bei 60 sein und ein neuer Textblock sein.
‫Und ich sage einfach Text dem Text.
‫Es hat also eine Textstütze. , dieser Text hier, das ist der Inhalt.
‫Für die Schaltfläche heißt der Inhalt also Inhalt und für den Textblock wird der Text selbst als Text
‫bezeichnet.
‫Wir hatten also Zugriff auf die text-Eigenschaft unseres Textblocks und das sagten wir zu multi.
‫Als nächstes stellen wir die Farbe ein.
‫Also Text, dass der Vordergrund Pinsel sein wird gedacht.
‫Und welche Farbe hatte ich zuerst für das Multi und war blau.
‫Gut.
‫Also werde ich das blau machen.
‫Und wie Sie sehen können, Pinsel, nun, Text wird mit Pinseln erstellt oder die Textfarbe wird mit der
‫Pinselklasse erstellt.
‫Also muss ich diese bürstenlose Klasse verwenden und dann auf ihre Farbe zugreifen.
‫Also einfarbiger Pinsel vom Typ Pinsel.
‫Und als nächstes kann ich das dem Rec-Panel hinzufügen.
‫Nun, da ich den Text mit dem Panel verbunden habe, mache ich das, indem ich auf seine Kinder zugreife und
‫meinen Text hinzufüge.
‫So füge ich einen Textblock hinzu.
‫Und wenn wir dieses Nichts ausführen würden, würden wir noch nichts sehen, weil wir das Rep-Panel noch nicht zum Button und
‫noch den Button zum Raster hinzugefügt haben.
‫Aber das werden wir gleich tun.
‫Lassen Sie uns also fortfahren und den Text anpassen oder diese drei Teile erneut anpassen.
‫Als nächstes fügen wir einfach einen Text zu Multicolor hinzu und der letzte war die Schaltfläche.
‫Und jetzt hatten wir die Farbe Rot und wir hatten die Farbe Weiß.
‫OK, ich habe diese drei Zeilen einfach kopiert und eingefügt, weil sie gleich sind.
‫Ich muss nicht jedes Mal einen neuen Textblock erstellen, wenn ich nur den alten hinzufüge.
‫Und dann habe ich mich angepasst.
‫Oder passen Sie seine Werte an und dann wieder auf die roten Felder.
‫Wenn diese drei Texte in meinem Wrap-Panel sind und ich jetzt tun kann, kann ich das rote Panel zu meiner Schaltfläche hinzufügen.
‫Also Button, dieser Inhalt wird mein rotes Feld sein und schließlich die Kinder, diese Anzeige.
‫Und hier füge ich meinen Button hinzu.
‫Also davon habe ich gesprochen.
‫Wir haben also das Raster, wir haben die Schaltfläche, wir haben das Wrap-Panel.
‫Und jetzt fügen wir diesen Text dem Panel hinzu.
‫Wir fügen das rote Panel zur Schaltfläche hinzu, wir fügen die Schaltfläche zum Raster hinzu und wir haben das Raster zum Fenster hinzugefügt.
‫Und wie Sie sehen, können Sie dies mit Code tun.
‫Und bevor wir den Code ausführen, muss ich auch das Raster auskommentieren.
‫Also kann ich eigentlich nur das Fenster haben.
‫Es gibt also nur das Fenster in unserem einen Hauptfenster, zum Beispiel Datei und der gesamte andere
‫Code befindet sich in unserem Hauptfenster-Assembly, das sitzt, was der Code dahinter ist.
‫Diese Datei ist also der Code hinter unserem Hauptfenster, das Zemel.
‫Bevor wir das testen, fehlt jetzt noch eines, nämlich dass ich meinem Text eine neue Steuersperre zuordne.
‫Also muss ich das für meine beiden Texte tun.
‫Die Sache ist also, wir erstellen hier einen Text und initialisieren ihn mit einem neuen Textblock.
‫Und jetzt müssen wir einen neuen Textblock erstellen und ihn unserem Text zuweisen, bevor wir ihn unserem Repräsentantenfeld hinzufügen
‫können.
‫Jetzt haben wir also, dass wir den Code ausführen können.
‫Und wir werden sehen, dass wir auch unseren Multicolor-Button haben, und wie Sie sehen können, haben wir
‫dasselbe wie zuvor mit Zemo gemacht, und zwar hier, was auch ziemlich einfach und ordentlich aussieht.
‫Wir haben es mit cis-Code wie diesem gemacht.
‫Jetzt können Sie Ihren Weg gehen, aber wir werden hauptsächlich mit der Zemel arbeiten.
‫Ich wollte Ihnen nur zeigen, dass Sie alles können, was Sie damit machen, alles, was Sie auch mit Code dahinter tun
‫können.
‫Aber manchmal ist es viel sinnvoller, Code-Behind zu verwenden.
‫Wenn Sie beispielsweise nur etwas dynamisch hinzufügen möchten, ist Code dahinter sinnvoller.
‫Es ist also sinnvoller, es mit C Sharp auszuführen oder die Anpassungen mit C Sharp und dem
‫Zemel vorzunehmen, wenn Sie statische Benutzeroberflächen haben.
‫Und übrigens, wann immer Sie die Zemel-Datei erstellen, wie wir sie hier haben,
‫wird diese Code-Behind-Datei erstellt.
‫Es erstellt also einfach diesen Code und führt ihn aus, sobald die Anwendung gestartet wird, sobald unser Hauptfenster abgefangen
‫wird.
‫Es ist also sowieso erledigt.
‫Und wir machen es so mit Zemo oder wir machen es manuell, indem wir den Code erstellen.
‫Da könntest du jetzt natürlich streiten, hey, sowas gibt es mit und entscheiden, was du nicht gesagt hast, naja,
‫das kann ich hier ganz einfach machen.
‫Ich könnte einfach sagen, Button diese Breite und ich könnte das auf einhundertfünfzig und Button diese Höhe und
‫zum Beispiel auf hundert setzen.
‫Dann wird die Schaltfläche entsprechend angepasst.
‫Und wie Sie jetzt sehen können, ist es bereits auf zwei Zeilen verteilt, das sind also Zemel und der Code dahinter mit
‫Code.
‫Ich weiß, es war ein langes Video, aber wir werden im nächsten Video noch mehr ausgefallene coole Dinge sehen.
‫Also wir sehen uns dort.