Getting gang med Xamarin.Forms: Tilpasse User Interface
95
Del
10
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
1. Innstilling av Stage
Som du lage programmer med Xamarin.Forms, vil du uten tvil liker enkelheten i å lage brukergrensesnitt. Bruke Xamarin.Forms, er du i stand til å bruke samme terminologi for kontroller på tvers av flere plattformer.
Selv om dette konseptet kan være svært kraftig, som en designer eller en utvikler, det kan være noe begrensende. Det kan virke som vi er tvunget til å bruke de innfødte kontrollene brukergrensesnitt som følger med hver av plattformene uten mulighet til å legge til tilpasning. Dette er ikke tilfelle.
For å komme inn i prosessen med å tilpasse brukergrensesnittet for spesifikke plattformer, må du først forstå gjengivelsen av Xamarin.Forms.
2. Kontroll Rende
Når det gjelder å bruke Xamarin.Forms å lage et brukergrensesnitt for din cross platform mobile applikasjonen, er det to viktige brikker til puslespillet som du må forstå.
Element
Den første brikken i puslespillet er element
. Du kan tenke på et element som plattform agnostiker definisjonen av en kontroll i Xamarin.Forms. Hvis du har lest gjennom dokumentasjonen i det hele tatt, vil du vite at disse kontrollene er også referert til som Vis
stedene. For å være enda mer spesifikk, hver element innen Xamarin.Forms stammer fra Vis-klassen.
Disse elementene er brukt for å beskrive et visuelt element. Elementene gi en plattform agnostiker definisjoner av kjennetegn på hvordan kontrollen skal se ut og oppføre seg. Et element på sin egen kan ikke faktisk lage en kontroll som vises til brukeren. Den trenger litt hjelp. Det er der den andre del av gjengivelsen kommer inn, en renderer
.
Renderer
En renderer kommer inn i bildet når du kjører programmet. Jobben til renderer er å ta plattformen agnostiker element og forvandle det til noe visuelt å presentere for brukeren.
For eksempel, hvis du brukte en etikett kontroll i den delte prosjektet, under driften av søknad, ville Xamarin.Forms rammeverket bruke en forekomst av LabelRenderer klassen til å trekke den opprinnelige kontrollen. Hvis du begynner å lure på hvordan dette skjer fra en felles kode prosjekt, det er et veldig godt spørsmål. Svaret er at det gjør det ikke.
La oss illustrere dette med et eksempel. Start med å åpne enten Xamarin Studio eller Visual Studio. Prosessen og konsepter er de samme for begge. Hvis du bruker Xamarin Studio, er det ingen støtte for Windows Phone prosjekter så du vil bare skape tre prosjekter i din løsning. Hvis du bruker Visual Studio, vil du opprette fire prosjekter.
I Visual Studio, opprette et nytt prosjekt og velg
Mobile
< b> apper
prosjekt familien til venstre, og velg Blanke app (Xamarin.Forms Portable)
prosjektmalen til høyre. Du kan kalle prosjektet noe du liker, men hvis du ønsker å følge med meg, så bruker navnet Tilpasning
, og klikk OK.
Nå avhengig av IDE, bør du se enten tre eller fire prosjekter i din løsning. Hvis du utvider Referanser
mappe i Customization (Portable)
prosjektet, vil du se en forsamling referanse til Xamarin.Forms.Core
. Det er der alle de ulike elementene er definert for deg å bruke i den delte brukergrensesnitt prosjektet. Ingenting utenom det vanlige der.
Hvis du åpner hver av de plattformspesifikke prosjekter og utvide sine Referanser
mapper, vil du se at hver og en inneholder en plattformspesifikk implementering av at Xamarin. Skjemaer bibliotek, heter Xamarin.Forms.Platform.Android
, Xamarin.Forms.Platform.iOS
, og Xamarin.Forms.Platform.WP8
hhv.
Det er i slike forsamlinger som du finner de gjengi for hver av de Xamarin.Forms elementer. Nå begynner du å se oppsettet av prosessen. Plattform agnostiske elementer eller vise objekter, er i delt kode prosjektet, men alle de spesifikke gjengi for elementene er i plattformspesifikke prosjekter.
Dette betyr at for hvert av elementene du bruker, det vil være to gjengi opprettet i Xamarin Studio, og tre i Visual Studio. Nå som du ser hvordan dette er strukturert i Xamarin.Forms, er det neste logiske spørsmålet vanligvis, "Når bør jeg bruke tilpasninger?".
3. Når skal Tilpass
Det er definitivt en god del egenskaper og egenskaper som er definert innenfor Xamarin.Forms elementer som kan brukes til å tilpasse den endelige kontroll på hver av plattformene. Etter å ha sagt det selv, finnes ikke hver tilpasning tilgjengelig i hver av plattformene i Xamarin.Forms. At det å være tilfelle, er det to hovedscenarier når du vil ønske å lage tilpasninger.
Det første scenariet når vil være behov for tilpasninger er når du ønsker å opprette en helt egendefinert kontroll. La oss si at du ønsket å lage en kalender kontroll eller kanskje en slags grafisk fremstilling kontroll. Dessverre ikke noe sånt eksisterer i dag i Xamarin.Forms, som ikke er å si at det aldri vil.
Dette er definitivt en situasjon hvor du trenger å starte fra torget en og lage alt fra bunnen av. Du må definere element du skal bruke for å beskrive egenskapene til kontroll i en plattform agnostiker måte. Deretter vil du også trenger for å lage en tilpasset renderer for hver av plattformene du ønsker å støtte.
Avhengig av hva du bygger, kan dette være et ganske omfattende prosjekt. Det å være tilfelle, vil jeg spare det for en annen tutorial i seg selv. I stedet, i denne opplæringen, vil vi fokusere på det andre scenariet der du trenger litt tilpasning.
Den andre situasjonen som du finner deg selv trenger noen tilpasning er når et innebygd element ikke støtte en bestemt funksjon i en plattform du ønsker å støtte. Et eksempel på dette ville være på etikett kontroll. I Xamarin.Forms, det er ingen mekanisme, eller eiendom, som lar deg lage tilsvarende på hver av plattformene for å gjøre teksten fet eller kursiv. Dette kan virke som en svært enkel situasjon, men du vil finne at den grunnleggende prosessen med å gjøre denne endringen tilgjengelig i elementet og har renderer forstår det vil være det samme her som i noen av de mer komplekse scenarioer.
Med andre scenariet i tankene, har du to alternativer. Du kan enten erstatte den eksisterende renderer for en bestemt plattform (eller for alle plattformer) og lage din egen funksjonalitet og tegning logikk for alle egenskapene til elementet. Alternativt kan du lage din egen element som stammer fra den eksisterende element og knytte det nye elementet med en tilpasset renderer. På denne måten vil du beholde alle standard logikk og gjengivelse av basiselementet og tilpasse den slik du ønsker. Dette vil være den ruten vi tar for eksempel. Nå, la oss se hvordan du legger til denne funksjonaliteten til vårt eget prosjekt.
4. Legge Customization
La oss starte denne prosessen ved å sette opp den grunnleggende strukturen i vår søknad, slik at vi kan se våre grunnlinjen og deretter gjøre endringer. Start med å åpne din App.cs
fil i Customization (Portable)
prosjektet i Solution Explorer
. Endre GetMainPage metoden for å se slik ut:
public static Side GetMainPage () {var iLabel = ny etikett {textcolor = Color.Black, Text = "Jeg ønsker å bli kursiv", HorizontalOptions = LayoutOptions.CenterAndExpand}; Var bLabel = ny etikett {Text = "Jeg ønsker å være fet!", textcolor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand}; Var bothLabel = ny etikett {Text = "Jeg ønsker å bli i kursiv og fet!", textcolor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand}; returnere nye ContentPage {bakgrunnsfarge = Color.White, Content = new StackLayout {Padding = 100, avstand = 100, barn = {iLabel, bLabel, bothLabel}}}; }
Som du ser her, har vi laget tre enkle Merk kontroller. Man ønsker å være i kursiv, man ønsker å være fet, og den tredje er grådige og ønsker å være begge deler. Hvis du skulle kjøre dette programmet på iOS, Android og Windows Phone, ville de se omtrent slik ut:
iOS
Android < .no>
Windows Phone
Som du kan se, har de ikke ønsker å være så kjedelig. Vel, ikke bare sitte der, hjelpe dem ut
Trinn 1:. Opprette et nytt element
Det første vi må gjøre er å lage et nytt element som vi kan bruke til å gi ytterligere tilpasninger til eksisterende etikett kontroll. Begynn med å legge en ny klasse til Customization (Portable)
prosjektet og gi den navnet StyledLabel
. Erstatte innholdet med følgende:
offentlig enum StyleType {Kursiv, Fet, BoldItalic} public class StyledLabel: Etikett {public StyleType stil {får; sett; }}
Vi definerer en veldig enkel telling og klasse. Vi har definert opptellingen å tillate kursiv, fet og fet pluss kursiv
verdier. Vi deretter opprette en klasse StyledLabel Hotell som stammer fra etikett
base klasse og legge til en ny eiendom, stil,
å holde riktig stil vi ønsker å bruke på kontroll.
For å sørge for at alt fortsatt fungerer, og det bør, la oss endre App.cs
fil igjen og erstatte Merking i vårt første eksempel med våre nye StyledLabel elementer. Fordi StyleLabel klassen arver fra etikett klasse, bør alt fortsatt fungere.
Public static Side GetMainPage () {var iLabel = new StyledLabel {textcolor = Color.Black, Text = "Jeg ønsker å bli i kursiv!", HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Italic}; Var bLabel = new StyledLabel {Text = "Jeg ønsker å være fet", textcolor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Bold}; Var bothLabel = new StyledLabel {Text = "Jeg ønsker å bli i kursiv og fet!", textcolor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.BoldItalic}; returnere nye ContentPage {bakgrunnsfarge = Color.White, Content = new StackLayout {Padding = 100, avstand = 100, barn = {iLabel, bLabel, bothLabel}}}; }
Igjen, her er resultatet av denne endringen.
iOS
Android
Windows Phone
Som du kan se, ingenting er endret. Nå som vi har en ny tilpasset element, er det på tide å lage egendefinerte gjengi å ta vare på de innfødte kontrollene
Trinn 2:. Android Renderer
Det første skrittet for å skape en renderer er å legge til en ny klasse til plattformen du er målgruppe. Vi vil starte med Xamarin.Android
prosjektet. Innenfor dette prosjektet, opprette en ny klasse fil og gi den navnet StyledLabelRenderer Hotell og erstatte innholdet med følgende:
bruker Android.Graphics, bruker Customization, bruker Customization.Droid, bruker Xamarin.Forms; hjelp Xamarin .Forms.Platform.Android [forsamlingen: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] navnerom Customization.Droid {public class StyledLabelRenderer: LabelRenderer {beskyttet ride void OnElementChanged (ElementChangedEventArgs < Label > e) {base.OnElementChanged ( e); Var styledLabel = (StyledLabel) Element; bryteren (styledLabel.Style) {case StyleType.Bold: Control.SetTypeface (null, TypefaceStyle.Bold); gå i stykker; case StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); gå i stykker; case StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); gå i stykker; }}}}
La oss ta en nærmere titt på denne kodeblokken
[forsamlingen: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))].
Vi starter med en spesiell montering attributt som forteller Xamarin. skjemaer for å bruke denne StyledLabelRenderer klasse som renderer hver gang den prøver å gjengi StyledLabel stedene. Dette er nødvendig for tilpasninger til å fungere ordentlig.
Akkurat som når vi opprettet en ny StyledLabel element, vi arvet fra etikett klassen, vil vi ha vår nye StyledLabelRenderer klassen arver fra LabelRenderer klassen. Dette vil tillate oss å beholde den eksisterende funksjonalitet, slik at vi bare nødt til å overstyre hva vi ønsker å endre eller tilpasse.
For å benytte vår nye formatering, vi kommer til å trenge å hoppe i gjengivelsen og vi gjøre det via OnElementChanged metoden. I denne metoden, kan vi gjøre alle våre tilpasninger.
Når du gjør dine tilpasninger, er det to svært viktige egenskaper du skal bruke. Først må du få en henvisning til den opprinnelige element som du opprettet, og som blir gjengitt i vår custom renderer metode. Du gjør dette ved hjelp av Element eiendommen. Dette er en generisk objekt, så du blir nødt til å kaste dette til uansett hvilken type du er gjengivelse. I dette tilfellet er det en StyledLabel
Var styledLabel = (StyledLabel) Element;.
Den andre viktige egenskapen du trenger er kontroll eiendommen. Denne eiendommen inneholder et maskinskrevet henvisning til den opprinnelige kontrollen på plattformen. I dette tilfellet, siden du har arvet fra LabelRenderer klassen, koden allerede vet at kontroll i dette tilfellet er en TextView.
Fra dette punktet, vil du bruke noen enkel logikk for å avgjøre hvilken tilpasning til å utføre og gjelder de aktuelle innfødte tilpasninger. I dette tilfellet vil du bruke Android mekanisme for å endre skriftsnitt av en TextView ved hjelp av SetTypeface metoden
slå (styledLabel.Style) {case StyleType.Bold. Control.SetTypeface (null, TypefaceStyle.Bold); gå i stykker; case StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); gå i stykker; case StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); gå i stykker; }
Hvis du skulle kjøre dette programmet nå, bør du se noe som følgende i Android Emulator, som er nøyaktig hva vi rettet for
Trinn 3:. iOS Renderer
Prosessen med å lage iOS renderer er nøyaktig det samme frem til poenget med å overstyre OnElementChanged metoden. Begynn med å lage en ny klasse i Customization.iOS
prosjektet. Name it StyledLabelRenderer Hotell og erstatte innholdet med følgende:
bruker Customization, bruker Customization.iOS, bruker MonoTouch.UIKit, bruker Xamarin.Forms, bruker Xamarin.Forms.Platform.iOS [forsamlingen: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] navne Customization.iOS {public class StyledLabelRenderer: LabelRenderer {beskyttet ride void OnElementChanged (ElementChangedEventArgs < Label > e) {base.OnElementChanged (e); Var styledLabel = (StyledLabel) Element; bryteren (styledLabel.Style) {case StyleType.Bold: Control.Font = UIFont.BoldSystemFontOfSize (16.0f); gå i stykker; case StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); gå i stykker; case StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); gå i stykker; }}}}
Som du kan se, er alt akkurat det samme. Du har samme forsamlingen attributt, er du overstyrer den samme OnElementChanged metoden, er du støpe Element annonsen til en StyledLabel, og du har samme skall av en bryter uttalelse å arbeide gjennom stil eiendommen.
Det eneste Forskjellen kommer inn der du søker styling til den opprinnelige UILabel kontroll
bryteren (styledLabel.Style) {case StyleType.Bold. Control.Font = UIFont.BoldSystemFontOfSize (16.0f); gå i stykker; case StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); gå i stykker; case StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); gå i stykker; }
Måten du gjør en UILabel sin Font eiendom enten fet eller kursiv i iOS er gjennom en statisk helper metoden på UIFont klassen heter enten BoldSystemFontOfSize eller ItalicSystemFontOfSize. Som vil fungere i tilfelle av enten en fet skrift eller kursiv skrift, men ikke begge deler. Hvis du prøver å bruke begge disse til en UILabel, vil bare den siste gjengi.
For å få begge stilarter, vi vil jukse litt og bruke en innebygd font i iOS som heter Helvetica- BoldOblique
. Denne skriften har både fet og kursiv innebygd, slik at vi ikke trenger å gjøre dem individuelt
Kjører dette i iOS Simulator vil gi deg følgende resultat:.
Trinn 4: Windows Phone Renderer
Til slutt kommer vi til Windows Phone. Som du kanskje allerede har gjettet, er prosessen nøyaktig det samme. Opprett en ny klasse i Customization.WinPhone
prosjektet, navn det StyledLabelRenderer Hotell og erstatte innholdet med følgende:
bruker System.Windows, bruker Customization, ved hjelp Customization.WinPhone; bruker Xamarin.Forms, bruker Xamarin.Forms.Platform.WinPhone [forsamlingen: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] navnerom Customization.WinPhone {public class StyledLabelRenderer: LabelRenderer {beskyttet ride void OnElementChanged (ElementChangedEventArgs < Label > e) {base.OnElementChanged (e); Var styledLabel = (StyledLabel) Element; bryteren (styledLabel.Style) {case StyleType.Bold: Control.FontWeight = FontWeights.Bold; gå i stykker; case StyleType.Italic: Control.FontStyle = FontStyles.Italic; gå i stykker; case StyleType.BoldItalic: Control.FontStyle = FontStyles.Italic; Control.FontWeight = FontWeights.Bold; gå i stykker; }}}}
Igjen, alt er det samme, bortsett for logikk. I dette tilfellet, for å gjøre teksten kursiv, setter du TextBlock sin FontStyle eiendom til kursiv. Så for å gjøre teksten fet, setter du FontWeight eiendom til Fet. Hvis du ønsker å bruke begge, du bare sette både
Kjører dette programmet i Windows Phone emulator vil gi deg følgende resultat:.
Du har nå opprettet en fullt funksjonell, tilpasset, cross platform element som gjør seg perfekt på alle tre plattformer. Du skal nå føler deg klar til å ta på verden. Vel, nesten.
Den prosessen som vi har fulgt gjennom hele denne opplæringen er helt gyldig og i de fleste tilfeller kommer til å fungere perfekt. Det er en veldig spesiell sak, men der vil vi gå glipp av noe funksjonalitet hvis vi bruker denne tilnærmingen. Dette tilfellet er data-binding i XAML.
5. XAML og Data-Binding
En av de veldig kule funksjonene Xamarin.Forms er det faktum at du kommer til å bruke XAML og data-bindende på samme måte som du ville gjort hvis du skulle lage en Windows Phone, WPF, eller Silverlight søknad. Dessverre data-bindende og XAML er utenfor omfanget av denne opplæringen, men jeg anbefaler deg å lese mer om dette temaet på XAML for Xamarin.Forms side
Trinn 1:. Bygging av XAML Page
< p> La oss begynne med å bygge en enkel XAML side som dupliserer brukergrensesnittet vi har laget tidligere i kode. Begynn med å legge en ny fil til Tilpasninger (Portable)
prosjektet, velge Skjema XAML Side
filtype og gi det et navn på StyledLabelPage
.
Når filen er opprettet, erstatte innholdet med følgende:?
< xml version = "1.0" encoding = "utf-8" > < ContentPage xmlns = "http: //xamarin. com /skjemaer /2014 /skjemaer "xmlns: x =" http://schemas.microsoft.com/winfx/2009/xaml~~number=plural "xmlns: lokal =" CLR-navnerom: Customization, montering = Tilpasning "x: Class =" Brukertilpasning .StyledLabelPage "> < StackLayout bakgrunnsfarge = "White" Mellomrom = "100" Padding = "100" > < lokale: StyledLabel Text = "Jeg ønsker å bli i kursiv" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "Kursiv" /> < lokale: StyledLabel Text = "Jeg ønsker å være fet" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "Bold" /> < lokale: StyledLabel Text = "Jeg ønsker å bli i kursiv og fet" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "BoldItalic" /> < /StackLayout > < /ContentPage >
Dette XAML vil skape nøyaktig samme side som vi har jobbet med før. Merk tillegg av xmlns: local navneromdeklarasjon på toppen av filen, så vel som den lokale: prefiks før hver henvisning til StyledLabel stedene. Uten disse vil XAML parseren ikke vet hva en StyledLabel er og til slutt vil ikke være i stand til å kjøre.
For å kjøre denne, må du lage to små modifikasjoner. Først åpner du App.cs
fil og endre GetMainPage metoden for å se slik ut:
public static Side GetMainPage () {return new StyledLabelPage (); }
For det andre åpner StyledLabelPage.xaml.cs
filen og endre det til å se slik ut:
offentlig delvis klasse StyledLabelPage: ContentPage {public StyledLabelPage () {InitializeComponent (); }}
Nå, når du kjører programmene dine, bør du få samme resultat på alle tre plattformer. Ganske ryddig, ikke sant?
iOS
Android
Windows Phone
Trinn 2: Legge til data-Binding
Hvis du er kjent med begrepet Model View View-modell mønster (MVVM), vil du vite at en av dens viktigste kjennetegn er data-bindende. Faktisk var dette mønster som er laget rundt bruken av XAML.
Data-binding er prosessen slik at egenskapene til to gjenstander som skal koples sammen, slik at en endring i en vil skape en endring i den andre. Prosessen med data-bindende innen XAML oppnås gjennom bruk av Binding Markup Extension
.
Markup extensions er ikke en funksjon av Xamarin.Forms, eller til og med av XAML. Det er faktisk en funksjon av XML som gjør at tilleggsfunksjonalitet som skal brukes til prosessen med å sette verdien av et attributt i et element.
For eksempel, la oss gi en nærmere titt på den første StyledLabel element i oven eksempel
< lokalt. StyledLabel Text = "Jeg ønsker å bli i kursiv" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "Kursiv" />
Problemet med denne markup er at alle egenskaper (attributter) blir eksplisitt tildelt. Dette skaper et ganske lite fleksibel utforming. Så hva skjer hvis en eller annen grunn under utførelsen av vår søknad, vi ønsker å endre stil egenskap å ha en verdi på Fet? Vel, i vår kode-bak-fil, ville vi trenger å se etter en hendelse, fange så fall få tak i denne forekomsten av StyledLabel element og endre denne attributtverdi. Det høres ut som mye arbeid. Ville det ikke vært fint om vi kunne gjøre denne prosessen enklere? Vel, det kan vi.
Binding Markup Extension
måte at du er i stand til å gjøre dette designet mer fleksibel for endring er gjennom bruk av Binding markup forlengelse. Måten du bruker denne utvidelsen er ved å endre markeringen for å se ut som følgende:
< lokale: StyledLabel Text = "Jeg ønsker å bli i kursiv" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "{Binding FirstStyle } "/>
Som du ser, har vi endret verdien av stil eiendommen til {Binding FirstStyle}. Bruken av et kodenummer som vanligvis kjennetegnes av bruk av krøllparenteser {}. Dette betyr at uansett hva som inneholdt inne i klammeparentes kommer til å være en markering forlengelse.
I dette tilfellet bruker vi Binding forlengelse. Den andre delen av denne utvidelsen er navnet på en eiendom som vi ønsker å binde seg til denne eiendommen (egenskap). I dette tilfellet vil vi kalle det FirstStyle. Som ikke eksisterer ennå, men vi vil ta vare på det i et øyeblikk. Først, la oss helt oppdatere denne filen for å dra nytte av data-bindende
. ≪? Xml version = "1.0" encoding = "utf-8" >? ≪ ContentPage xmlns = "http://xamarin.com /skjemaer /2014 /skjemaer "xmlns: x =" http://schemas.microsoft.com/winfx/2009/xaml "xmlns: lokal =" CLR-navnerom: Customization, monterings = Tilpasning "x: Class =" Brukertilpasning. StyledLabelPage "> < StackLayout bakgrunnsfarge = "White" Mellomrom = "100" Padding = "100" > < lokale: StyledLabel Text = "Jeg ønsker å bli i kursiv" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "{Binding FirstStyle}" /> < lokale: StyledLabel Text = "Jeg ønsker å være fet" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "{Binding SecondStyle}" /> < lokale: StyledLabel Text = "Jeg ønsker å bli i kursiv og fet" textcolor = "Black" HorizontalOptions = "CenterAndExpand" style = "{Binding ThirdStyle}" /> < /StackLayout > < /ContentPage >
BindingContext
Siden vi skaper en binding, per definisjon er vi prøver å koble denne XAML attributt til noe annet som gjør at disse to egenskapene til å dele sine data. For å gjøre det, må du først opprette en klasse som inneholder eiendommer med samme navn som vi bruker i XAML eksempelet ovenfor.
Opprett en ny klasse innen Tilpasninger (Portable)
prosjektet og gi den navnet SampleStyles Hotell og erstatte innholdet med følgende:
offentlige klasse SampleStyles {public StyleType FirstStyle {får; sett; } Public StyleType SecondStyle {får; sett; } Public StyleType ThirdStyle {får; sett; }}
Dette er en veldig enkel klasse som inneholder tre egenskaper av typen StyleType med samme navn som vi brukte i vår Binding av attributtene. Vi har nå XAML bruker Binding markup forlengelse og en klasse som inneholder eiendommer med samme navn som vi ser i bindingene i XAML. Vi trenger bare lim for å sette dem sammen. At limet er BindingContext.
Hvis du vil koble egenskapene til disse objektene sammen, må vi tildele en forekomst av SampleStyles klasse til BindingContext eiendom StyledLabelPage. Åpne StyledLabelPage.xaml.cs
fil og endre konstruktøren å se ut som følgende:
offentlig StyledLabelPage () {InitializeComponent (); BindingContext = nye SampleStyles {FirstStyle = StyleType.Italic, SecondStyle = StyleType.Bold, ThirdStyle = StyleType.BoldItalic}; }
I teorien, hvis du skulle kjøre programmet, XAML-filen vil bli fylt ut med verdier fra våre SampleStyles eiendommer og alt ville bli gjengitt på skjermen som vi har sett før. Dessverre det er ikke tilfelle. Du ender opp med å få et unntak under kjøring som ser slik ut:
Hvis du ser på Ytterligere informasjon
, vil du se problemet er at Ingen Eiendom navn stil funnet
. Dette er et resultat av måten vi laget StyledLabel i begynnelsen. For å dra nytte av data-bindende, dine egenskaper må være av typen BindableProperty. For å gjøre dette, må vi gjøre en liten endring i vår StyledLabel klasse
public class StyledLabel. Etikett {public static skrivebeskyttet BindableProperty StyleProperty = BindableProperty.Create < StyledLabel, StyleType > (p = > p.Style, StyleType .None); offentlig StyleType stil {få {return (StyleType) base.GetValue (StyleProperty); } Sett {base.SetValue (StyleProperty, verdi);}}}
Som du ser, har vi lagt en statisk egenskap som heter StyleProperty av type BindableProperty. Vi deretter tildelt det et resultat av en den CreateMethod som definerer eieren av eiendommen vi jobber med.
Eiendommen er stil, men eieren er StyledLabel. Den andre generiske parameter er returtypen av eiendommen, som er en StyleType. Så det eneste argumentet vi leverer til metoden er et uttrykk som definerer hva som blir returnert og en standardverdi. I vårt tilfelle er vi tilbake verdien av stil eksempel eiendom og standard vil være ingen, eller ingen styling.
Vi trenger da å endre stil eiendom gjennomføringen å utsette til og angivelse funksjonalitet til basen klasse slik at BindingProperty oppdateres riktig hvis verdien av stil endringer.
Nå, hvis du skulle kjøre programmet igjen, skal du se at alt fungerer som forventet.
iOS
Android
Windows Phone
Konklusjon
I denne opplæringen lærte du om et svært viktig begrep i verden av Xamarin.Forms, tilpasning. Tilpasning er en av de viktigste funksjonene som tillater dem å skille seg ut fra konkurrentene.
Å vite hvordan, når og hvor du skal tilpasse er en svært viktig ferdighet å ha som en mobil utvikler. Jeg håper du finner disse ferdighetene nyttige og er i stand til å sette dem til god bruk i ditt neste prosjekt.