Share
Når det gjelder å designe og legge ut skjermbildene i søknaden din, har du to hovedalternativer, skrive kode eller bruk XAML. Hvis du noen gang har gjort noen WPF (Windows Presentation Foundation) eller Silverlight-utvikling, er du sannsynligvis allerede kjent med XAML. XAML er eXtensible Application Markup Language som ble opprettet for å hjelpe til med å definere et programs utseende uten å måtte håndtere alt i kode. Xamarin.Forms fungerer med begge alternativene. Det vil til slutt være opp til deg å bestemme hvilket alternativ du foretrekker.
Det er viktig å merke seg at XAML brukes til Xamarin.Forms ikke er kompatibel med andre former for XAML og XAML verktøy.
Hvis du er den typen person som elsker å være i koden og ikke vil ha noe med noen form for oppslag eller en designer, vil du sannsynligvis være veldig komfortabel med dette alternativet. Du programmerer øyeblikkelig forskjellige typer Utsikt objekter og legg dem direkte til a Side eller til en Oppsett på en Side. Her er et enkelt eksempel på å lage en SimplePage klasse, instantiating noen få Utsikt objekter, og legge dem til Side gjennom a StackLayout gjenstand.
offentlig klasse SamplePage: ContentPage public SamplePage () Padding = new Thickness (20); var label = ny etikett Text = "Jeg er en enkel side", BackgroundColor = Color.Blue, Font = Font.SystemFontOfSize (30), WidthRequest = 150, HeightRequest = 40; var-knapp = ny knapp Text = "Jeg har en knapp", BackgroundColor = Color.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 200, HeightRequest = 200; var entry = new Entry Placeholder = "Jeg har en oppføringsboks", BackgroundColor = Color.Green, WidthRequest = 200, HeightRequest = 150; Innhold = nytt StackLayout Spacing = 10, Children = knapp, oppføring, etikett;
Som du kan se, er Utsikt objekter har et antall fellesegenskaper som du kan bruke til å angi tekst, farger, mellomrom, høyde, bredde osv. Alt du trenger å gjøre nå er å endre GetMainPage metode i app klasse for å returnere en ny forekomst av Eksempelside klasse, og vekk du går.
Ingen anklaget meg for å være designer, men det er enkelt å lage grunnleggende sider i kode.
Hvis du foretrekker å skille utseendet på applikasjonen din fra logikken og implementeringen, kan XAML bare være veien å gå. XAML lar deg lage hele oppsettet av søknaden din i et spesialisert XML-format som Xamarin kan oversette til sider, oppsett, visninger og celler, og vise dem til brukeren. Hvis du aldri har brukt XAML før, kan det ta litt å bli vant til. Men når du får tak i det, kan det faktisk være ganske fint.
For å bruke XAML i kombinasjon med Xamarin.Forms må du opprette prosjektet ditt ved hjelp av Tom App (Xamarin.Forms Portable) mal slik at alle Xamarin.Forms-koden kan skilles inn i sin egen dll.
I kodeeksemplet fra forrige seksjon skapte du en veldig enkel Innholdsside klasse i kode. Å skape det samme Innholdsside bruk XAML, høyreklikk PCL-prosjektet og velg Legg til> Ny vare. Fra Legg til nytt element dialogboksen, velg Skjemaer Xaml Side mal og erstatt standardinnholdet med følgende:
Hvis du kjører programmet, bør du se samme skjerm som i kodeeksemplet. De Side, Oppsett, og Utsikt typer kart til XML-elementer og egenskapene er elementattributtene. Du er fri til å bruke enten alternativ for å lage fullt tilpassbare, grensesnitt-brukergrensesnitt.
Du kan opprette apper der du oppretter Utsikt gjenstander for din Side objekter og eksplisitt sette sine egenskaper, men det blir raskt tungvint. Når du eksplisitt angir egenskaper i XAML-koden, er du ikke lenger i stand til å gjenbruke den XAML Side for noe annet. Med andre ord må du opprette nye XAML-sider for hver variasjon du trenger. Hvem har tid til det?
Ville det ikke vært fint hvis du kunne lage gjenbrukbare XAML-sider uten brukerdefinert brukergrensesnittkode og holde alt logisk skilt? Selvfølgelig. Velkommen til MVVM.
Model-View-ViewJeg er et arkitektonisk mønster som ble opprettet med XAML i tankene. Kjernen deler det grunnleggende konseptet med andre arkitektoniske mønstre som MVP og MVC. Den ble designet for å skille data, modelllaget, fra presentasjon, visningslaget. Røret mellom de to er ViewModel. Visningsmodellen er en klasse som muliggjør kommunikasjon mellom modellen og visning av lag gjennom en mekanisme kjent som data bindende. Data-binding er kjernen i MVVM-mønsteret og gjøres gjennom XAML selv. La oss ta en titt på et eksempel.
Start med å opprette en ny Xamarin.Forms-applikasjon ved å velge Tom App (Xamarin.Forms Portable) prosjektmal og gi den navnet på MyRecipeBox.
Som du sikkert har gjettet, vil dette være grunnlaget for en grunnleggende app som kan lagre oppskrifter. La oss begynne med å lage en grunnleggende modell av appen, en oppskrift.
I MyRecipeBox prosjekt, lag en ny mappe og navngi den modeller. Dette er ikke et krav, det legger bare til noen organisasjon til prosjektet som alltid hjelper når det blir større. I modeller mappe, legg til en ny klasse og gi den navnet Oppskrift. Bytt standard implementering med følgende:
offentlig klasse Oppskrift offentlig streng Navn get; sett; offentlig streng Beskrivelse get; sett; offentlig TimeSpan PrepTime get; sett; offentlig TimeSpan CookingTime get; sett; offentlig listeVeibeskrivelse get; sett;
Nå som du har en grunnleggende modellklasse, kan du opprette en visningsmodell for den. Tenk på en visningsmodell som en klasse som inneholder deler av en modell som må vises og interagere med på en skjerm. For å holde ting enkelt, skal vi konsentrere oss om de fire beste egenskapene.
Opprett en ny mappe i MyRecipeBox prosjekt og navn det ViewModels. I ViewModels mappe, opprett en ny klasse og gi den navnet RecipeViewModel. Når du vedtar MVVM-mønsteret i .NET, blir ViewModels vanligvis preget av at de implementerer INotifyPropertyChanged grensesnitt. Dette grensesnittet er det som brukes til å tillate andre deler av koden å abonnere på hendelser og aktivere datainnbinding. Erstatt standard implementering av RecipeViewModel klasse med følgende:
offentlig klasse RecipeViewModel: INotifyPropertyChanged privat oppskrift _recipe; offentlig hendelse PropertyChangedEventHandler PropertyChanged; offentlig RecipeViewModel (Oppskrift oppskrift) _recipe = oppskrift; Veibeskrivelse = ny ObservableCollection(_recipe.Directions); offentlig observablecollection Veibeskrivelse get; sett; offentlig streng Navn get return _recipe! = null? _recipe.Name: null; sett if (_recipe! = null) _recipe.Name = value; hvis (PropertyChanged! = null) PropertyChanged (dette, nye PropertyChangedEventArgs ("Name")); offentlig streng Beskrivelse get return _recipe! = null? _recipe.Description: null; sett if (_recipe! = null) _recipe.Description = value; hvis (PropertyChanged! = null) PropertyChanged (dette, nye PropertyChangedEventArgs ("Description")); offentlig streng PrepTime get return _recipe! = null? _recipe.PrepTime.ToString (): "None"; sett if (_recipe! = null) _recipe.PrepTime = TimeSpan.Parse (verdi); hvis (PropertyChanged! = null) PropertyChanged (dette, nye PropertyChangedEventArgs ("PrepTime")); offentlig streng CookingTime get return _recipe! = null? _recipe.CookingTime.ToString (): "None"; sett if (_recipe! = null) _recipe.CookingTime = TimeSpan.Parse (verdi); hvis (PropertyChanged! = null) PropertyChanged (dette, nye PropertyChangedEventArgs ("CookingTime"));
Du har kanskje lagt merke til at RecipeViewModel implementerer INotifyPropertyChanged grensesnitt. Hvis du graver dypere inn i dette grensesnittet, ser du at det inneholder en eiendom som må implementeres.
offentlig grensesnitt INotifyPropertyChanged event PropertyChangedEventHandler PropertyChanged;
De RecipleViewModel klassen tar inn en forekomst av Oppskrift klasse og utsetter så bare fire av sine egenskaper. Den getters forbundet med disse egenskapene bare returnere dataene i Oppskrift eksempel seg selv. Setters på den annen side, sjekk for å se om PropertyChanged er ikke null. PropertyChanged vil være null hvis det ikke er noen abonnenter på denne hendelsen. I så fall skjer ingenting. Hvis PropertyChanged er ikke null, så kalles hendelsen, og hver abonnent på arrangementet mottar informasjonen som denne visningsmodellen har endret seg.
I MVVM-mønsteret er abonnenten på disse hendelsene vanligvis den visningen som er beskrevet av XAML, slik at brukergrensesnittet kan oppdateres dersom de underliggende modellene har endret seg.
Det er på tide å lage en side som viser brukerens oppskriftdata og utnytter datainnbinding for å oppdatere brukergrensesnittet. Begynn med å opprette en Visninger mappe i MyRecipeBox prosjekt. I Visninger mappe, legg til en ny Skjemaer Xaml Side og nev det RecipeSummaryPage.
Bytt standard XAML i filen med følgende:
Som du kan se, blir bindingen opprettet ved å plassere noen formatert tekst der du vil at de bundet data skal vises. Syntaxen for å oppnå det er "Binding xxxxx", hvor xxxxx er navnet på eiendommen som du vil binde. Til slutt kan du lure på hvordan du knytter visningsmodellen du opprettet til denne visningen.
Hvis du klikker på den lille pilen ved siden av RecipeSummaryPage.xaml fil, bør du se en annen fil vises, RecipleSummaryPage.xaml.cs. Dette er koden bak filen som inneholder C # -koden for å kjøre denne siden. Du må endre konstruktøren til denne klassen for å se slik ut:
offentlig oppskriftSummaryPage (RecipeViewModel recipeViewModel) InitializeComponent (); this.BindingContext = recipeViewModel;
De BindingContext Egenskapen er hvor du må tilordne visningsmodellen for å opprette den nevnte bindingen. For å gjøre det, pass en forekomst av din RecipeViewModel inn i konstruktøren.
For å se fruktene av vårt arbeid vises på skjermen, må du gjøre en liten forandring for å få dette til å fungere. I App.cs fil, i MyRecipeBox prosjekt, oppdater GetMainPage metode som vist nedenfor.
Offentlig statisk side GetMainPage () var oppskrift = ny oppskrift Name = "Toast", Beskrivelse = "Det er toast, skurker du?", PrepTime = nytt TimeSpan (0, 0, 15), CookingTime = nytt TimeSpan (0, 2, 0), Veibeskrivelse = Ny liste"Ta med brød", "Legg brød i brødrister", "Spis toast"; returner ny ReceptSummaryPage (ny RecipeViewModel (oppskrift));
Resultatet skal se ut som følgende skjermbilder.
I neste og siste trinn skal vi opprette og vise en liste over Oppskrift Objekter som brukeren kan klikke for å få dem til en detaljside. La oss begynne med å opprette en ny visningsmodell som inneholder en liste over Oppskrift objekter. Legg til en ny klasse i ViewModels mappe og navn den RecipeListViewModel. Implementeringen ser slik ut:
offentlig klasse RecipeListViewModel public ObservableCollectionOppskrifter get; sett; offentlig RecipeListViewModel () Oppskrifter = nytt ObservableCollection (); Oppskrifter.Add (Ny Oppskrift Navn = "Toast", Beskrivelse = "Skur du? Det er toast.", CookingTime = ny TimeSpan (0, 2, 0), PrepTime = ny TimeSpan (0, 0, 15), Veibeskrivelse = Ny liste "Plukk opp brød", "Sett pause i brødrister", "Spis Toast"); Oppskrifter.Add (Ny Oppskrift Navn = "Korn", Beskrivelse = "Du vet, frokosten.", CookingTime = TimeSpan.Zero, PrepTime = Ny TimeSpan (0, 1, 0), Veibeskrivelse = Ny Liste "Legg korn i bolle", "Sett melk i bolle", "Sett skje i bolle", "Sett skje i munnen"); Oppskrifter.Add (ny oppskrift Name = "Sandwich", Beskrivelse = "Brød og ting. YUM!", CookingTime = TimeSpan.Zero, PrepTime = ny TimeSpan (0, 5, 0), Veibeskrivelse = Ny liste "Få 2 stykker brød", "Sett ost mellom kuttestykker", "Sett ham mellom kuttskiver", "Nyt");
Du har kanskje lagt merke til at vi hardt kodet oppskriftene i RecipeListViewModel klasse. I en reell applikasjon ble oppskriftene hentet fra en webtjeneste eller en database.
Opprett en ny side for å vise listen over oppskrifter. I Visninger mappe, opprett en ny Form Xaml Side og nevn denne RecipleListPage. Erstatt innholdet med følgende:
Denne XAML er ganske lik det forrige eksempelet. Denne gangen har du imidlertid bare en listevisning på siden. Når du bruker datainnbinding i a Listevisning, du må grave litt ned dypere for å gjøre den faktiske bindingen. Først binder du hele listen til ItemsSource eiendom avListevisning og du må da definere Mal og DataTemplate av Listevisning å være en TextCell og bind det TextCell til den enkelte eiendom av Oppskrift eksempel du vil vise. Dette er hva som gjør oppskriftens navn på skjermen.
Du kan også se at det er en Navn assosiert med Listevisning, recipeList, som kommer til nytte litt senere, så vel som en hendelsehandler. I dette tilfellet, når en bruker tapper et element i Listevisning, de ItemTapped hendelsen er sparken. Du har nå abonnert på den hendelsen og vil bruke en metode som heter OnItemSelected å håndtere det.
I neste trinn må vi gjøre noen ledninger oppe i RecipeListPage.xaml.cs fil for å angiBindingContext av vår nye side, samt implementere OnItemSelected hendelse handler.
offentlig delklasse Class RecipeListPage public RecipeListPage () InitializeComponent (); this.BindingContext = ny RecipeListViewModel (); offentlig ugyldig OnItemSelected (objekt sender, ItemTappedEventArgs args) var oppskrift = args.Item as Recipe; hvis (oppskrift == null) tilbake; Navigation.PushAsync (ny OppskriftSummaryPage (ny RecipeViewModel (oppskrift))); // Tilbakestill det valgte elementet recipeList.SelectedItem = null;
De BindingContext eiendom vil ganske enkelt settes til en ny forekomst av RecipleListViewModel som du opprettet tidligere. Hendelseshåndteringsmetoden er litt annerledes. Først må du kontrollere at det valgte elementet er en oppskrift, som oppnås i følgende linjer:
var oppskrift = args.Item som oppskrift; hvis (oppskrift == null) tilbake;
Hvis det valgte elementet er en Oppskrift objekt, så bruker du Navigasjon eiendom for å legge til en ny forekomst av RecipleSummaryPage til nåværende NavigationView. Til slutt må du sørge for at ingen elementer i listen er valgt for øyeblikket.
Navigation.PushAsync (ny OppskriftSummaryPage (ny RecipeViewModel (oppskrift))); // Tilbakestill det valgte elementet recipeList.SelectedItem = null;
Tilgang til Listevisning er gjort gjennom Navn som ble tildelt det tidligere. Du kan få tilgang til noen Utsikt på siden ved å tildele en Navn tilUtsikt og refererer til det ved navn i koden.
Den siste endringen vi må gjøre er å oppdatere GetMainPage metode i App.cs fil. som vist under:
offentlig statisk side GetMainPage () returner ny NavigationPage (ny RecipeListPage ());
Du returnerer en ny forekomst av NavigationPage klassen som hovedsiden din, og sett dens rotside til en ny forekomst av RecipleListPage klasse. Nå som alt er koblet til, kan du kjøre appen din på alle tre plattformene og se noe som følger:
Ved å trykke på en av radene i listen, går du til den tilsvarende oppskriftssiden for oppskrift som du tidligere har sett.
Du har nå sett de forskjellige alternativene for å legge ut søknaden din ved hjelp av Xamarin.Forms. Du bør føle deg komfortabel med å lage grunnleggende applikasjoner som kan kjøre på de store mobile plattformene ved hjelp av en enkelt kodebase for både forretningslogikken og brukergrensesnittet til applikasjonen. Når du har brukt litt tid på å jobbe med Xamarin.Forms, vil neste trinn lære å tilpasse programmets brukergrensesnitt og legge til nye kontroller. Men det er for en annen dag.
Hvis du vil lære mer om Xamarin, så sjekk ut kurset vårt. Bygg Multi-Platform Apps med C # i Xamarin.
I løpet av kurset lærer du hvordan du oppretter et kryssplattformsprogram fra en enkelt kodebase som vil kjøre på tre forskjellige plattformer: iOS, Android og Windows Phone 8. Tror det ikke kan gjøres? På bare en liten stund vil du gjøre det selv. La oss komme på jobb.
Du kan ta det straks med en helt gratis 14 dagers prøve av et Tuts + abonnement. Ta en titt på abonnementsalternativene våre for å komme i gang, eller hvis du bare er interessert i dette kurset, kan du kjøpe det individuelt for $ 15! Her er en forhåndsvisning for å komme i gang:
Accentsconagua