‫Willkommen zurück.
‫Jetzt ist es endlich an der Zeit, Grid zu verwenden, und Sie haben gesehen, wie man Tech-Panel vorher und
‫Rack-Panel und diese heute gut gestapelt und verpackt verwendet.
‫Und jetzt werden wir Grid ausprobieren, das es uns ermöglicht, Dinge in einem Raster zu positionieren, und
‫wir beginnen mit der einfachen Verwendung eines zweimaligen Rasters.
‫Und zuallererst brauchen wir dafür eine Spalten- und eine Rollendefinition, damit wir innerhalb unseres Rasters vorankommen
‫können.
‫Gehen Sie also zu Ihrer Zemel-Datei und erstellen Sie dann innerhalb des Rasters eine Rasterpunktspaltendefinition und hier können Sie Ihre
‫verschiedenen Spalten definieren.
‫Sie benötigen also zunächst die Spaltendefinitionen Plural und können dann Ihre
‫individuellen Spaltendefinitionen erstellen.
‫Sie können beispielsweise hier fortfahren und eine erstellen.
‫Ich werde es einfach so in einer Zeile halten.
‫Und was ich hier definieren möchte, ist einfach die Breite und Breite, die ich, sagen wir, auf 100
‫setzen könnte und jetzt eine weitere Spalte erstellen, die ebenfalls 100 breit sein wird.
‫Nun, das ist nicht genug.
‫Wir brauchen auch Reihen, außer wir wollen nur einen Raum haben.
‫Beginnen wir also mit nur einer Reihe.
‫Und ich werde zuerst nur eine Schaltfläche erstellen.
‫Und dieser Knopf sagt etwas wie Hallo, und er sollte im Raster sein, diese
‫Spalte Null.
‫Jetzt erstelle ich eine zweite Schaltfläche, die das Raster sein sollte, diese Spalte.
‫Wenn wir uns jetzt unser Design ansehen, sehen wir, dass wir unsere beiden Schaltflächen haben.
‫Hi.
‫Lassen Sie uns unseren Code ausführen, um zu sehen, wie das aussieht.
‫Übrigens sind es nur 100 Pixel breit, wie Sie hier sehen können.
‫Die Breite ist also auf 100 Pixel begrenzt.
‫Wenn Sie hier also einen Gesamtwert hinzufügen, wird dieser einfach als Pixel in der Breite verwendet.
‫Wie Sie hier sehen können, ist eine Spalte so breit.
‫Und natürlich könnten wir sagen, dass wir hier problemlos weitere Spalten einfügen können.
‫Nun, das können wir tun und wir werden das später tun.
‫Aber bevor wir das tun, möchte ich Ihnen noch etwas sehr Wichtiges zeigen.
‫Wenn ich also mein Zemel jetzt hierher ziehe, ist es tatsächlich nützlich, da wir den Unterschied direkt in unserer Benutzeroberfläche sehen
‫werden.
‫Und ich möchte die Breite von 100 auf Auto ändern.
‫Und wie Sie sehen können, nimmt es automatisch nur die Breite an, die erforderlich ist, um
‫in den gesamten Inhalt des Elements zu passen.
‫In unserem Fall hat die Schaltfläche also einen Text namens Hi there, und so viel Platz wird dort benötigt
‫oder benötigt.
‫Und so breit wird auch unser Button sein.
‫Und wie Sie für die erste Spaltendefinition sehen können, also
‫die erste Spaltendefinition, wo unsere Schaltfläche mit einer ist, ist die oder die Schaltfläche, die geändert wird.
‫Wie Sie jetzt sehen können, wurde es auf neunundfünfzig Komma fünf Pixel geändert.
‫Wenn ich etwas mehr Text hinzufüge, etwas mehr Text, können Sie sehen, dass es auf einhundertdreiundfünfzig Komma fünf Pixel
‫erweitert wird.
‫Sie können also ganz einfach Auto verwenden, wenn Sie möchten, dass alles richtig passt, je nachdem, wie viel Platz es
‫tatsächlich benötigt.
‫Aber was ist, wenn ich die Spalten genau gleich breit machen möchte?
‫Nun, natürlich könnte ich hier volle Werte oder hier feste Werte verwenden, aber ich kann auch Stern verwenden.
‫Und was Star tun wird, ist, wenn alle, alle von ihnen, einen Star haben, wird er einfach sagen, OK, den
‫ganzen Platz einnehmen.
‫Und in diesem Fall ist es nur der verfügbare Platz, den diese spezielle Spalte hat, und er ist genau der gleiche wie bei
‫den anderen.
‫Jetzt heißt es also warten.
‫Dies hat also ein Gewicht von eins und dieses hat ebenfalls ein Gewicht von eins.
‫Sie sind also gleich gewichtet, was bedeutet, dass sie nur gleich sind, wenn wir das ändern wollen, sagen
‫wir, ich möchte diesen zweiten hier machen, den zweiten Knopf doppelt so breit wie den ersten kann ich Doppelstern
‫verwenden.
‫Dieser wird jetzt doppelt so breit sein wie der erste.
‫Wenn ich zum Beispiel drei Quinten auf der linken Seite und zwei Quinten auf der rechten Seite als Breite haben möchte,
‫kann ich einfach diesen Ansatz verwenden, wie Sie hier sehen können.
‫Also dreimal den Stern und zweimal den Start.
‫Was also summiert es eigentlich alles und dann berücksichtigt es nur das Vielfache dessen, was hier gesagt wird.
‫Nehmen wir an, wir haben drei und zwei.
‫Also, was es tut, sagt es, OK, jetzt sind es insgesamt fünf.
‫Einheiten, die verfügbar sind, und ich werde drei Fünftel dieser Einheiten nehmen, und ich könnte sogar so etwas wie 100
‫machen, also können Sie sehen, dass diese 100 und dies nur nicht eine und nur zwei braucht.
‫So kann man also mit der Breite herumspielen und das gleiche gilt für die Höhen.
‫Lassen Sie uns nun eine Rollendefinition erstellen.
‫So toll, dass Rollendefinitionen und hier drin können wir weitermachen und unsere eigenen Definitionen erstellen.
‫Also das erste und ich werde es auch einfach halten, wie in einer Reihe und dieses braucht eine Höhe.
‫Also sage ich einfach: OK, ich möchte die Sternhöhe haben.
‫Und jetzt verwenden wir dasselbe wieder für die zweite Reihe.
‫Und wie Sie jetzt sehen können, haben wir zwei Reihen.
‫Also einer hier und der zweite ganz unten.
‫Und wie Sie sehen, enthält die zweite Zeile noch keinen Inhalt.
‫Lassen Sie uns das jetzt ändern, indem wir zunächst diese Schaltfläche hier ganz unten platzieren.
‫Rechts.
‫Und wie können wir das tun?
‫Nun, wir verwenden einfach Raster, Punkt, Reihe, und wir sagen, es ist ein echtes.
‫Jetzt fragen Sie sich vielleicht, warum das so ist?
‫Warum ist es nicht so gut?
‫Wie Sie wahrscheinlich schon wissen, beginnen wir beim Programmieren mit Null zu zählen.
‫Die erste Zeile ist also null, die zweite Zeile ist eins.
‫Also hoch ist jetzt die zweite Reihe, die Reihe eins.
‫Lassen Sie uns nun zwei weitere Schaltflächen erstellen und vielleicht sogar ihre Namen in
‫etwas ändern, das mehr über ihre tatsächlichen Informationen aussagt.
‫Also schreibe ich das in die Spalte Null in Zeile eins und das hier, eigentlich werde ich es
‫zurück auf Null eins setzen.
‫Und dieser wird einen hinzufügen.
‫Und tatsächlich wird das Spalte eins und Zeile null sein.
‫Jetzt haben wir also alle Knöpfe und dieser wird einer sein.
‫Eins wird von Knopf zu Knopf drei und Knopf vier sein.
‫Groß.
‫Wenn wir jetzt damit beginnen, werden Sie sehen, dass es auch für den Whitesell gilt.
‫Also eins, zwei, drei, vier.
‫Gut.
‫Nun eine kleine Herausforderung für Sie, da Sie gesehen haben, wie Sie großartige Spalten und Zeilen verwenden.
‫Bitte machen Sie hier ein drei mal drei Raster mit acht Knöpfen.
‫Eins, zwei, acht sollten also Knöpfe sein und die neunte Position.
‫Die Position oder das Rasterelement unten rechts sollte also ein Textblock sein.
‫Also poste bitte ein Video und versuche das zu tun.
‫In Ordnung, ich hoffe, Sie haben es versucht, also füge ich eine weitere Spalte hinzu, indem ich hier eine
‫Spaltendefinition hinzufüge, und sie wird gleich breit und gleich hoch sein.
‫Es wird gleich hoch sein.
‫Und jetzt sehen die Schaltflächen, wie Sie sehen können, etwas seltsam aus, aber das liegt nur daran, dass ich noch nicht herausgezoomt habe.
‫Jetzt können wir es also richtig sehen.
‫Jetzt haben wir unsere Schaltflächen mit Null Eins und so weiter.
‫Also kopiere ich diese Schaltfläche hierher und positioniere auch eine Spalte.
‫Also Rosero und Spalte zwei.
‫Nun könnten Sie natürlich argumentieren, dass es sinnvoller ist, mit der Zeile zu beginnen und dann die Spalte
‫einzugeben, während Sie dies tun können.
‫Aber in meinem Fall ist es umgekehrt.
‫Am Ende kommt es darauf an, dass Sie beide richtig verwenden.
‫Jetzt haben wir die drei Schaltflächen oben.
‫Lassen Sie uns nun fortfahren und die zweite Reihe erstellen oder die zweite Reihe abschließen.
‫Und das ist auch die Spalte.
‫Und das werde ich noch dreimal kopieren.
‫Zweimal ist genug.
‫Und diese wird Zeile sein, um Null zu positionieren und Zeile, um eins oder Spalte eins zu positionieren.
‫Jetzt müssen wir natürlich die Werte ändern.
‫Also eins, zwei, drei, vier, fünf, sechs, sieben und acht.
‫Und wie gesagt unten links, ich hätte gerne einen Textblock.
‫Der Textblock hat also den gleichen Ansatz mit Körnern.
‫Sie müssen eine Spalte und eine Zeile haben.
‫Also sage ich nur, dass dies Spalte zwei und Rasterzeile sein wird.
‫Auch zwei.
‫Jetzt sind wir unten, links oder unten, wir können rausgehen und ihm etwas Text geben und ich werde
‫einfach etwas sagen.
‫Ich schreibe jetzt, du könntest sagen, oh, das gefällt mir nicht.
‫Der Text steht oben links.
‫Während Sie dies leicht ändern können, indem Sie..
‫Geben Sie hier etwas wie horizontale Ausrichtung ein und verwenden Sie die Mitte.
‫Jetzt ist es horizontal zentriert.
‫Lassen Sie uns heranzoomen, damit Sie es sehen können.
‫Gut.
‫Genug von einem, um es auch vertikal zu zentrieren.
‫Ich verwende einfach die vertikale Ausrichtung und ich verwende auch hier die Mitte.
‫Wie Sie sehen, ist die Schaltfläche jetzt perfekt zentriert und wir können sogar die Schriftgröße ändern, nur
‫weil wir es können.
‫Und machen wir es ein bisschen größer, wie 32.
‫Und jetzt sehen wir, dass wir ein drei mal drei Raster mit acht Schaltflächen und einem Text haben.
‫Jetzt könnten Sie fortfahren und alle Arten von Elementen in Ihrem Fenster hier und Ihr Hauptfenster in Ihrem
‫Raster ausrichten.
‫Das ist das Schöne an der Verwendung von Rastern.
‫Und wie Sie gesehen haben, können Sie Dinge stapeln.
‫Sie könnten ein gestapeltes Panel mit mehreren Rastern erstellen.
‫Und zusätzlich hast du einen Text dazwischen, so ähnlich.
‫Sie sind also nicht darauf beschränkt, ein Element hier zu verwenden.
‫Wie Sie sehen, könnten wir das in ein so gestapeltes Panel-Stack-Panel einfügen.
‫Also werde ich das Raster ziehen.
‫Wie Sie jetzt sehen können, beschwert es sich, weil das Hauptfenster des Fensters Zemel nur das erste kennt.
‫Es wird also nur das gestapelte Panel sehen, wenn wir jetzt unser Aussehen überprüfen.
‫Lassen Sie uns es eigentlich stoppen, damit wir sehen können, wie es invertiertes Markup sagt.
‫Wenn wir also das gesamte Raster in unser Stack-Panel aufnehmen, ist es, wie Sie sehen können, da und nimmt es auf.
‫Unten ist also viel Platz.
‫Hier könnten wir also eine weitere Schaltfläche hinzufügen.
‫Nur damit Sie sehen, dass dies möglich ist und dieser hier eine Höhe von einhundert haben wird.
‫Und jetzt, wie Sie sehen können, stapelt sich alles dort oben.
‫Und obwohl wir diese Höhe haben, dass sie alle gleich hoch sind, brauchte dieser Text so viel Platz, dass
‫er das ignoriert.
‫Daher ist die Schriftgröße zu groß.
‫Wenn wir also auf 16 zurückgehen, ist es immer noch zu groß.
‫Wenn wir zu, sagen wir, 12. gehen.
‫Jetzt scheint es eher so zu sein.
‫Wann immer Sie also echte Definitionen für diese Geschichte verwenden, müssen Sie vorsichtig sein.
‫Wenn ein Element mehr Platz benötigt als vorhanden ist, läuft es über.
‫Gut.
‫Das sind also zwei Gitter.
‫Ich werde zu dem schönen Standardraster zurückkehren, das wir dort hatten.
‫Und generell, was ich immer empfehle, nachdem man so etwas gesehen und gelernt hat,
‫bitte weitermachen und damit herumspielen.
‫Spielen Sie einfach mit einigen verschiedenen Arten von Elementen herum.
‫Sie haben bereits einige gesehen, und wir werden uns später noch viel mehr Kontrollen ansehen.
‫Diejenigen, die wir bisher verwendet haben, sind also hauptsächlich Schaltflächen, richtig.
‫Und Textblöcke.
‫Aber wir werden in den zukünftigen Videos verschiedene schöne Steuerelemente verwenden.
‫Also wir sehen uns dort.