Share
Când vine vorba de proiectarea și stabilirea ecranelor aplicației dvs., aveți două opțiuni principale, scriind codul sau utilizând XAML. Dacă ați realizat vreodată o dezvoltare WPF (Windows Presentation Foundation) sau o dezvoltare Silverlight, atunci probabil că sunteți deja familiarizat cu XAML. XAML este eXtensible Language Markup Application care a fost creat pentru a ajuta la definirea aspectului unei aplicații fără a trebui să o gestionați pe toate în cod. Xamarin.Forms funcționează cu ambele opțiuni. În cele din urmă, vă va decide cine vă preferați.
Este important să rețineți că XAML-ul folosit pentru Xamarin.Forms nu este compatibil cu alte forme de instrumente XAML și XAML.
Dacă sunteți tipul de persoană care iubește să fie în cod și nu dorește nimic de a face vreun fel de marcare sau un designer, atunci probabil că veți fi foarte confortabil cu această opțiune. Programați instanțiat diferite tipuri de Vedere obiecte și adăugați-le direct la a Pagină sau la a schemă pe o Pagină. Iată un exemplu simplu de a crea un SimplePage clasa, instanțiând câteva Vedere obiecte și adăugându-le la Pagină prin a StackLayout obiect.
public SamplePage de clasă publică: ContentPage public SamplePage () Padding = new Grosime (20); var label = new Label Text = "Sunt o pagină simplă", BackgroundColor = CuloareBlue, Font = Font.SystemFontOfSize (30), WidthRequest = 150, HeightRequest = 40; buton var = buton nou Text = "Am un buton", BackgroundColor = Culoare.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 200, HeightRequest = 200; var entry = Entry new Placeholder = "Am o căsuță de intrare", BackgroundColor = Color.Green, WidthRequest = 200, HeightRequest = 150; Conținut = StackLayout nou Spacing = 10, Copii = buton, intrare, etichetă;
După cum puteți vedea, Vedere obiectele au o serie de proprietăți comune, pe care le puteți utiliza pentru a seta textul, culorile, spațiul, înălțimea, lățimea etc. Tot ce trebuie să faceți acum este să modificați GetMainPage metodă în App pentru a returna o nouă instanță a Pagina Exemplu de clasă, și departe te duci.
Nimeni nu ma acuzat că sunt designer, dar este ușor să creezi pagini de bază în cod.
Dacă preferați să separați aspectul aplicației de logică și implementare, atunci XAML ar putea fi doar calea de urmat. XAML vă permite să creați întregul aspect al aplicației dvs. într-un format XML specializat pe care Xamarin îl poate traduce în pagini, layout-uri, vizualizări și celule și le poate afișa utilizatorului. Dacă nu ați folosit anterior XAML, s-ar putea să vă obișnuiți puțin. Cu toate acestea, odată ce ați luat-o atârnă de ea, poate fi de fapt destul de frumos.
Pentru a folosi XAML în combinație cu Xamarin.Forms, va trebui să vă creați proiectul folosind Aplicație Blank (Xamarin.Forms Portable) astfel încât toate codurile Xamarin.Forms pot fi separate în propriul dll.
În exemplul de cod al secțiunii anterioare, ați creat un foarte simplu Pagina de conținut clasa în cod. Pentru a crea aceleași lucruri Pagina de conținut utilizând XAML, faceți clic dreapta pe proiectul PCL și selectați Adăugați> Element nou. De la Adăugați un element nou caseta de dialog, selectați Formează Xaml Page șablon și înlocuiți conținutul implicit cu următoarele:
Dacă executați aplicația, ar trebui să vedeți același ecran ca în exemplul de cod. Pagină, schemă, și Vedere tipurile de hărți pentru elementele XML și proprietățile sunt atributele elementului. Aveți libertatea de a utiliza fie opțiunea pentru a crea interfețe personalizate, inter-platforme, personalizabile.
Puteți crea aplicații în care creați Vedere obiecte pentru dvs. Pagină obiecte și stabilește în mod explicit proprietățile lor, dar care devine rapid greoaie. Când setați în mod explicit proprietățile în codul XAML, nu mai puteți reutiliza XAML-ul Pagină pentru orice altceva. Cu alte cuvinte, trebuie să creați noi pagini XAML pentru fiecare variantă de care aveți nevoie. Cine are timp pentru asta?
Nu ar fi frumos dacă ați putea crea pagini XAML reutilizabile fără un cod de interfață personalizat și păstrați totul separat logic? Desigur. Bun venit la MVVM.
Model-View-viewmodeEste un model arhitectural creat cu gândul la XAML. În centrul său, el împărtășește conceptul de bază al altor modele arhitecturale precum MVP și MVC. Acesta a fost conceput pentru a separa datele, stratul de model, de la prezentare, stratul de vizualizare. Conducta dintre cele două este ViewModel. Modelul de vizualizare este o clasă care facilitează comunicarea dintre model și straturile de vizualizare printr-un mecanism cunoscut sub numele de legarea datelor. Legarea datelor este în centrul modelului MVVM și se face prin intermediul XAML în sine. Să aruncăm o privire la un exemplu.
Începeți prin a crea o nouă aplicație Xamarin.Forms selectând Aplicație Blank (Xamarin.Forms Portable) șablon de proiect și dându - i numele MyRecipeBox.
După cum probabil ați ghicit, aceasta va fi fundația pentru o aplicație de bază care poate stoca rețete. Să începem prin crearea unui model de bază al aplicației, o rețetă.
În MyRecipeBox proiect, creați un nou dosar și denumiți-l modele. Aceasta nu este o cerință, ci doar adaugă o anumită organizație la proiect, care întotdeauna ajută pe măsură ce devine mai mare. În modele folder, adăugați o nouă clasă și denumiți-o Reţetă. Înlocuiți implementarea implicită cu următoarele:
public class Rețetă public string Nume get; a stabilit; șir public Descriere get; a stabilit; public TimeSpan PrepTime get; a stabilit; public TimeSpan CookingTime get; a stabilit; Listă publicăDirecții get; a stabilit;
Acum, că aveți o clasă de model de bază, puteți crea un model de vizualizare pentru aceasta. Gândiți-vă la un model de vizualizare ca o clasă care conține părțile unui model care trebuie să fie afișate și interacționate pe un ecran. Pentru a păstra lucrurile simple, ne vom concentra pe primele patru proprietăți.
Creați un nou dosar în MyRecipeBox proiect și numește-l ViewModels. În ViewModels folder, creați o nouă clasă și denumiți-o RecipeViewModel. La adoptarea modelului MVVM în .NET, ViewModels se caracterizează de obicei prin faptul că implementează INotifyPropertyChanged interfață. Această interfață este cea folosită pentru a permite altor părți ale codului să se aboneze la evenimente și să permită legarea datelor. Înlocuiți implementarea implicită a RecipeViewModel clasă cu următoarele:
clasa publică RecipeViewModel: INotifyPropertyChanged private Rețetă _recipe; eveniment public PropertyChangedEventHandler PropertyChanged; public RecipeViewModel (Rețetă rețetă) _recipe = rețetă; Direcții = observabil nouCollecție(_recipe.Directions); public ObservareCollecție Direcții get; a stabilit; șir public Numele get return _recipe! = null? _recipe.Name: null; set if (_recipe! = null) _recipe.Name = valoare; dacă (PropertyChanged! = null) PropertyChanged (aceasta, noua PropertyChangedEventArgs ("Name")); șir public Descriere get return _recipe! = null? _recipe.Description: null; set if (_recipe! = null) _recipe.Description = valoare; dacă (PropertyChanged! = null) PropertyChanged (aceasta, noua PropertyChangedEventArgs ("Descriere")); șirul public PrepTime get return _recipe! = null? _recipe.PrepTime.ToString (): "Niciuna"; set if (_recipe! = null) _recipe.PrepTime = TimeSpan.Parse (valoare); dacă (PropertyChanged! = null) PropertyChanged (aceasta, noua PropertyChangedEventArgs ("PrepTime")); șirul public CookingTime get return _recipe! = null? _recipe.CookingTime.ToString (): "Niciuna"; set if (_recipe! = null) _recipe.CookingTime = TimeSpan.Parse (valoare); dacă (PropertyChanged! = null) PropertyChanged (aceasta, noua PropertyChangedEventArgs ("CookingTime"));
S-ar putea să fi observat că RecipeViewModel implementează INotifyPropertyChanged interfață. Dacă explorați mai adânc această interfață, veți vedea că aceasta conține o proprietate care trebuie implementată.
interfața publică INotifyPropertyChanged event PropertyChangedEventHandler PropertyChanged;
RecipleViewModel clasa ia într - o instanță a Reţetă și apoi expune doar patru dintre proprietățile sale. Beneficiarii asociați cu aceste proprietăți returnează pur și simplu datele în Reţetă instanță în sine. Cei care se stabilesc, pe de altă parte, verifică dacă PropertyChanged nu este nul. PropertyChanged va fi nul dacă nu există abonați la acest eveniment. În acest caz, nu se întâmplă nimic. Dacă PropertyChanged nu este nul, atunci evenimentul este chemat și fiecare abonat al evenimentului primește informațiile pe care acest model de vizualizare le-a schimbat.
În modelul MVVM, abonatul la aceste evenimente este, în mod obișnuit, vizualizarea descrisă de XAML care permite interfeței utilizator să se actualizeze dacă modelele de bază s-au schimbat.
Este timpul să creați o pagină care să afișeze utilizatorului datele de rețetă și să lege legăturile de date pentru a actualiza interfața cu utilizatorul. Începeți prin crearea unui Vizualizări dosar în MyRecipeBox proiect. În Vizualizări folder, adăugați un nou Formează Xaml Page și numește-o RecipeSummaryPage.
Înlocuiți XAML-ul implicit în fișier cu următoarele:
După cum puteți vedea, legarea este creată prin plasarea unui text formatat unde doriți ca datele legate să apară. Sintaxa de realizat este "Binding xxxxx", Unde xxxxx este numele proprietatii la care vreti sa va legati. În cele din urmă, s-ar putea să vă întrebați cum legați modelul de vizualizare creat de această vizualizare.
Dacă faceți clic pe săgeata mică de lângă RecipeSummaryPage.xaml fișier, ar trebui să vedeți un alt fișier, RecipleSummaryPage.xaml.cs. Acesta este codul din spatele fișierului care conține codul C # pentru a rula această pagină. Trebuie să modificați constructorul din această clasă pentru a arăta astfel:
public RecipeSummaryPage (RecipeViewModel recipeViewModel) InitializeComponent (); this.BindingContext = recipeViewModel;
BindingContext proprietatea este locul unde trebuie să atribuiți modelul de vizualizare pentru a crea legarea menționată mai sus. Pentru a face acest lucru, treceți o instanță a dvs. RecipeViewModel în constructor.
Pentru a vedea fructele muncii noastre apar pe ecran, trebuie să faceți o mică schimbare pentru a obține acest lucru. În App.cs fișier, în MyRecipeBox proiect, actualizați GetMainPage așa cum se arată mai jos.
Pagina statică publică GetMainPage () var recipe = noua Rețetă Name = "Toast", Descriere = "Este toast, glumesti?", PrepTime = new TimeSpan (0, 0, 15), CookingTime = 2, 0), Direcții = Listă nouă"Luați pâine", "Puneți pâinea în toaster", "Manâncați pâinea prăjită"; returnați noua RecipeSummaryPage (noua RecipeViewModel (rețetă));
Rezultatul ar trebui să arate similar cu următoarele capturi de ecran.
În pasul următor și ultim, vom crea și afișa o listă de Reţetă obiecte pe care utilizatorul le poate face clic pentru a le aduce la o pagină de detaliu. Să începem prin crearea unui nou model de vizualizare care conține o listă de Reţetă obiecte. Adăugați o nouă clasă la ViewModels și denumiți-o RecipeListViewModel. Implementarea sa arată astfel:
clasa publică RecipeListViewModel public ObservableCollectionRețete a lua; a stabilit; public RecipeListViewModel () Rețete = noi ObservatorCollecție (); Recipes.Add (noua Reteta Name = "Toast", Descriere = "Glumești? Este toast.", CookingTime = new TimeSpan (0, 2, 0), PrepTime = = noua listă "Puneți pâinea", "Puneți pauza în toaster", "Manâncați pâine"); Recipes.Add (noua reteta Name = "Cereal", Descriere = "Stii, lucrurile pentru micul dejun", CookingTime = TimeSpan.Zero, PrepTime = new TimeSpan (0, 1, 0) "Puneți cereale în castron", "Puneți laptele în castron", "Puneți lingura în castron", "Puneți lingura în gură"); Recipes.Add (noua reteta Name = "Sandwich", Descriere = "Pâine și altele YUM!", CookingTime = TimeSpan.Zero, PrepTime = new TimeSpan (0, 5, 0) "Obțineți 2 felii de pâine", "Puneți brânză între felii de pătrundere", "Puneți șuncă între felii de pâine", "Bucurați-vă");
S-ar putea să fi observat că am codificat greu rețetele în RecipeListViewModel clasă. Într-o aplicație reală, rețetele vor fi preluate dintr-un serviciu web sau dintr-o bază de date.
Creați o pagină nouă pentru a afișa lista de rețete. În Vizualizări folder, creați un nou Formular Xaml Pagina și numiți-o pe aceasta RecipleListPage. Înlocuiți conținutul cu următoarele:
Acest XAML este destul de similar cu exemplul anterior. De data aceasta, totuși, aveți doar o vizualizare în listă a paginii. Atunci când utilizați legarea de date într - un ListView, trebuie să vă săturați mai adânc pentru a realiza legătura reală. Mai întâi, obligați lista completă la ItemsSource proprietate aListView și apoi trebuie să definiți Format și DataTemplate din ListView a fi un TextCell și obligați asta TextCell la proprietatea individuală a Reţetă instanța pe care doriți să o afișați. Aceasta este ceea ce face numele de rețetă pe ecran.
De asemenea, puteți vedea că există o a Nume asociate cu ListView, recipeList, care va veni la îndemână un pic mai târziu, precum și un manipulator de evenimente. În acest caz, atunci când un utilizator dă un element în ListView, ItemTapped evenimentul este declanșat. Acum v-ați abonat la acel eveniment și veți folosi o metodă numită OnItemSelected să se descurce.
În pasul următor, trebuie să facem niște cablaje în RecipeListPage.xaml.cs fișier pentru a setaBindingContext din noua noastră pagină, precum și implementarea OnItemSelected organizatorul evenimentului.
clasa publică parțială RecipeListPage public RecipeListPage () InitializeComponent (); this.BindingContext = nou RecipeListViewModel (); public void OnItemSelected (expeditor obiect, ItemTappedEventArgs args) var recipe = args.Item ca Rețetă; dacă (recipe == null) se întoarce; Navigation.PushAsync (noua RecipeSummaryPage (noua RecipeViewModel (reteta))); // Resetați elementul selectat recipeList.SelectedItem = null;
BindingContext proprietatea va fi pur și simplu setată la o nouă instanță a RecipleListViewModel pe care l-ați creat mai devreme. Metoda de gestionare a evenimentului este puțin diferită. În primul rând, trebuie să verificați dacă elementul selectat este o rețetă, care se realizează în următoarele rânduri:
var recipe = args.Item ca Rețetă; dacă (recipe == null) se întoarce;
Dacă elementul selectat este a Reţetă obiect, atunci utilizați Navigare de proprietate pentru a adăuga o nouă instanță a RecipleSummaryPage la curent NavigationView. În cele din urmă, trebuie să vă asigurați că nu sunt selectate în prezent articole din listă.
Navigation.PushAsync (noua RecipeSummaryPage (noua RecipeViewModel (reteta))); // Resetați elementul selectat recipeList.SelectedItem = null;
Accesarea ListView se face prin Nume care i sa atribuit mai devreme. Puteți obține acces la orice Vedere pe pagină prin atribuirea unui a Nume laVedere și se referă la acesta prin nume în cod.
Schimbarea finală pe care trebuie să o facem este actualizarea GetMainPage metodă în App.cs fişier. așa cum se arată mai jos:
pagina statică publică GetMainPage () returnează noua NavigationPage (noua RecipeListPage ());
Returnați o nouă instanță a NavigationPage clasă ca pagină principală și setați pagina de root la o nouă instanță a RecipleListPage clasă. Acum, că totul este conectat, poți rula aplicația pe toate cele trei platforme și vezi ceva de genul:
Atingând unul dintre rândurile din listă, vă duceți la pagina de rezumat a rețetelor corespunzătoare așa cum ați văzut înainte.
Ați văzut acum diferitele opțiuni pentru stabilirea aplicației utilizând Xamarin.Forms. Ar trebui să vă simțiți confortabil creând aplicații de bază care pot rula pe principalele platforme mobile folosind o singură bază de cod atât pentru logica de afaceri, cât și pentru interfața utilizator a aplicației. Când ați petrecut ceva timp cu Xamarin.Forms, următorul pas va fi să învățați cum să personalizați interfața de utilizator a aplicației și să adăugați controale noi. Dar asta e pentru o altă zi.
Dacă doriți să aflați mai multe despre Xamarin, verificați cursul pe care l-ați construit Aplicații multi-platformă cu C # în Xamarin.
În curs, veți învăța cum să creați o aplicație cross-platformă dintr-o bază de cod unică, care va funcționa pe trei platforme diferite: iOS, Android și Windows Phone 8. Credeți că nu se poate face? În doar puțin timp o veți face singur. Sa trecem la treaba.
Puteți să o luați imediat cu un complet gratuit Studiu de 14 zile al unui abonament Tuts +. Aruncati o privire la optiunile noastre de abonament pentru a incepe sau, daca sunteti interesat doar de acest curs, o puteti cumpara individual pentru 15 $! Iată o previzualizare pentru a începe:
Accentsconagua