Einführung in . NET

1. Einführung: Willkommen bei einer Einführung in die Entwicklung von dotnet Maui. Ich bin Ihr Dozent für Williams und ich bin Softwareingenieur und Dozent. Jetzt lernen Sie für die Dauer dieses Kurses die mobile Entwicklung mit den Augen von dotnet Maui.Net. Maui ist ein plattformübergreifendes Framework , das uns durch Punktierung gegeben wird, und es ermöglicht uns, eine Codebasis für viele mobile Betriebssysteme zu haben . Während dieses Kurses wirst du also verstehen, wie dotnet Maui funktioniert. Wir werden die XAML-Syntax verstehen. Werfen Sie einen Blick auf die ereignisgesteuerte Entwicklung und schauen Sie sich andere Dinge an, wie Navigation und das Verständnis globaler Ressourcen und Layouts. Für diesen Kurs benötigen wir Visual Studio 2022, das mit Genetik geliefert wird und Android-Emulatoren integriert sind. Wieder einmal willkommen zu diesem Kurs und ich kann es kaum erwarten, loszulegen. 2. Entwicklungsumgebung einrichten: Hey Leute, willkommen zurück. In dieser Episode werden wir unsere Umgebung einrichten, damit wir mit Maui programmieren können. Maui ist zum Zeitpunkt dieser Aufnahme in der Vorschau, was bedeutet, dass wir Visual Studio 2020 benötigen , um eine Vorschau der Version anzuzeigen. Möglicherweise haben Sie Visual Studio 2022 bereits installiert. Du wirst die Vorschau benötigen. Wenn nicht, dann kein Problem. Wir werden die grundlegenden Schritte durchlaufen, sind die am meisten benötigten Schritte zusammen. Beginnen wir also einfach mit dem Besuch von Visual Studio.Microsoft.com. Und wenn Sie auf dieser Seite sind, müssen Sie zur neuesten Vorschau gehen und dann die Vorschau herunterladen. Dadurch wird das Installationsprogramm auf Ihren Computer heruntergeladen. Und wenn dieser Start stattfindet, Sie sicherstellen , dass Sie die Vorschau erhalten. Wenn Sie also zum verfügbaren Abschnitt gehen, sehen Sie 201720222019. Sie möchten also sicherstellen, dass Sie diejenige erhalten, die als Vorschau markiert ist, oder? So können wir fortfahren und die Community-Preview-Ergänzungen abrufen . Ich habe es hier nicht aufgeführt. Das liegt daran, dass ich es bereits installiert habe. So können Sie das Installationsprogramm starten. Und was passieren wird , ist, dass dieses Fenster geöffnet wird , in dem Sie gefragt werden, welche Arbeitslasten Sie möchten. Sie können sich also die Workloads ansehen, die ich habe. Aber diejenigen, die für diesen Kurs unerlässlich sind, sind ASP.Net und Webentwicklung, da Sie eine API erstellen werden. Wir brauchen also die Web-Workload und Sie benötigen auf jeden Fall den Maui-Workload. Jetzt spiele ich einfach. Angesichts der Tatsache, dass es sich um eine Vorschau handelt, bin ich mir sicher , dass dies Knicke sind, die ausgearbeitet werden , wenn das Entwicklungsteam diese Workloads und diese Entwicklungspakete immer besser veröffentlicht. Aber so wie es aussieht, musste ich die Dotnet-Multi-Plattform-Up-UI-Entwicklung auswählen , nämlich Maui, oder? Ich musste die Desktop-Entwicklung bekommen und ich musste auch die UWP bekommen. In Ordnung? Jetzt nach der Auswahl all diese werden noch mit einzelnen Komponenten fortgesetzt. Und ich habe nach Android gesucht und dafür gesorgt, dass ich all diese Dinge angekreuzt habe. Okay, also wären einige von ihnen angekreuzt worden, weil Sie die Workloads ausgewählt haben, und einige waren es möglicherweise nicht. Also habe ich sichergestellt, dass ich den Google Android-Emulator und die C Plus Plus Android-Entwicklungstools angekreuzt habe den Google Android-Emulator und die C Plus Plus Android-Entwicklungstools angekreuzt und die C Plus Plus Android-Entwicklungstools , um all das zu tun. Okay, hoffentlich müssen Sie zu dem Zeitpunkt, an dem Sie diesen Kurs absolvieren , möglicherweise nicht alles durchlaufen, sonst wählt die Arbeitsbelastung alles aus , was er auswählen soll. Aber ich zeige dir nur diese Dinge, damit du den Weg des geringsten Widerstands haben kannst den Weg des geringsten Widerstands haben , wenn du diese Übung durchmachst. Sobald Sie all diese Dinge ausgewählt haben, die Workload-Installationen, da wir wahrscheinlich näher bei etwa 40 Gigabyte sein werden. So können Sie weitermachen und installieren, hoffentlich haben Sie genug Platz. Ich bin zuversichtlich, dass Sie dies tun, aber sobald Sie mit der Installation fortfahren und sie fertig sind, können Sie dieses Video fortsetzen. Sobald dies installiert ist, können Sie Visual Studio 2022 starten. Was wir jetzt tun werden, ist ein neues Projekt zu erstellen. Und wenn das kommt, wollen wir ein Dotnet Mawi aufkommen. Wenn Sie es nicht wie ich nach links haben, liegt das daran, dass ich kürzlich einen erstellt habe. Sie können immer suchen und es filtert diese Liste für Sie. Gehen Sie fort und wählen Sie dotnet Maui hoch, und dann geben Sie ihm einen Namen. Also nenne ich das meine erste Mawi. In Ordnung? Sie können also weitermachen und nennen, dass dies nicht das Projekt sein wird, mit dem wir entwickeln werden. Dies ist nur ein Projekt, damit wir unsere Umgebung einrichten und uns daran gewöhnen können , wie es aussieht. In Ordnung, wenn Visual Studio gestartet wird, haben wir die XAML-Datei der Hauptseite für uns geladen. Jetzt gibt es einige Dinge, die wir hier zur Kenntnis nehmen sollen. Wieder einmal ist dies immer noch in der Vorschau, also werden es ein paar Knicke durch die ich dich führen werde. Und hoffentlich haben Sie die gleiche Erfahrung wie ich und Sie werden keine Abnutzung haben, wenn Sie diese Aufgaben erledigen. Das erste, woran ich möchte, dass wir anwesend sind ist die Tatsache, dass dies eine XAML-Datei ist, die wirklich ein Dialekt von XML ist. Sie können also sehen, dass es hier oben weh tut. Sie wissen, dass es sich tatsächlich um eine XML-Datei handelt. Und das ist die Hauptseite. Dies ist also die Beispielseite , die wir mit diesem Beispiel erhalten, mit dieser Projektvorlage ziemlich. Und wenn Sie es einfach lesen, können Sie sehen, dass es ein wenig wie HTML aussieht , weil beide wieder auf XML basieren. Und du wirst sehen, dass jedes Tag sinnvoll ist. Es ist wirklich nur Standardenglisch. Hier sehen wir also, dass wir ein Tag haben, auf dem image steht, und wir haben einige Attribute für dieses Bild-Tag Wir haben ein Label-Tag einigen Attributen und einer anderen Beschriftung und einer Aufwärtsschaltfläche. Stimmt's? Jetzt für jede XAML-Seite, die wirklich wie eine wörtliche Seite in Ihrer App wäre , die Sie erstellen werden. Sie werden einen Code hinter der Datei haben. Also haben wir Hauptseite nicht Sommer, und dann haben wir Hauptseite nicht XAML Dot CSS. In dieser CSV-Datei wird sie also initialisiert. Wenn Sie also jemals mit WPF oder Windows Forms gearbeitet haben, würde Ihnen diese Art von Code irgendwie vertraut aussehen, oder? Also haben wir eine oder teilweise Klassen-Hauptseite und sie erbt von einer anderen Klasse namens Inhaltsseite. Und es hat eine globale Variable oder global für die Klasse zumindest haben wir unseren Konstruktor , der alle Komponenten initialisiert. Und das ist nur eine Methode, die in einem Buck ausgeführt wird und alle Steuerelemente initialisiert , die in der gesamten Anwendung verwendet werden oder diese bestimmte Steuerung tragen, oder? Dann haben wir hier eine Methode , die auf Zähler geklickt wird. Das nennen wir ein Ereignis. Auf Vertrag wird also ein Ereignis oder eine Methode geklickt, die jedes Mal aufgerufen wird, wenn auf die Schaltfläche geklickt wird. Also haben wir die Tastensteuerung hier. Lassen Sie mich ein wenig hineinzoomen, um sicherzustellen, dass wir sehen können. Also haben wir unsere Button-Steuerung, wir geben ihm einen Namen. Das ist also eines der Attribute, oder? Dieses Namensattribut ermöglicht es uns also es aus dem dahinter stehenden Code zu referenzieren. Wenn wir also etwas an der Schaltfläche oder dem Etikett oder irgendetwas, das wir hier definiert haben, ändern wollten , stellen wir sicher, dass wir ihm einen Namen geben. Dann haben wir die Texte , die der Button hat, und dann haben wir semantische Eigenschaften, Punkte, Hinweise. Und dann sagt es uns , dass okayed Kegel oft Sie klicken und dann geklickt haben, das ist unser Klickereignis. Und dann heißt es, wenn darauf geklickt wird, rufe diese Methode auf. Was wird also nicht kontaktiert, wenn auf „Anruf bei Intercalate“ geklickt wird? Nun, das ist die Methode , die wir hier haben. Diese Methode nimmt Informationen darüber auf, wer das Ereignis aufruft und welche Art von Ereignissen es ausgelöst hat. Hier könnte also wissen, dass der Button das Ereignis aufgerufen hat und durch ein Klickereignis ausgelöst wurde. Und dann führt es eine Operation durch, bei der es die zuvor definierten Kegel inkrementiert. Und dann legt es den Text basierend darauf fest, ob die Kegel einem oder größer als einem entsprechen, und sendet dann eine Nachricht an den semantischen Bildschirmlesegerät, da der Text der Inhaltsschaltfläche unbekannt ist sendet dann eine Nachricht an den semantischen Bildschirmlesegerät, . Mit anderen Worten, wir verketten uns. Hier heißt also BTN. Ich sagte was und was trägt dazu bei? Was trägt dazu bei? Das ist der Name, den wir dem einen Knopf geben. Also hier sehen wir, wenn wir auf den Button geklickt haben, den Text so ändern, wie ich es möchte. Und dann ist auf unserem Bildschirm nicht bekannt, dass der Text der Schaltfläche geändert hat, oder? Das ist also der semantische Bildschirmleser wird unsere kleine Brücke zwischen unserem Code dahinter und dem, was wir sichtbar in der App sehen, oder? Dafür ist das also da. Keine anderen Dateien enthalten die program.cs. Das ist also der Bootstrapper. Bei den meisten, wenn nicht allen C-Sharp-Programmen, haben sie eine program.cs, egal ob WinForms, WPF oder ASP.Net, es wird einige weit entfernte program.cs mit einer Hauptmethode haben program.cs mit einer Hauptmethode , die anfänglich ausgeführt wird. Dies würde also diese Akte in einem MAOI up darstellen. Und dann wird es so sein, es muss sie alle erschaffen. Es startet einen Baumeister und dann heißt es verbrauchen, und wir werden sehen, was oben ist. Update XAML ist genau hier. Es heißt also, benutze das, konfiguriere Schriften und baue dann. Okay, also was ist los? Was bedeutet Abdul? Es heißt „Sprung rüber nach oben“. Csm ist eine dieser Basisdateien, daher möchten Sie diese Dateien nicht löschen. Diese Dateien sind sehr wichtig. Im Wesentlichen deklarieren wir nur einige Namespaces. Es weiß, was seine Klasse ist, also ist es nicht so. Deshalb können wir es noch einmal im Akkord aufrufen . In Ordnung? Und dann definiert es einige Anwendungsressourcen, einige Stile und Farben usw. Und dafür ist unsere App XAML-Datei gedacht. Wir haben auch die App-Shell. Die App-Shell definiert noch einmal einige Namespaces und dann ist dies der Inhalt. Die Homepage soll Hauptseite sein. Wir senden es an Pitch, sobald wir hochgeladen werden. Wenn Sie also eine andere Homepage erstellen möchten, müssen Sie sicherstellen, dass es sich nicht mehr um die Hauptseite handelt. Es ist keine Seite , die ich erstellt habe eine autosomale Steuerung , die ich erstellt habe. Okay, obwohl Ordner wir Ressourcen haben, was passiert? Lass mich zuerst auf Plattformen gehen. Was passiert also mit Xamarin? Weil Mawi im Grunde ein Ersatz für Xamarin ist. Xamarin war ein Pionier in der plattformübergreifenden Entwicklung, wo Sie ein Projekt mit einer Codebasis haben können. Man könnte nur C-scharf sein, um mehrere mobile Schnittstellen und mobile Systeme zu bedienen . Was passiert, ist der Maui Anstatt Sie ein anderes Projekt pro Kurs mit Xamarin erstellen zu müssen, müsste ich nach einem Projekt für iOS usw. ein Projekt für das Android haben , etcetera. Anstatt Projekt, Projekt, Projekt zu machen , gibt es uns ein Projekt. Und für welche einzigartigen Ressourcen wir für dieses bestimmte mobile Betriebssystem benötigen , haben wir einen Ordner. Anstelle von mehreren Projekten haben wir also ein Projekt mit mehreren Ordnern, die in der Lage sind, die spezifischen Anweisungen und Ressourcen auf dem zu speichern die spezifischen Anweisungen und , was dafür erforderlich ist insbesondere Öl. Also sehen wir hier, dass wir den Android-Ordner mit iOS-Ordner-Lefties haben , in dem Samsung einen Mac-Katalysator haben wird und wir Windows haben, oder? Also ein Code-basiert, um sie alle zu regieren, ziemlich genau. Das sehen wir im Ordner „ Plattformen“ und dann in Ressourcen jetzt können wir alle Ressourcen haben, die wir benötigen. Denn was passieren würde, ist, dass Sie mit Xamarin möglicherweise ein Symbol in den Android-Ordner oder -Projekt setzen und vergessen es in den iOS-Ordner zu legen. Hier haben wir einen Ordner. Nun, wir können alles, was wir brauchen , so platzieren, dass alle unsere Apps von dieser namens BCE aus uniformiert aussehen können. Jetzt wirst du hier sehen, dass ich dieses kleine Warnsymbol für Abhängigkeiten habe dieses kleine Warnsymbol für und du wirst sehen, dass mir einige Abhängigkeiten fehlen und einige Dinge. Wenn ich eine Build-Miete mache, nein, bekomme ich eine Reihe von Fehlern. Jetzt habe ich das Internet durchforstet. Dies ist also noch einmal eine Vorschau. Ich bin mir sicher, dass ich, sobald sie vollständig veröffentlicht ist , diese Lektion erneut aufzeichnen und nicht in das einbringen muss, was ich teilen werde. Aber nein, während Sie es in der Vorschau tun, möchten Sie zur Lösungsdatei gehen sie im Terminal öffnen. Dann möchten Sie dies in.net eingeben. Ich lege dort einen Platz ein, damit das mehr Platz ist. Also dotnet, neue globale, Jason, und dann Dash, Dash, SDK Dash Version. Und dann werden Sie 6.300 Dash-Vorschau eintragen. Also wie gesagt, stelle sicher, dass du genau diese Zahlen eingibst, oder? Wie ich schon sagte, dies ist noch in der vorherigen Version, also ist dies nur ein Arbeiter , um sicherzustellen, dass alle SDKs wissen, auf welcher Version sie sich befinden sollten. Denn sobald Sie die Vorschau von Visual Studio zu diesem Zeitpunkt wie zum Zeitpunkt dieser Aufnahme verwenden Visual Studio zu diesem Zeitpunkt , ist es standardmäßig auf dotnet seven, das noch nicht alt angepasst und qualifiziert ist Maui-Apps, oder? Stellen Sie also einfach sicher, dass Sie es hier so einsetzen , wie Sie mich sehen, und dann können Sie die Eingabetaste drücken. Und was das tun wird, ist eine globale Punkt-JSON-Datei im Root oder auf Lösungsebene zu erstellen eine globale Punkt-JSON-Datei im , oder? Sobald wir das getan haben, können wir eine Control Shift und B durchführen und es erlauben, sich selbst neu aufzubauen. Und sobald das mit dem Bau fertig ist, werden Sie feststellen, dass dieses Warnzeichen nicht mehr vorhanden ist. Und alle unsere Abhängigkeiten sind nein Es gibt keine Warnung mehr. Das ist also ein gutes Zeichen. Okay, lasst uns also überspringen, um tatsächlich zu sehen, wie diese App aussieht, wenn sie läuft. Also oben hier bei unserem Play-Button treffe ich die Karotte und dann wähle ich das aus. Ich möchte das benutzen, okay, also mache ich inne, weiß es einfach, weil ich nicht gesehen habe, was ich erwartet hatte zu sehen. Also führe ich dich noch einmal durch jeden einzelnen Schritt, dessen du dir bewusst sein musst. Wenn Sie die Windows-Maschine nur sehen, wenn Sie sie auf diese Karotte fallen lassen und Sie nicht so viele Optionen sehen, wie ich sehe. Starten Sie Ihr Visual Studio neu. So nahe Reserve Studio hat das Projekt neu gestartet. Wenn du das tust, wirst du wahrscheinlich sehen, was ich sehe, oder? Wir haben auch auf den Android-Emulator zugegriffen. Was passiert ist, dass ich bereits ein paar Instanzen des Emulatorgeräts laufen ließ. Wenn Sie also zu Tools gehen, gehen Sie zu Android und können dann zum Geräte-Manager gehen. Und sobald das gestartet ist, zeigen wir Ihnen alle Emulatoren , die Sie wahrscheinlich laufen. Ich hatte drei Jahre Laufzeit, oder? Ich höre damit auf und entferne die anderen beiden, die aus meinen vorherigen Experimenten mit MAOI gestartet wurden . Zwischen all diesen Aktionen sollten Sie also in der Lage sein, an diesen Punkt zu gelangen an dem Sie all diese Optionen sehen, oder? Also gehe ich zum Android-Emulator und wähle den Android-Emulator aus. Und dann habe ich den Play-Button gedrückt, weil ich sehen möchte, wie das auf Android aussieht. Okay, also hier ist unsere mobile App. Und wenn du es dir ansiehst und es mit dem Code ansiehst, kannst du jedes Element zurückordnen, oder? Also hier ist unser Bild, das Dotnet, Punkt PNG. Da sind wir los. Wir haben das Label, Hello World. Wir haben diejenige mit der Aufschrift „Willkommen“. Und dann haben wir unseren Button mit der Aufschrift „Klick mich“. Wenn ich auf mich klicke, setze ich einen Haltepunkt das Klickereignis und du siehst , dass es dieses Klickereignis trifft. Collins ist also gleich 0. Beim ersten düsteren werden wir sehen, dass Clique einmal ist. Und dann wird er eher dem semantischen Bildschirmleser noch Unbekannte erklären , um sie zu aktualisieren. Also werde ich einfach F5 drücken, also geht es weiter. Und Sie können hier sehen, dass es einmal geklickt hat. Aber wenn ich dann noch einmal darauf klicke, werde ich zweimal geklickt oder hören, F5. Und los geht's, zweimal geklickt. So funktioniert ein Mawi Up also so ziemlich aus der Box. So funktioniert es. Ja, das Setup mag schmerzhaft sein, aber hoffentlich überstehen Sie diese Übung. Wenn nicht, nutzen Sie diesen Frage-und-Antwort-Bereich und lassen Sie es mich wissen. 3. Steuerelemente mit C# erstellen: Alles klar Leute, also lasst uns unsere Entdeckung von Maui fortsetzen. Wisse, dass wir es in Betrieb haben und wir sind mit den verschiedenen beweglichen Teilen vertraut. Lassen Sie uns also versuchen, eine neue Seite zu erstellen. Also klicke ich mit der rechten Maustaste auf das Projekt oder füge ein neues Element hinzu. Und dann will ich vom Dotnet Maui Abschnitt auf neue Inhaltsseite, oder? Und dann nennen wir diese eine Testseite, nett und einfach. Was uns das gibt, ist eine neue C-Sharp-Klasse , mit der wir definieren können, was wir auf der Seite wollen. Das ist also keine XAML-Seite, oder? Es gibt also zwei Möglichkeiten, Inhalte auf einer Seite oder Creed-Seiten zu erstellen . Eines ist mit der XAML-Datei mit der Bedienung von C-Sharp-Code. Und wir können das C-Sharp tatsächlich die Teile erzeugen lassen , die wir im Takt setzen. Also zum Beispiel Sake, ich werde diese Testseite und ich werde es zum Startup machen. also rüberspringe, um XAML zu aktualisieren , werde ich sagen, dass ich, tut mir leid, nicht zusammenfassen will . Shell-Punkt XAML. Ich werde ihm sagen, dass ich auf die Testseite gehen wollte . Also Tests-Seite statt vielleicht. Werfen wir einen Blick darauf , was wir damit bekommen. Und genau das bekommen wir. Wir bekommen ein einfaches Label mit dem Text. Willkommen bei dotnet Maui. Und genau das haben wir in der App, oder? Sie können also sehen, dass unsere C-Sharp-Klasse funktioniert. Lassen Sie uns also ein bisschen mehr darauf aufbauen. Was wir also im Wesentlichen haben, wäre eines, das Inhaltsobjekt hier , das den View-Inhalt repräsentiert, oder? Und dann sagen wir, dass wir ein neues Stack-Layout mit Kindern wollen . Dies ist also ein Layout und es gibt verschiedene Arten von Layouts, die Sie ausführen können. Wenn Sie also nur das Wort Layout eingeben würden, sind sie hier irgendwie durcheinander, aber Sie haben Absolutes Layout. Sie haben Karusselltyp, Kompressoren Layout, Flex-Layouts. Es gibt eine Reihe von Layoutoptionen. Diese Standardoption, die wir erhielten, war also ein Stack-Layout. Und dann könnten wir die Kinder hinzufügen und wir könnten ein neues Label haben. Und dann lasst uns eine Übung machen, in der wir einige andere Elemente einbringen werden. Lassen Sie uns also damit beginnen, alles innerhalb dieser Klasse oder dieses Konstruktors zu löschen alles innerhalb dieser Klasse . So können Sie hier sehen , dass alles mit dem Konstruktor beginnt. Ja, es ist eine Klasse was der Konstruktor ist, wo der Abschnitt oder die Initialisierung stattfinden wird, oder? Was wir also tun werden, ist etwas ähnlich wie auf der Hauptseite zu laden , aber wir werden es nur verwenden. Cool. Beginnen wir also damit unseren Zähler auf 0 zu initialisieren. Und dann werde ich ein statisches Label haben , das ich nennen möchte, sagen wir Counter Label. Es ist immer eine gute Praxis, auch bei Holzformen sind wir, wenn wir visuelle Programmierung machen. Es gibt immer unseren Steuerelementen Namen und hat entweder Präfix oder Postfix, das angibt, um welche Art von Kontrolle es sich handelt. Mein General würde es sein, dass ich wie LBL und dann den Namen sagen würde . Stimmt's? LBL ist also die Abkürzung für ein Label. Das ist mein eigenes. So kannst du deine eigene Technik entwickeln, wenn du willst. Aber es ist im Allgemeinen eine gute Praxis denn später, wenn die Codebasis wächst, ist es einfacher zu identifizieren, wann Sie beschriften möchten , im Vergleich zu einem Textfeld gegenüber jemandem usw. , diese sollten außerhalb des Konstruktors liegen. Entschuldigung. Also Kegel und Beschriftung außerhalb des Konstruktors. Und dann können wir innerhalb des Konstruktors einen neuen Ansichtstyp definieren. Also sage ich Scroll-Ansicht. Also werde ich einfach neu oder tut mir leid, ich sage einfach, dass die var scroll-Ansicht einer neuen Bildlaufansicht entspricht. In Ordnung? Und dann speichere ich mein Stack-Layout entspricht einem neuen Stack-Layout. Da sind wir los. Dann sehe ich die Scroll-Ansicht. Scroll-Ansicht, ich möchte, dass Ihr Inhalt das Stack-Layout ist. Genau dort sehe ich eine größere Bildlaufansicht auf dieser Seite. Und dann erstellt innerhalb der Erde eine Bildlaufansicht, erstellt ein Stapel-Layout und platziert dann das gestapelte Layout in die Bildlaufansicht. Obwohl die Bildlaufansicht selbsterklärend sein könnte, werde ich das immer noch erklären. Es ist das Steuerelement, mit dem Sie in der mobilen App nach oben und unten scrollen können, oder? Der Inhalt ist also zu viel, wir legen ihn einfach in eine Bildlaufansicht. Und das übernimmt das Scrollen für den Überlauf des Inhalts. Im Inneren des Labels. Für den Zähler werde ich sagen, dass es einem neuen Label entspricht, das ich mit ein paar Werten initialisieren werde. Also hier kann ich festlegen, dass diese Dimensionen diese Attribute sind. Was auch immer Sie in Dezimalzahl gesteckt hätten , und wir werden eine Übung machen , bei der wir die XAML durchlaufen, richtig. Ich sage Conte und ich bin gegangen, um Nullen zu setzen. Also fangen wir damit an , dass Kegel 0 sind. In Ordnung? Wir können die Schriftgröße und alle anderen gewünschten Attribute, die Familie usw. festlegen, also wollte ich dies auf 22 setzen. Was wollen wir wahrscheinlich noch die Schrift-Attribute haben. Mal sehen, was wir hier haben. Schrift-Attribute, die, also das ist eine Aufzählung und wir können es fett setzen, wir können es kursiv setzen, wir können es auf eine Reihe von Dingen setzen. Nun, es ist an dieser Stelle wirklich fett und kursiv. Und dann haben wir die horizontalen Optionen. Wollen wir, dass es zentriert ist, wir wollen es nach links oder rechts usw. Also habe ich die Layout-Optionen gesehen, die im Mittelpunkt stehen. Jetzt, da ich dieses Steuerelement hier erstellt habe , haben Sie Visual Studio mich genau dorthin führt darauf hindeutet, dass Sie das Stack-Layout hinzugefügt haben. Okay, also kann ich einfach die Tabulatortaste drücken, lass es tun, bin von meiner Kontrolle aufgebaut und ich sehe Stack-Layout für deine Kinder. Füge dieses Steuerelement hinzu. Okay, lassen Sie uns unseren Button erstellen. Also kann ich sagen, var btn, colon, colon Tr ist gleich einem neuen Button. Und dieser neue Button, ich möchte, dass er den Text enthält, auf dem Click to count steht. Und dann haben wir, sagen wir, auch die horizontale Option, die es in die Mitte aller Arten bringt. Also benutze ich das einfach noch einmal. Nachdem wir diesen Button haben, können wir ihn auch hinzufügen. Also das Layout. Okay, also werde ich einfach kopieren und einfügen und ändern, was ich weiß, dass ich ändern muss. Offensichtlich wären die Kinder generisch und alle diese Steuerelemente sind von einem Standardtyp, der als Kinder hinzugefügt werden kann. Nach all dem können wir sagen, dass dieser Punktinhalt entspricht, was im Mai ist, tut mir leid, was auch immer in der Bildlaufansicht ist. In Ordnung. Dieser Punktinhalt entspricht also der Bildlaufansicht. Lassen Sie uns das also sehr schnell überprüfen. Wir haben eine Scroll-Ansicht erstellt, wir haben ein Stack-Layout erstellt. Wir haben das Stack-Layout zur Bildlaufansicht hinzugefügt. Dann füllten wir das Stack-Layout mit verschiedenen Steuerelementen. Und dann sehen wir am Ende von allem, dass der Inhalt und das hier die Testseite darstellt, oder? Wenn Sie also mit C-Sharp vertraut sind, würden Sie verstehen, was das ist. Alles klar. Das repräsentiert also unsere Testseite. Ich sehe diese Seite, Ihr Inhalt entspricht was sich in der Bildlaufansicht befindet. Werfen wir einen Blick darauf, was wir davon bekommen , und ich renne einfach ohne Debuggen. Okay, also sind wir hier oben und wir haben unser Label mit einem sagt 22, es heißt Kegel 0. Und wir haben unseren Knopf mit der Aufschrift „Klicken Sie auf die Kegel“. Wenn wir jetzt klicken, passiert nichts. Warum passiert nichts? Nun, wir haben dem Button nicht gesagt, dass er irgendetwas tun sollte , wenn er geklickt wird. Was müssen wir also hinzufügen? Nein, wir müssen hinzufügen, was wir uns nennen. Wenn Sie das Klickereignis gesagt haben, haben Sie absolut Recht. Was ich hier tun werde, ist BTN Zähler, Punkte, Klick oder geklickt zu sagen . Und dann sage ich Plus gleich bei geklickt, oder? Oder OnClick-Ereignis. Was das jetzt tut, ist, das Klickereignis an diese Methode zu binden , die wir natürlich direkt unter unserem Konstruktor definieren müssen , der Bootstrapping und erstellt hat alle unsere steuert. Wir wissen, dass wir unsere private Void-Methode haben, und ich nenne sie bei Klickereignis. Und dann nehmen unsere Ereignisse normalerweise den Objektabsender sowie eine Registerkarte namens Ereignisargs an. Und wir nennen es einfach E Most Male. Und dann haben wir unsere Methoden. Innerhalb unserer Methode möchte ich Kegel sehen. Ich möchte, dass Sie die Anzahl plus erhöhen. Und dann würde ich LBL sagen, widersprechen. Ihr Text ist gleich. Und dann kann ich mit dieser Botschaft kreativ werden. Klicken oder klicken Sie also auf Kegel. Und dann kann ich einfach mein Konto eintragen. Und dann, wie wir von der vorherigen gesehen haben, müssen wir sagen, dass semantischer Bildschirmleser-Punkt unbekannt ist , dass sich der LBL-Zählerpunkttext geändert hat. Und das ist es wirklich. In Ordnung? also nach all dem Wenn Sie also nach all dem eine Maschine schnell genug betreiben und er die Emily offen halten kann. Sie können tatsächlich auf den Hot Reload klicken , der Ihre Anwendung für Sie neu erstellt. Aber das funktioniert normalerweise mit den XAML-Änderungen. Was ich tun werde, ist die Anwendung erneut auszuführen und uns das tun zu lassen und ein bisschen warten zu lassen. Und wenn ich jetzt klicke, siehst du, dass es funktioniert. Unser Klickereignis arbeitet also genau dort. Wir haben unsere allererste MAOI Seite erstellt. 4. Steuerelemente mit XAML erstellen: Okay, jetzt, da wir gesehen haben, wie man eine neue Seite und Steuerelemente mit C-Sharp-Code erstellt. Lassen Sie uns das mit XAML-Code neu erstellen. Okay, also gehen wir zu unserem Projekt, erstellen eine Entschuldigung, fügen einen neuen Artikel hinzu. Und dann werden wir dieses Mal mit dem Maui-Content-Bit gehen . Beachten Sie also, dass der erste C-Sharp war und dieser ist XAML. Okay, also wählen wir das aus. Und das hat gerade den Standardnamen hinterlassen da wir uns immer noch in den Untersuchungsstaaten befinden. Sie sehen also, dass wir die Aktienlayouts erhalten und wir erhalten diese Standardetiketten. Lasst uns also anfangen, dies willkürlich zu ändern. Also unser Label letztes Mal, es ist rot und ich werde einfach zwischen C-Sharp und XAML wechseln, nur damit ich kopieren und einfügen und ein bisschen schneller gehen kann. Der Text hier sagt also Kegel 0. Wir können die vertikale Option einstellen, das bedeutet, dass sie vertikal mittig ist. Und dann stellen wir die Horizontale so ein, dass sie auch mittig ist. Aber andere Elemente mussten wir den Namen haben, oder? Also gaben wir ihm den Namen LBL-Zähler. Also werde ich den x-Doppelpunktnamen sehen, bitte gleich dem LBL-Zähler. Auf diese Weise wissen wir Hallo zu verweisen, referenzieren Sie es aus dem Code dahinter. Wahrscheinlich möchte es ihm auch eine Schriftgröße geben. Und du siehst alle Attribute , die ich im C-Sharp sitzen könnte. Ich kann eigentlich genau hier in der XAML sitzen, oder? Sie finden diese Ansicht vielleicht etwas intuitiver, aber das liegt wirklich an Ihnen. Ich zeige dir nur deine Möglichkeiten. Also eine Schrift, Attribute bolzen, oder? Das ist also unser Label. Dann haben wir unseren Button, öffnen Sie ein neues Button-Tag. Und ich öffne und schließe einfach gleichzeitig und fülle dann alle Attribute aus, oder? Der Text hier sagte, lass mich einfach rüberspringen, um zu zählen. Okay, klicke auf zwei Kegel. Und was hatten wir sonst noch? Wir hatten das Klickereignis, also auf was auch immer es angeklickt wird, wollen wir hier Öl. Sie sagen, dass Sie einen neuen Event-Handler erstellen können. Ich klicke einfach darauf, dass es ein Formular generiert hat, in dem du dir ansehen wirst , was für uns generiert wurde. Wir können ihm die gleichen zentrierten und vertikalen, horizontalen und vertikalen Zentrierattribute geben. Und ich glaube, dass ich es vorerst dabei belassen werde. Lasst uns jetzt zu unserem Code dahinter springen. Der Code hinter der Datei wird normalerweise unter der XAML-Datei verschachtelt, oder? Und wenn Sie es sich ansehen, sehen Sie teilweise und es hat den gleichen Namen wie die XAML-Dateien. So teilweise bedeutet C-Sharp nur, dass ich mehrere Klassen habe und jede Codedatei genau wie eine Instanz dieser Klasse oder ein Teil der Definition dieser Klasse ist . Dies ist also Teil der Definition in der XAML-Datei und die C-Sharp-Datei ist Teil der Definition. Und dieser erbt von der Inhaltsseite. Jetzt habe ich schon, ich habe das private Feld für die Kegel gemacht. Wir haben unseren Konstruktor und dann haben wir diese Methode namens initialize component. Denken Sie also daran, dass wir auf der vorherigen Seite alles definiert hätten , was auf dem sichtbaren Teil unserer Seite gewesen wäre. Innerhalb unseres Konstruktors wird die Komponente initialisieren, die genau das tut , außer dass sie neben dem, was wir in der XAML-Datei tun, automatisch generiert wird. Wenn Sie es sich also ansehen, werden Sie feststellen, dass Sie die Namen und Typen des Steuerelements entsprechend sehen . Also alles, was Sie innerhalb des Konstruktors tun werden , würde ich entweder vor oder nach der Initialisierung der Komponente empfehlen , aber ändern Sie diese Neun nicht. Jetzt haben wir unser Klickereignis , das für uns generiert wurde. Und was ich tun werde , ist einfach denselben Click-Ereigniscode aus dem vorherigen Steuerelement von der vorherigen Seite wiederzuverwenden denselben Click-Ereigniscode aus dem vorherigen Steuerelement , damit wir das gleiche Verhalten haben, richtig? Jetzt. Um das zu testen, gehe ich zur App-Shell und sage keine Testseite, sondern neue Seite eins. In Ordnung. Lassen Sie uns also eine neue Seite erstellen, unsere erste große Seite und testen Sie dies aus. Wenn das geladen wird, erhalten wir ein sehr ähnliches Layout. Wir können oben sehen , dass es sich um eine neue Seite eins handelt. Und wenn wir klicken, erhalten wir das gleiche Verhalten. An dieser Stelle kennen Sie jetzt zwei Möglichkeiten, eine Seite in Ihrem Mund zu erstellen Sie können entweder den C-Sharp-Code verwenden und alle Ihre Elemente nach Belieben kodieren. Oder du kannst es dort mischen, wo du die XAML sowie den Code dahinter hast. 5. MAUI verstehen: Alles klar Leute, also werden wir uns in dieser Lektion auf Leodes konzentrieren, oder? Lassen Sie uns damit beginnen, eine neue Inhaltsseite zu erstellen. Ich habe das bereits getan, aber Sie können mit der rechten Maustaste klicken, zu Neues Element hinzufügen gehen und dann wollen wir eine neue Inhaltsseite, ich nenne es Layoutbeispiel. Also kannst du weitermachen und das machen. Und während wir dabei sind, lassen Sie uns einfach den eigentlichen Knoten , dieses Layout-Beispiel ist unsere neue Homepage, oder? Im Layoutbeispiel haben wir also unser Stack-Layout. Wir haben dieses Stack-Layout bereits gesehen. Wir haben andere Layouts. Wir haben ein vertikales Stack-Layout. Okay, wie ist das für Größe? Jetzt können wir von unserem Layout aus tatsächlich wie Ränder und Polsterungen festlegen. Und wenn Sie mit HTML vertraut sind, dann wissen Sie, dass der Rand bedeutet, dass überall, wo sich das Element befindet, so viele Leerzeichen zwischen sich selbst und dem nächstgelegenen Element in allem schaffen wird und dem nächstgelegenen Element Richtung, die wir angegeben haben. Während die Polsterung die Dicke ganzheitlich ist, möchten wir, dass das Element selbst so ist, dort auch die Richtungsbedingung gilt, genau wie bei der Marge. Mit der Definition des Layouts können wir tatsächlich sagen, dass wir eine Polsterung wünschen. Und was ist, wenn ich das in alle Richtungen auf 30 setze? In Ordnung? Also trennen wir einfach Kommas. Okay, ich werde tatsächlich verschiedene Werte verwenden , damit wir zumindest sichtbar sehen können , wo diese Füllwerte angewendet werden, oder? Ich bin mir sicher, dass wir eine seltsame Größe sehen werden, aber wir können immer zurückgehen und das ändern. Wir können die Marge auch festlegen, wenn wir wollen. Also zeige ich dir nur, was deine Optionen sind, oder? Das ist also der vertikale Stapel Leo. Das vertikale Stapel-Layout bedeutet, dass alles von oben nach unten gestapelt wird , eines, übereinander, wenn es nach unten geht. In Ordnung. Das nächste sehr beliebte wäre also ein Raster. Nein, ein Raster gibt uns im Allgemeinen so etwas wie ein Tabellenlayout, das eins zu eins sehr nützlich sein kann , nebeneinander steuert usw. Wenn wir das wollen, könnten wir tatsächlich innerhalb dieses Stapels -Layout, definieren Sie ein Raster. So können wir einfach unser Raster öffnen, öffnen und schließen. Und dann können wir innerhalb des Rasters unsere Definitionen treffen. Bevor wir jedoch unsere Definitionen treffen, möchten wir Spaltendefinitionen innerhalb dieses Rasters erstellen. Mit Spaltendefinitionen können wir angeben, wie groß jede Spalte sein soll. Und basierend auf dem, was wir angeben , dass die Anzahl der Spalten, die wir erhalten werden. Also würdest du wahrscheinlich so etwas wie Auto sehen. Auto bedeutet, welche Größe das Steuerelement hat, wenn es hineingeht. So groß sollte diese Kolumne sein. Wir können auch einen höheren Wert verwenden und sagen, nun, diese Spalte genau so viele Räume erfüllen. Und dann, wie ich schon sagte, so viele wir in so viele Kolumnen stecken, bekommen wir. Im Moment habe ich drei verschiedene Spalten definiert. Zwei von ihnen sind auto, einer ist ein fester Wert von 30. Stimmt's? Jetzt kann ich innerhalb dieser Spalten verschiedene Steuerelemente definieren, oder? Sagen wir also, ich wollte einen Knopf in Spalte eins. Und button ist ein selbstschließendes Tag. Und was will ich in diesem Button? Zuallererst möchte ich, dass es in der Rasterspalte ist. Also kann ich hier drüben Kolumne sagen. Und ich sehe, dass du in der ersten Rasterspalte sein solltest. Also fängt es an, bei 0 zu zählen. Das wäre also 012, oder? Indem ich also die Rasterposition 0 sehe, oder lass es mich tatsächlich hier austippen. Rasterspalte ist gleich 0. Das heißt, ich will dich in der allerersten Kolumne haben. Und sagen wir, ich wollte, dass der Text Test Button ist. Und Breite. Nehmen wir an, eine Breitenanfrage ist 100. Und wenn gewünscht, klicke ich auf Event, wir könnten setzen, was wir wollen, wir können es einsetzen, oder? Also mal sehen, das war's für den ersten. Lassen Sie uns diese Zeile einfach duplizieren. Also habe ich gerade D. kontrolliert und dann will ich diesen in der dritten Klasse, die Rasterspalte zwei sein würde, tut mir leid, in der dritten Spalte, die eine Spalte mit der Nummer zwei sein wird. Denken Sie also an 012. Und dieser wird die gleiche Breite haben. In Ordnung, so können Sie damit beginnen, Ihre Kontrollen auszulegen. Weißt du wirklich was wenn ich will? Nun, lassen Sie mich auf andere Modifikationen verzichten und testen wir einfach das alte. Also mach weiter und lass es laufen. Und während du es betreibst, führe ich dich einfach durch das, was du auf meinem Bildschirm ansiehst. Sie können also sehen, dass die Grenzen, das Layout irgendwie seltsam sind und das liegt seltsam sind und das den verschiedenen Werten, die wir verwenden. Zehn waren also nach links, 50 von oben, Haiti und dann zehn darunter, rechts. Es ist also links, oben, rechts, unten. Und was wir dann auch bemerken würden, ist, dass die Schaltflächen in den automatischen Spalten. Und weil wir eine Lücke von 30 haben, wir diesen Raum dazwischen so geschaffen, oder? Das sind also kleine Design-Dinge. sind Dinge, die du vielleicht anders machen möchtest. Aber der Punkt ist, dass Sie, sobald Sie wissen oder schätzen, wie die Leodes funktionieren , sie so funktionieren können, wie Sie es möchten. So kannst du weitermachen und mit diesen herumspielen. Sie haben verschiedene Layouts. Wie ich schon sagte, Sie haben das vertikale Stapel-Layout. Und Sie können tatsächlich mehr Informationen über die verschiedenen Layouts aus der Dokumentation für das dotnet Maui-Layout erhalten die verschiedenen Layouts aus . Sie haben also das Stack-Layout, Sie haben das absolute Layout. Wir haben uns das Raster angeschaut, Sie haben die Flex-Layouts Flakes ist im Grunde fast so, als ob Sie jemals Bootstrap verwenden, ich werde Parallelen ausführen ich werde Parallelen ausführen, weil Sie höchstwahrscheinlich ein Web waren irgendwann Entwickler und du hast Bootstrap benutzt. Mit Bootstrap hast du also eine Rolle und sie hat bis zu 12 Spalten Leerzeichen. Und wenn Sie das überschreiten, wird es bis zum nächsten Raum umgebrochen . Das sind alle Flocken arbeiten. Du legst also so viele Elemente von links nach rechts. Wenn es sie dann auf den Weltraum übersteigt, wickelt es sich einfach und es fällt und fällt und fällt ab, oder? Ich bin mir sicher, dass du das kannst, du siehst dir diese Dinge nur an. Dein Gehirn wird verrückt. Und wenn Sie hier nach links schauen, sehen Sie andere Arten von Laozi des Rasters. Sie haben die SAR, über die wir über das Raster oder die Idee gesprochen haben, den Ordner. Du hast es absolut geschuldet. Sie haben das horizontale Stapel-Layout und das, das wir uns angeschaut haben, das vertikale Stapel-Layout. 6. Globale Markup festlegen: Willkommen zurück Leute. In dieser Lektion werden wir uns XAML, Markup, Extension Snow ansehen . meiste Zeit. Wir werden XAML haben, das wir standardisieren wollen, oder? Nehmen wir zum Beispiel an, wenn wir zur Hauptseite zurückkehren, haben wir verschiedene Labels und es kann vorkommen, dass Sie mehrere Labels über das jeweilige Steuerelement haben über das jeweilige Steuerelement und Sie möchten, dass alle von ihnen die gleiche Größe. Wenn Sie jetzt fünf Etiketten haben und die Größe fünfmal einstellen, wäre es mühsam, sie fünfmal zu ändern und diese dann mit 50 zu multiplizieren. Ich glaube, du kommst dahin, wo ich hingehe. Markup-Erweiterungen helfen uns also, wie ein statischer Wert im dahinter stehenden Code zu sitzen ein statischer Wert im dahinter stehenden Code und dann auf diesen statischen Wert zu verweisen. Wenn wir also eine Änderung vornehmen müssen, haben wir die Änderung einmal vorgenommen. Also lasst uns sehen, was das braucht. Wenn wir auf den Code für unsere Hauptseite über XAML gehen , können wir als erstes unseren Wert definieren , den wir wollen. Also sage ich public const, double. Die Schriftgröße ist gleich c 22. In Ordnung? Das ist also die Schriftgröße , von der wir wissen, dass wir es wollen. Und ich werde die richtige Namenskonvention befolgen. Da es sich um eine Öffentlichkeit oder eine Eigenschaft handelt, werde ich Großbuchstaben haben lassen oder mit epithelialer Iteration beginnen. Dann muss ich innerhalb dieser Klasse definieren oder anstelle derselben Datei mit diesem Namespace muss ich eine andere Klasse definieren , also öffentliche Klasse. Und dann sage ich globale Schriftgröße. Und dann verlangt die Namenskonvention hier, dass ich sie mit der Worterweiterung anfüge. Und dann lasse ich es von meiner Markup-Erweiterung erben , die mir dann sagt, dass ich die Schnittstelle implementieren muss. Die Interface-Implementierung hierfür kommt also mit einer Methode namens „Wert bereitstellen“. Und es braucht einen KI-Dienstleister, der eingespritzt wird. Und dann müssen wir hier angeben oder was auch immer wir wollen. Also werde ich einfach sagen, zurück gemeine Seite, drehe die gemeine Seite um. Und das ist der Name der Klasse hier. Lassen Sie mich einfach sicherstellen, dass es weiß, oh, ich teile die Rückkehr falsch auf, gebe die Hauptseite zurück. Und dann würden wir die Schriftgröße sehen. Wenn es sich um eine Referenz handelt, weiß es im Wesentlichen , dass die Schriftgröße auf das Steuerelement der Hauptseite zurückgegeben wird. Und dann könnte die Hauptseite entsprechend darauf zugreifen. In unserer XAML ist also, was wir zuerst tun wollen, was wir zuerst tun wollen, der Namespace oben definiert. Wir müssen es also wissen lassen , dass ein neuer Namespace da ist. Also sagen wir XML- und XML-Namespace-Doppelpunkt und geben ihm dann einen Namen. Also hier sehe ich meine Schriftgröße. In Ordnung? Und dann wird das gleich sein. Und dann sage ich CLR, Bindestrich Namespace, Doppelpunkt und dann den Namespace, der damit verursacht, wo er definiert wurde. Es wurde im Namespace definiert, meinem ersten Mawi up. Das ist also der Namespace-Wert, der da draußen ist. In Ordnung. All das ist also nur eine Verkabelung. Keine oder Hauptseite weiß also, wie man auf die Schriftgröße Bezug nimmt. Wenn ich nun auf die Schriftgröße verweisen möchte, verwenden wir diese Beschriftung als Beispiel. Anstatt den Wert wie gesagt, Schriftgröße, zu schreiben, werde ich auf einen verweisen, den Namespace-Alias hier, den ich festgelegt habe. Mal sehen, gehen Sie zu diesem Namespace und besorgen Sie mir dann die globale Schriftgröße. Okay, du hast also gesagt, dass das für mich automatisch fertiggestellt wurde. Ich musste nicht auf diesen Zeh tippen, weil er bereits identifiziert, dass ich diesen Wert aus diesem Namespace ermitteln kann. Was ist die globale Schriftgröße? Wieder einmal haben wir die globale Schriftgröße definiert. Wenn also die 12. und globale Schriftgrößenerweiterung der Name der Klasse ist, benötigen wir die Worterweiterung nicht, wenn wir im Akkord darauf verweisen. So können wir diesen Code einfach überall haben, ohne dass wir diese spezifische Schriftgröße verwenden möchten. Wie Sie zeigen, gehen Sie zur App-Shell und wir ändern die Hauptseite. Und wenn wir das testen, sehen Sie, dass unser Label richtig auftaucht. Der Sinn dieser Übung besteht also darin, Ihnen zu zeigen, wie Sie diese statischen Werte für mehr globalen Zugriff und Reichweite festlegen können . Wenn Sie also die Änderung erfüllen müssen, haben Sie nur einen Ort, an dem Sie die Änderung vornehmen müssen. Und es kann sich auf mehrere Steuerelemente auswirken. 7. Definiere plattformspezifische Werte: Alles klar Leute, also schauen wir uns das plattformspezifische Markup an. Was also passiert, ist das Gerücht, dass wir eine Gruppe von Seiten und Steuerelementen haben. Und wir müssen mehrere Geräte bedienen. Einige Geräte haben möglicherweise bestimmte Designüberlegungen als andere. Und Mawi macht es uns sehr einfach, bestimmte Werte für bestimmte Betriebssysteme innerhalb des Codes anzugeben bestimmte Werte für bestimmte . So wird es kontextuell Lord oder rendern den Inhalt gemäß watch wird deklariert. Lassen Sie uns also damit beginnen, uns anzusehen, wie Sie sehen würden, auf welchem Gerät wir wollen, unabhängig von Rand oder Polsterung mit unserem vertikalen Stapel-Layout. Für Kontexte bin ich wieder im Layout dieser XAML-Datei. Was ich in dieser Akte mache, ist ein Knie zu geben, oder? Also werde ich sehen, dass der x Doppelpunktname gleich ist, und dann ist das ein C Leo. Die Aktie. Das sollten wir das Layout stecken lassen. Lassen Sie mich das Stack-Layout machen. Okay, jetzt, da wir diesen Namen im Code dahinter haben , kann ich darauf verweisen, dass er direkt im Layout-Konstruktor ist . Was wäre, wenn ich sagen wollte, dass das V-Stack-Layout-Punkt-Padding. Ich möchte, dass dies etwas anderem entspricht, wenn es sich um eine iOS-Plattform handelt, als wenn es etwas anderes ist, oder? So kann ich Geräteinformationen sehen, was eine spezielle Klasse ist, die es uns ermöglicht, die Plattform zu spezifizieren. Also Geräte-Info-Punkt-Plattform, wenn sie gleichwertig ist und dann haben wir Zugriff auf die Geräteplattform, die so ziemlich eine Aufzählung ist. Sobald ich es sehe, gehen wir los. Also entwirf Plattform. Wir können für Android, iOS, Mac, Katalysator, macOS, diesen usw. angeben . Hier sehen Sie alle Geräte, die Sie tatsächlich versuchen können , den Handel zu erleichtern. Lassen Sie uns also sagen, dass ich für iOS, wenn die Geräteplattform für das iOS ist, wenn die Geräteplattform für das iOS ist, hier nur einen ternären Operator verwenden werde. Dann möchten wir eine neue Dicke definieren, bei der es sich um das Objekt oder den Strich handelt, der für das Auffüllen verwendet wird. Also lass mich, lass mich ein bisschen zurückgehen. Wenn es also iOS ist , wollen wir eine neue Dicke. Und sagen wir, ich wollte 30 mal zehn, 30 mal zehn usw. Und dann würde ich sonst wollen, dass es nur 30 sind, ganz unsere eigenen. Also kann ich einfach 25 selbst sagen oder entlocken, richtig. Und das war's. Genau da. Ich gebe einfach an, dass die Polsterung anders sein soll. Wenn wir ein iOS-Gerät verwenden , will ich das. Ansonsten tun Sie das für jedes andere Gerät. Wenn Sie also auf weitere Szenarien eingehen möchten, möchten Sie wahrscheinlich eine if-Anweisung oder eine Switch-Anweisung verwenden . Damit es sich nicht um einen ternären Operator handelt, vergleichen wir nur mit einem nach dem anderen. In Ordnung? Das ist also alles, was wir im Code dahinter tun werden . Nein, alternativ könnten wir im Markup die Attribute so setzen, dass das Auffüllen gleich ist, und dann könnten wir unsere eigene Plattform direkt hier durchsetzen. So gut auf der Plattform zu sehen. Und dann listen wir einfach alle potenziellen Plattformen auf. Und hier können wir noch einmal mit iOS beginnen und wir können die Werte definieren, die wir gerade verwenden. Lass mich einfach sehen, ob ich sie schnell schnappen kann . Einige willkürliche Werte. Ich nehme das nicht wirklich ernst, oder? Nein. Aber wir können sie definieren. Sie müssten in einfachen Anführungszeichen stehen. Einfache Anführungszeichen, weil wir hier bereits in doppelten Anführungszeichen stehen. Sie möchten also einfache Anführungszeichen verwenden, um die iOS-Werte und jeden anderen Wert anzugeben. Und dann wie wir es getan haben, haben wir iOS gemacht und dann Standard, also Komma. Und dann sehen Sie Standard als eine der Optionen, was bedeutet, dass alles, was nicht iOS ist, welchen Wert möchten Sie? Ich will, dass es ist, mal sehen, 30, oder? Das ist also eine gute Möglichkeit, einfach anzugeben, dass das Padding auf der Plattform iOS das oder jenes ist. Wir könnten auch etwas mit der Hintergrundfarbe machen, oder? Also konnte ich hier Hintergrundfarbe sehen, oder? Und dann mach das Gleiche auf der Plattform. Auf der Plattform iOS möchte ich, dass es, mal sehen, grün ist, oder? Auf Android möchte ich, dass es Alice, Blau usw. damit wir weiter und weiter weitermachen können. Das ist alles, was wir tun können, plattformspezifische Konfigurationen im selben Markup. Erneut nutzen Sie unsere Singular-Codebasis bis zum Maximum. 8. Teilte Ressourcen: Hey Leute, willkommen zurück. Dieses Mal werden wir uns gemeinsam genutzte Ressourcen ansehen. Gemeinsame Ressourcen wären eine Erweiterung dessen, was wir zuvor mit der Verlängerung angeschaut haben, außer dass sie nicht so eng mit einer einzigen Kontrolle verbunden sein werden , oder? Beginnen wir also damit, eine neue Klasse hinzuzufügen, klicken Sie mit der rechten Maustaste auf Neue Klasse hinzufügen. Und dann nenne ich es Shared Resources“. Klicken Sie auf Hinzufügen. Und dann machen wir das in statischer Klasse. Dies ist also eine statische Klasse, die Shared Resources genannt wird. Und dann können wir hier einige öffentliche statische schreibgeschützte Eigenschaften definieren , oder? Lassen Sie uns damit beginnen, vielleicht zu sagen , dass wir eine bestimmte Farbe für unsere Schriftart haben wollen. So statisch öffentlich, statisch , schreibgeschützt, und ich nenne es Swell. Der Typ wird Farbe sein. Farbe ist also ein Typ, und nennen wir es Schriftfarbe. Ich buchstabiere Farbe mit einem U also wirst du immer sehen , wie ich das mache. Und dann geben wir ihm einen Wert, oder? Unsere Schriftfarbe hier wird also Farbpunkte sein. Und wir können es von Ende aus tun, von RGB und so weiter. Lass uns RGB-Sache machen, mit der es einfach genug ist, um auszukommen. Wenn wir also wollten, dass RGB rot, grün und blau ist , können wir ganze Zahlen zwischen 0255 verwenden. Wenn Sie mit CSS vertraut sind, sollte das für Sie kein fremdes Konzept sein. Also können wir etwas wie 0 Komma 0 Komma 25 für Argumente verwenden. Das würde uns also eine blauere Schriftfarbe geben. In Ordnung, wir können auch andere Werte festlegen , damit ich meine Hintergrundfarbe einstellen kann, ich könnte die Vordergrundfarbe einstellen. Ich könnte alle möglichen Dinge einstellen. Sobald ich den Datentyp habe, gebe ich ihm einen Namen und kann ihm dann einen Wert geben. Es kann in diese statische Datei mit freigegebenen Ressourcen eingefügt werden. Beachten Sie, um diese Ressource oder eine der Ressourcen aus dieser Datei zu verwenden , muss ich nur zu einem Steuerelement wechseln. Lass mich auf die neue Seite eins gehen. Und dann möchte ich hier oben etwas Ähnliches machen , wo ich den Namespace oder den XML- und S-Doppelpunkt einschließen muss. Und dann gebe ich ihm einen Namen, nennen wir es Ressourcen. Und ich sage, du bist gleich CLR, Bindestrich Namespace, Doppelpunkt. Und der Namespace für meine Datei mit freigegebenen Ressourcen ist in der Tat immer noch mein erstes MAOI einmal, natürlich geht es in einen Ordner, wir sind nicht p und Spannungen in einer Ordnerstruktur sind hier zu schwierig weil ich das leicht in den Ressourcenordner hätte legen können. Lassen Sie mich das also tatsächlich machen. Also verschiebe ich diese Datei mit freigegebenen Ressourcen in den Ordner Resources. Und dann werde ich den Namespace synchronisieren, damit wir sicherstellen können, dass er sich im aktuellen Namespace befindet den Namespace synchronisieren, damit wir sicherstellen können, dass . An dieser Stelle, wenn ich es in die XAML einfüge, muss ich sicherstellen, dass ich es auf den Warenkorb-Namespace zeige. Also waren wir ein neuer CLR-Namespace auf der ersten Seite. Der Namespace, Sorry, ist mein erster mein Weg nach oben. Dots-Ressourcen, oder? Jetzt wissen wir, wo dieser Button ist. Um im Code darauf zu verweisen wo immer ich möchte, dass diese Farbe verwendet werden soll. Sagen wir, ich will es hier im Label haben. Dann würde ich mich für das Attribut entscheiden, das Text sagt, Farbe ist gleich. Und dann öffne meine geschweifte Klammer. Zuallererst würde ich x Doppelpunkt statisch sagen. Das weiß also, okay, ich bekomme meinen Wert für mein statisches Mitglied. Also statisches Mitglied, lass mich meine Rechtschreibung richtig machen. Und das ist gleich, und dann sehen wir eine Ressource, die unser Alias für unseren neuen Speicherplatz ist, Sherrys gemeinsam genutzte Ressourcen, die der Name unserer Datei ist, und dann Schriftfarben. Hier sehen wir also, wie Sie die Schriftfarbe aus dieser Datei mit statischen freigegebenen Ressourcen abrufen . Irgendwo in unserem Code möchten wir diese Farbe teilen. Wir können so etwas machen. Und wir können noch einmal, so viele Ressourcen hier aufgelistet haben , von denen wir wissen, dass wir über die gesamte App konsistent bleiben wollen. So kannst du weitermachen und das alte testen. Sie können es ausführen, es an mehreren Stellen platzieren und einfach sicherstellen, dass jede Farbe, die Sie hier definiert hätten hier definiert hätten tatsächlich in diesen Bereichen angezeigt wird. 9. Mehrere Seiten navigieren: In dieser Lektion werden wir uns Einrichten der Fly-Out-Navigation befassen, bei dem Einrichten der Fly-Out-Navigation befassen, bei der ein Fenster für den ausgewählten Menüpunkt von dieser Seite in die Mitte fliegt des Bildschirms. Und es würde normalerweise das haben, was wir Hamburger nennen. Diese drei Zeilen in der oberen, linken oder rechten Ecke des Bildschirms, ich denke, es ist wahrscheinlicher, dass Sie es links sehen werden. Aber wir werden diese Hamburger-Pillen hier oben sehen. Wenn wir darauf tippen, sollten wir in der Lage sein , auszuwählen , zu welcher Seite Sie gehen möchten , und dann wird diese Seite einfliegen. Werfen wir also einen Blick darauf, was wir tun müssen, um das offene Laufen zu bringen. Entschuldigung, die Reise beginnt mit unserer App-Shell. Bisher haben wir mit dieser Datei interagiert, wann immer wir die Startseite ändern wollten, oder? Wir konzentrieren uns also auf das Layout-Beispiel. Wir haben es geändert, wir haben uns auf die Hauptseite konzentriert oder sie geändert usw. Was passiert, ist, dass wir tatsächlich mehrere Knoten in diesem Bereich haben können . Also erstelle ich eine für jede Seite , die wir bisher haben. Also haben wir zum Beispiel Layouts, und ich werde auch den Titel ändern. Layoutbereich und das Beispiel für das Tantiemen-Layout. Wir haben auch eine neue Seite eins. Und zwar sind dies keine offiziellen Seitennachrichten, aber sie sind da. Also lasst uns einfach mit ihnen arbeiten. Und ich glaube nicht, dass wir noch einen anderen Pedro haben. Ja, wir haben eine Testseite. Also habe ich eine Testseite. Und ich zeige dir wirklich nur, dass es egal ob es die XAML-Seite oder die C-Sharp-Seite ist, jede davon ist eine Option, oder? Aber wenn wir laufen, unsere App nichts sichtbar anderes sehen, außer vielleicht diejenige anzuzeigen , die zuerst in der Liste steht. Was also passiert , ist, dass wir eine Show über das Fließverhalten sehen müssen . Und dann haben wir es von behindert zum Ausfliegen geändert. Okay, also lasst uns diese Anpassung vornehmen und testen. Wenn unsere App läuft, werden wir sehen, dass wir unsere Hamburgerpillen haben. Wenn wir darauf tippen, sehen wir, dass es rausfliegt. Und mit jedem Titel , den wir gegeben haben, können wir sehen, dass er erscheint, also klicken wir auf Layout-Beispiel. Da sind wir los. Wenn wir eine neue Seite wählen, gehen wir los. In Ordnung. Auf jeder Seite, die wir bisher erstellt haben, können wir mit dieser Methode ohnehin leicht zwischen ihnen wechseln , das war ziemlich einfach. Ich bin sicher, Sie merken, dass dies eine sehr einfache Übung war. Wenn wir nun Symbole für diese Menüpunkte wollten, wäre es so einfach wie innerhalb des Shell-Inhalts. Wir könnten einfach Icon sagen und ihm dann den Weg geben. Also lasst uns vielleicht die Dotnet-Bots ausprobieren, ich denke Hauptseite, wie man auf das Dotnet verweist, aber ich wollte nur sicherstellen, dass ich diesen Pfad richtig bekomme. Und nun, es hat einfach den Weg dorthin. Also lasst uns das versuchen. Lassen Sie uns einfach das gekaufte Dotnet auf die Hauptseite stellen und lassen Sie uns das testen. Da sind wir los. Wenn ich also icon dotnet setze, aber wenn ich auf das Menü tippe, sehe ich jetzt dieses Symbol. Also jedes PNG, jede Ressource, die Sie hinzufügen. Und noch einmal würden Sie diese Ressourcen hier hinzufügen, das dotnet, was genau hier in Bildern zu finden ist. Sie können diese Bilder jederzeit nach Bedarf hinzufügen. Und dann fügst du einfach das Icon zu jedem Menüpunkt hinzu. So gibt es deiner App ein wenig mehr Charakter und ein bisschen mehr, ein schöneres Aussehen und Gefühl, während du weitermachst. Die nächste Art der Navigation, die wir uns ansehen möchten, ist die Navigation mit Registerkarten. Tab-Navigation stammt normalerweise vom unteren Bildschirmrand und dann haben Sie ein Symbol pro Registerkarte, das Sie auswählen und die frühe Neuzeit sehen können, oder? Also sind wir immer noch hier in der Schale. Und was wir tun möchten, ist eine Registerseite zu erstellen. Also öffne ich ein neues Tag, und dieses wird die Tab-Leiste sein. Und dann werden wir innerhalb der Tab-Leiste Tabs haben. Also haben wir das Tub-Tag. Und dann würde innerhalb dieses Tab-Tags diesen Shell-Inhalt haben. Okay, also lasst uns einfach ein paar davon machen. Also erstelle ich nur ein paar Wannen, drei weitere Wannen und lege dann den Shell-Inhalt in jede einzelne ein. Okay, also verwandeln wir uns nur von der Out zu unserer Navigation mit Registerkarten, oder? Und wie Sie sehen können, ist es ziemlich konsistent. Die Syntax ist also nicht die schwierigste Syntax, die man erfassen muss. Und wenn Sie bereits die Fliege oder das Verhalten aktiviert haben. Ich zeige Ihnen also, wie sich die beiden kombinieren können, um eine bestimmte Benutzererfahrung zu bieten. Okay, also sind wir hier in der App. Wenn ich zu den Navbar-Pillen gehe, sehe ich nichts. Wenn ich unten schaue, sehe ich nichts. Wenn ich jedoch klicke, werden Sie feststellen, dass es sich ändert. Offensichtlich ist da etwas, aber wir brauchen noch ein paar Elemente. Erstens, das Symbol wäre nicht im Shell-Inhalt, es wäre in der Wanne. So kann der Tab selbst einen Titel erhalten. Also könnte ich sagen, hier meinen PH. Und dann könnte ich diesem auch diese Ikone geben. Nun, lass mich, ich glaube, ich habe es schon in der Zwischenablage. Da sind wir los. Okay, also lasst uns diesen ersten Schritt testen. Okay, also los geht's. Also hier haben wir Hauptseite mit dem Icon. Okay, also könntest du einfach weitermachen und das machen. Also habe ich keine anderen Icons oder ohne das gleiche Symbol für die anderen Wannen zu behalten . Aber ich werde natürlich das Label ändern, Layout. Dieser Tab wäre eine neue Seite. Und die letzte war die Testseite. Nachdem ich all diese Änderungen vorgenommen habe, führe ich meine App erneut aus. Und wenn ich es mir jetzt ansehe sehe ich meine Tabs, oder? Das ist also die Tab-Navigation. Nett und einfach. Zwei besteht darin, zwischen allen Seiten zu navigieren , die Sie in Ihrer App haben. Sie haben das Flyout-Menü und Sie haben die Registerseite. 10. Schlussbemerkung: Alles klar Leute, herzlichen Glückwunsch , dass du es so weit geschafft hast. Wir haben erfolgreich unsere allererste mobile App mit dotnet Maui erstellt . Wisse, dass es nicht viel ist, gerade nicht viel zu sehen. Es hat keine wirkliche Funktionalität, aber wir haben zumindest die Kernkonzepte unter unseren Gurten. Wir wissen, wie man neue Seiten erstellt. Wir verstehen, wohin wir gehen müssen , um bestimmte Dinge zu erledigen. Wir verstehen, wie man den Code dahinter navigiert oder Ereignisse einrichtet, wie wir visuelle Ereignisse mit C-Sharp-Code generieren können. Wir haben all diese Beispiele hier und wir wissen auch, wie man zwischen mehreren Seiten navigiert. An dieser Stelle können wir das also einfach hinzufügen, die Quellcodeverwaltung. Sie können in den angehängten Ressourcen für dieses bestimmte Video nach dem entsprechenden Link suchen. Und wenn wir zurückkommen, werden wir mit dotnet Maui eine echte App erstellen .