Share
Bei der Gestaltung und Anordnung der Bildschirme Ihrer Anwendung haben Sie zwei Hauptoptionen: Schreiben von Code oder Verwenden von XAML. Wenn Sie jemals eine WPF- (Windows Presentation Foundation) - oder Silverlight-Entwicklung durchgeführt haben, sind Sie wahrscheinlich bereits mit XAML vertraut. XAML ist das eXtensible Application Markup Language Das wurde erstellt, um das Erscheinungsbild einer Anwendung zu definieren, ohne dass alles im Code verarbeitet werden muss. Xamarin.Forms funktioniert mit beiden Optionen. Letztendlich liegt es an Ihnen, zu entscheiden, welche Option Sie bevorzugen.
Es ist wichtig zu wissen, dass die für Xamarin.Forms verwendete XAML nicht mit anderen Formen von XAML und XAML-Tools kompatibel ist.
Wenn Sie der Typ von Person sind, der gerne im Code ist und nichts mit Markups oder einem Designer zu tun haben möchte, dann werden Sie sich wahrscheinlich mit dieser Option sehr wohl fühlen. Sie instanziieren verschiedene Arten von Aussicht Objekte und fügen sie direkt zu einem Seite oder zu einem Layout auf einen Seite. Hier ist ein einfaches Beispiel für die Erstellung eines SimplePage Klasse, die ein paar instanziiert Aussicht Objekte, und fügen Sie sie dem hinzu Seite durch ein StackLayout Objekt.
öffentliche Klasse SamplePage: ContentPage public SamplePage () Padding = new Thickness (20); var label = new Label Text = "Ich bin eine einfache Seite", BackgroundColor = Color.Blue, Font = Font.SystemFontOfSize (30), WidthRequest = 150, HeightRequest = 40; var button = new Button Text = "Ich habe eine Schaltfläche", BackgroundColor = Color.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 200, HeightRequest = 200; var entry = new Entry Placeholder = "Ich habe ein Eingabefeld", BackgroundColor = Color.Green, WidthRequest = 200, HeightRequest = 150; Inhalt = neues StackLayout Abstand = 10, Kinder = Schaltfläche, Eintrag, Beschriftung;
Wie Sie sehen können, die Aussicht Objekte haben eine Reihe gemeinsamer Eigenschaften, mit denen Sie Text, Farben, Abstand, Höhe, Breite usw. einstellen können. Jetzt müssen Sie nur noch die GetMainPage Methode in der App Klasse, um eine neue Instanz von zurückzugeben Beispielseite Klasse und los gehts.
Niemand hat mir jemals vorgeworfen, Designer zu sein, aber es ist so einfach, einfache Seiten im Code zu erstellen.
Wenn Sie es vorziehen, das Erscheinungsbild Ihrer Anwendung von der Logik und Implementierung zu trennen, ist XAML möglicherweise der richtige Weg. Mit XAML können Sie das gesamte Layout Ihrer Anwendung in einem speziellen XML-Format erstellen, das Xamarin in Seiten, Layouts, Ansichten und Zellen übersetzen und dem Benutzer anzeigen kann. Wenn Sie XAML noch nie verwendet haben, kann es etwas gewöhnungsbedürftig sein. Sobald Sie jedoch den Dreh raus haben, kann es tatsächlich ganz nett sein.
Um XAML in Kombination mit Xamarin.Forms verwenden zu können, müssen Sie Ihr Projekt mithilfe von erstellen Leere App (tragbare Xamarin.Forms) Vorlage, damit der gesamte Xamarin.Forms-Code in seine eigene DLL getrennt werden kann.
Im Codebeispiel des vorherigen Abschnitts haben Sie ein sehr einfaches erstellt Inhaltsseite Klasse im Code. Um dasselbe zu schaffen Inhaltsseite Klicken Sie mit XAML mit der rechten Maustaste auf das PCL-Projekt und wählen Sie Hinzufügen> Neues Element. Von dem Neues Element hinzufügen Wählen Sie im Dialogfeld die Option Formular Xaml-Seite Vorlage und ersetzen Sie den Standardinhalt durch Folgendes:
Wenn Sie Ihre Anwendung ausführen, sollte derselbe Bildschirm wie im Codebeispiel angezeigt werden. Das Seite, Layout, und Aussicht Types sind XML-Elementen zugeordnet, und die Eigenschaften sind die Elementattribute. Sie können beide Optionen nutzen, um vollständig anpassbare, plattformübergreifende Benutzeroberflächen zu erstellen.
Sie können Apps erstellen, wo Sie die erstellen Aussicht Objekte für Ihre Seite Objekte und legen ihre Eigenschaften explizit fest, aber das wird schnell umständlich. Wenn Sie Eigenschaften explizit in Ihrem XAML-Code festlegen, können Sie diese XAML nicht mehr verwenden Seite für alles andere. Mit anderen Worten, Sie müssen für jede gewünschte Variation neue XAML-Seiten erstellen. Wer hat Zeit dafür??
Wäre es nicht schön, wenn Sie wiederverwendbare XAML-Seiten ohne benutzerdefinierten Benutzeroberflächencode erstellen und alles logisch voneinander trennen könnten? Na sicher. Willkommen bei MVVM.
Model-View-ViewModel ist ein architektonisches Muster, das unter Berücksichtigung von XAML erstellt wurde. Im Kern teilt es das Grundkonzept anderer Architekturmuster wie MVP und MVC. Es wurde entwickelt, um Daten (die Modellebene) von der Präsentation (Ansichtsebene) zu trennen. Der Kanal zwischen den beiden ist der ViewModel. Das Ansichtsmodell ist eine Klasse, die die Kommunikation zwischen den Modell- und Ansichtsebenen über einen Mechanismus ermöglicht, der als bekannt ist Datenbindung. Die Datenbindung ist das Herzstück des MVVM-Musters und wird über XAML selbst ausgeführt. Schauen wir uns ein Beispiel an.
Beginnen Sie mit dem Erstellen einer neuen Xamarin.Forms-Anwendung, indem Sie die Option auswählen Leere App (tragbare Xamarin.Forms) Projektvorlage und Namen geben MyRecipeBox.
Wie Sie wahrscheinlich bereits vermutet haben, wird dies die Grundlage für eine einfache App sein, in der Rezepte gespeichert werden können. Beginnen wir mit dem Erstellen eines Grundmodells der App, eines Rezeptes.
In dem MyRecipeBox Erstellen Sie einen neuen Ordner und benennen Sie ihn Modelle. Dies ist keine Voraussetzung, es fügt dem Projekt lediglich eine Organisation hinzu, die immer hilfreich ist, wenn es größer wird. In dem Modelle Ordner, fügen Sie eine neue Klasse hinzu und benennen Sie sie Rezept. Ersetzen Sie die Standardimplementierung durch Folgendes:
öffentliche Klasse Rezept öffentliche Zeichenfolge Name get; einstellen; public string Beschreibung get; einstellen; public TimeSpan PrepTime get; einstellen; public TimeSpan CookingTime get; einstellen; öffentliche ListeWegbeschreibung get; einstellen;
Da Sie nun eine grundlegende Modellklasse haben, können Sie ein Ansichtsmodell dafür erstellen. Stellen Sie sich ein Ansichtsmodell als eine Klasse vor, die die Teile eines Modells enthält, die auf einem Bildschirm angezeigt und interagiert werden müssen. Um es einfach zu halten, werden wir uns auf die vier besten Eigenschaften konzentrieren.
Erstellen Sie einen neuen Ordner in der MyRecipeBox Projekt und nennen Sie es ViewModels. In dem ViewModels Erstellen Sie eine neue Klasse und benennen Sie sie RecipeViewModel. Bei der Übernahme des MVVM-Musters in .NET zeichnen sich ViewModels normalerweise dadurch aus, dass sie das INotifyPropertyChanged Schnittstelle. Diese Schnittstelle ermöglicht es anderen Teilen des Codes, Ereignisse zu abonnieren und die Datenbindung zu aktivieren. Ersetzen Sie die Standardimplementierung von RecipeViewModel Klasse mit folgendem:
öffentliche Klasse RecipeViewModel: INotifyPropertyChanged privates Rezept _recipe; öffentliches Ereignis PropertyChangedEventHandler PropertyChanged; public RecipeViewModel (Rezepturrezept) _recipe = Rezeptur; Richtungen = neue ObservableCollection(_recipe.Directions); public ObservableCollection Wegbeschreibung get; einstellen; öffentliche Zeichenfolge Name get return _recipe! = null? _recipe.Name: null; set if (_recipe! = null) _recipe.Name = Wert; if (PropertyChanged! = null) PropertyChanged (dies neue PropertyChangedEventArgs ("Name")); öffentliche Zeichenfolge Beschreibung get return _recipe! = null? _recipe.Description: null; set if (_recipe! = null) _recipe.Description = value; if (PropertyChanged! = null) PropertyChanged (dies neue PropertyChangedEventArgs ("Beschreibung")); public string PrepTime get return _recipe! = null? _recipe.PrepTime.ToString (): "Keine"; set if (_recipe! = null) _recipe.PrepTime = TimeSpan.Parse (value); if (PropertyChanged! = null) PropertyChanged (dies ist neu PropertyChangedEventArgs ("PrepTime")); public string CookingTime get return _recipe! = null? _recipe.CookingTime.ToString (): "Keine"; set if (_recipe! = null) _recipe.CookingTime = TimeSpan.Parse (value); if (PropertyChanged! = null) PropertyChanged (dies ist neu PropertyChangedEventArgs ("CookingTime"));
Sie haben vielleicht bemerkt, dass die RecipeViewModel implementiert die INotifyPropertyChanged Schnittstelle. Wenn Sie tiefer in diese Schnittstelle einsteigen, werden Sie feststellen, dass sie eine Eigenschaft enthält, die implementiert werden muss.
öffentliche Schnittstelle INotifyPropertyChanged event PropertyChangedEventHandler PropertyChanged;
Das RecipleViewModel Klasse nimmt eine Instanz der Rezept Klasse und macht dann nur vier seiner Eigenschaften verfügbar. Die mit diesen Eigenschaften verknüpften Getter geben einfach die Daten im zurück Rezept Instanz selbst. Die Setzer auf der anderen Seite prüfen, ob PropertyChanged ist nicht Null. PropertyChanged wird sein Null wenn es keine Abonnenten für dieses Ereignis gibt. In diesem Fall passiert nichts. Ob PropertyChanged ist nicht Null, Dann wird das Ereignis aufgerufen und jeder Teilnehmer des Ereignisses erhält die Information, dass sich dieses Ansichtsmodell geändert hat.
Im MVVM-Muster ist der Abonnent dieser Ereignisse normalerweise die von der XAML beschriebene Ansicht, die es der Benutzeroberfläche ermöglicht, sich zu aktualisieren, wenn sich die zugrunde liegenden Modelle geändert haben.
Es ist an der Zeit, eine Seite zu erstellen, auf der dem Benutzer die Rezeptdaten angezeigt werden und die Datenbindung zur Aktualisierung der Benutzeroberfläche genutzt wird. Beginnen Sie mit dem Erstellen eines Ansichten Ordner in der MyRecipeBox Projekt. In dem Ansichten Ordner, fügen Sie einen neuen hinzu Formular Xaml-Seite und nennen Sie es RecipeSummaryPage.
Ersetzen Sie die Standard-XAML in der Datei durch Folgendes:
Wie Sie sehen, wird die Bindung erstellt, indem Sie formatierten Text dort einfügen, wo die gebundenen Daten angezeigt werden sollen. Die Syntax, um das zu erreichen, ist "Bindung xxxxx", woher xxxxx ist der Name der Eigenschaft, an die Sie binden möchten. Schließlich fragen Sie sich vielleicht, wie Sie das erstellte Ansichtsmodell an diese Ansicht binden.
Wenn Sie auf den kleinen Pfeil neben dem klicken RecipeSummaryPage.xaml Datei, sollte eine andere Datei angezeigt werden, RecipleSummaryPage.xaml.cs. Dies ist der Code hinter der Datei, die den C # -Code zum Ausführen dieser Seite enthält. Sie müssen den Konstruktor dieser Klasse so ändern, dass er wie folgt aussieht:
public RecipeSummaryPage (RecipeViewModel recipeViewModel) InitializeComponent (); this.BindingContext = recipeViewModel;
Das BindingContext In dieser Eigenschaft müssen Sie das Ansichtsmodell zuweisen, um die oben genannte Bindung zu erstellen. Um dies zu tun, übergeben Sie eine Instanz von Ihrem RecipeViewModel in den Konstruktor.
Um die Früchte unserer Arbeit auf dem Bildschirm erscheinen zu lassen, müssen Sie eine kleine Änderung vornehmen, damit dies funktioniert. In dem App.cs Datei, in der MyRecipeBox Projekt, aktualisieren Sie die GetMainPage Methode wie unten gezeigt.
public static Seite GetMainPage () var recipe = new Rezept Name = "Toast", Description = "Es ist Toast, machst du Witze?", PrepTime = new TimeSpan (0, 0, 15), CookingTime = new TimeSpan (0, 2, 0), Wegbeschreibung = neue Liste"Brot packen", "Brot in den Toaster legen", "Toast essen"; return new RecipeSummaryPage (new RecipeViewModel (Rezept));
Das Ergebnis sollte den folgenden Screenshots ähneln.
Im nächsten und letzten Schritt erstellen und zeigen wir eine Liste an Rezept Objekte, auf die der Benutzer klicken kann, um sie auf eine Detailseite zu bringen. Beginnen wir mit dem Erstellen eines neuen Ansichtsmodells, das eine Liste von enthält Rezept Objekte. Fügen Sie dem eine neue Klasse hinzu ViewModels Ordner und benennen Sie es RecipeListViewModel. Die Implementierung sieht folgendermaßen aus:
öffentliche Klasse RecipeListViewModel public ObservableCollectionRezepte erhalten; einstellen; public RecipeListViewModel () Recipes = new ObservableCollection (); Recipes.Add (neues Rezept Name = "Toast", Description = "Machst du Witze? Es ist Toast.", CookingTime = new TimeSpan (0, 2, 0), PrepTime = new TimeSpan (0, 0, 15), Wegbeschreibungen = neue Liste "Brot aufheben", "Toaster einlegen", "Toast essen"); Recipes.Add (neues Rezept Name = "Cereal", Description = "Weißt du, das Frühstückszeug.", CookingTime = TimeSpan.Zero, PrepTime = New TimeSpan (0, 1, 0), Richtungen = neue Liste "Müsli in Schüssel geben", "Milch in Schüssel geben", "Löffel in Schüssel geben", "Löffel in Mund nehmen"); Recipes.Add (neues Rezept Name = "Sandwich", Beschreibung = "Brot und Kram. YUM!", CookingTime = TimeSpan.Zero, PrepTime = New TimeSpan (0, 5, 0), Richtungen = neue Liste "Holen Sie sich 2 Scheiben Brot", "Käse zwischen die Scheiben legen", "Schinken zwischen die Scheiben legen", "Genießen");
Sie haben vielleicht bemerkt, dass wir die Rezepte in der Datenbank fest codiert haben RecipeListViewModel Klasse. In einer realen Anwendung würden die Rezepte von einem Webservice oder einer Datenbank abgerufen.
Erstellen Sie eine neue Seite, um die Liste der Rezepte anzuzeigen. In dem Ansichten Ordner erstellen, einen neuen erstellen Xaml-Seite erstellen und nennen Sie diese RecipleListPage. Ersetzen Sie den Inhalt durch Folgendes:
Diese XAML ist dem vorherigen Beispiel sehr ähnlich. Diesmal haben Sie jedoch nur eine Listenansicht auf der Seite. Bei Verwendung der Datenbindung in einem Listenansicht, Sie müssen etwas tiefer graben, um die eigentliche Bindung durchzuführen. Zuerst binden Sie die vollständige Liste an die ItemsSource Eigentum derListenansicht und Sie müssen dann das definieren Vorlage und DataTemplate des Listenansicht ein ... zu sein TextCell und binde das TextCell auf das individuelle Eigentum der Rezept Instanz, die Sie anzeigen möchten. Auf diese Weise werden die Rezeptnamen auf dem Bildschirm dargestellt.
Sie können auch sehen, dass es eine gibt Name in Verbindung mit Listenansicht, Rezeptliste, was sich später, als Event-Handler, als nützlich erweisen wird. In diesem Fall, wenn ein Benutzer einen Eintrag in der Listenansicht, das ItemTapped Ereignis wird ausgelöst. Sie haben dieses Ereignis jetzt abonniert und verwenden eine Methode mit dem Namen OnItemSelected damit umgehen.
Im nächsten Schritt müssen wir die Verkabelung in der RecipeListPage.xaml.cs Datei zum Einstellen derBindingContext unserer neuen Seite sowie die Implementierung der OnItemSelected Eventhandler.
public teilweise Klasse RecipeListPage public RecipeListPage () InitializeComponent (); this.BindingContext = new RecipeListViewModel (); public void OnItemSelected (Objektsender, ItemTappedEventArgs args) var recipe = args.Item as Recipe; if (Rezept == null) zurückkehren; Navigation.PushAsync (new RecipeSummaryPage (new RecipeViewModel (Rezept))); // Das ausgewählte Element zurücksetzen. RecipeList.SelectedItem = null;
Das BindingContext Die Eigenschaft wird einfach auf eine neue Instanz von gesetzt RecipleListViewModel dass Sie zuvor erstellt haben. Die Event-Handler-Methode ist etwas anders. Zuerst müssen Sie überprüfen, ob es sich bei dem ausgewählten Element um ein Rezept handelt, das in den folgenden Zeilen ausgeführt wird:
var recipe = args.Item als Rezeptur; if (Rezept == null) zurückkehren;
Wenn das ausgewählte Element a ist Rezept Objekt, dann verwenden Sie die Navigation Eigenschaft, um eine neue Instanz von hinzuzufügen RecipleSummaryPage zum Strom Navigationsansicht. Schließlich müssen Sie sicherstellen, dass derzeit keine Elemente in der Liste ausgewählt sind.
Navigation.PushAsync (new RecipeSummaryPage (new RecipeViewModel (Rezept))); // Das ausgewählte Element zurücksetzen. RecipeList.SelectedItem = null;
Zugriff auf die Listenansicht erfolgt durch die Name das wurde ihm früher zugewiesen. Sie können auf alle zugreifen Aussicht auf der Seite durch Zuweisen von a Name zumAussicht und nach Namen im Code darauf verweisen.
Die letzte Änderung, die wir vornehmen müssen, ist die Aktualisierung der GetMainPage Methode in der App.cs Datei. Wie nachfolgend dargestellt:
public static Page GetMainPage () return new NavigationPage (new RecipeListPage ());
Sie geben eine neue Instanz von zurück NavigationSeite Klasse als Ihre Hauptseite und setzen Sie die Stammseite auf eine neue Instanz von RecipleListPage Klasse. Nachdem nun alles verkabelt ist, können Sie Ihre App auf allen drei Plattformen ausführen und etwa Folgendes anzeigen:
Wenn Sie auf eine der Zeilen in der Liste tippen, gelangen Sie wie zuvor zu der entsprechenden Seite mit der Rezeptzusammenfassung.
Sie haben nun die verschiedenen Optionen für das Anlegen Ihrer Anwendung mit Xamarin.Forms gesehen. Sie sollten sich beim Erstellen von Basisanwendungen wohl fühlen, die auf den wichtigsten mobilen Plattformen mit einer einzigen Codebasis sowohl für die Geschäftslogik als auch für die Benutzeroberfläche der Anwendung ausgeführt werden können. Wenn Sie einige Zeit mit Xamarin.Forms gearbeitet haben, erfahren Sie im nächsten Schritt, wie Sie die Benutzeroberfläche der Anwendung anpassen und neue Steuerelemente hinzufügen. Aber das ist für einen anderen Tag.
Wenn Sie mehr über Xamarin erfahren möchten, besuchen Sie unseren Kurs Erstellen von Multiplattform-Apps mit C # in Xamarin.
In diesem Kurs erfahren Sie, wie Sie eine plattformübergreifende Anwendung aus einer einzigen Codebasis erstellen, die auf drei verschiedenen Plattformen ausgeführt wird: iOS, Android und Windows Phone 8. Denken Sie, dass dies nicht möglich ist? In kurzer Zeit werden Sie es selbst tun. Lass uns zur Arbeit gehen.
Sie können das gleich mit nehmen komplett frei 14-tägige Testversion eines Tuts + Abonnements. Werfen Sie einen Blick auf unsere Abonnementoptionen, um anzufangen, oder wenn Sie nur an diesem Kurs interessiert sind, können Sie ihn einzeln für 15 $ kaufen! Hier ist eine Vorschau für den Einstieg:
Accentsconagua