Windows Phone 8-plattformen har sine egne layoutformater som gjør at den skiller seg ut fra hvilken som helst mobil plattform. Disse unike oppsettene er mulige takket være noen praktiske innebygde kontroller av Windows Phone 8 SDK. Kontrollene som vi skal se på i denne opplæringen er Dreie og Panorama kontroller.
1. Panorama
Hva er det?
Windows Phone Panorama layout kontroll gir en unik tilnærming når det gjelder hvordan innhold presenteres for brukeren. Et panorama består av flere paneler eller panoramaelementer som hver representerer en side. En gang til er bare ett panoramaelement synlig sammen med en liten del av det forrige eller neste panoramaelementet. Ved hjelp av Panorama kontrollen føles som å kikke gjennom et nøkkelhull, kan du se en del av rommet bak døren, men ikke hele rommet.
Ovennevnte skjermbilde er et godt eksempel for å demonstrere Panorama-kontrollen. Eksemplet ovenfor inneholder fem panoramaelementer. Hvert panoramaelement representerer en side med innhold.
I det ovennevnte skjermbildet har det aktive panorama en tittel på Meny. Samtidig kan vi se et glimt av det neste panoramaelementet med tittelen kjennetegnet. Panorama kontrollen viser brukeren at mer innhold venter på å bli oppdaget til høyre. La oss finne ut hvordan du bruker panoramakontrollen.
Opprette en panoramakontroll
Start med å lage et nytt Windows Phone-prosjekt. For å legge til en Panorama-kontroll i prosjektet, velg Legg til nytt element> Windows Phone Panorama Page> Add fra Prosjekt Meny. Dette bør legge til en panoramakontroll med to panoramaelementer. Panorama-kontrollen skal være synlig i Visual Studios designvisning.
La oss legge til noe innhold i Panorama-kontrollen. Vi skal fylle det første panoramaelementet med en liste med farger og det andre panoramaelementet med en rekke fargede rektangler som samsvarer med fargenes liste over det første panoramaelementet. For øyeblikket inneholder Panorama-kontrollen en Grid-kontroll med navnet LayoutRoot som vist nedenfor.
Grid kontrollen heter LayoutRoot er hovedbeholderen på den nåværende siden av søknaden, og holder alle andre elementer på siden. Husk at i XAML kontroller er strukturert i hierarkisk, veldig lik XML.
Panorama kontrollen er nestet i grid kontrollen og har a Tittel tilhører "min søknad". Panorama kontrollen inneholder panoramaelementene. Som du kan se i XAML-koden ovenfor, inneholder Panorama-kontrollen for øyeblikket to panoramaelementer. Overskrift egenskapen til panoramaelementene er item1 og item2 henholdsvis.
De Overskrift Egenskapen til et panoramaelement ligner på Tittel Egenskapen til Panorama-kontrollen, og du kan endre dem til hva du vil.
Legge til farger
La oss nå fylle panoramaelementene med noe innhold som vi har diskutert tidligere. Oppdater innholdet av de to panoramaelementene som vist nedenfor.
Som du kan se har jeg endret Overskrift egenskapen til panoramaelementene til farge navn og farger henholdsvis. Til det første panoramaelementet har jeg lagt til en StackPanel-kontroll som inneholder fem TextBlock-kontroller. Hver av TextBlock-kontrollene har sin Tekst eiendom satt til navnet farge. Jeg har også satt Skriftstørrelse Egenskapen til hver TextBlock-kontroll til 30px for å gjøre teksten større.
Den andre PanoramaItem-kontrollen inneholder også en StackPanel-kontroll, som inneholder fem rektangulære kontroller. Hver rektangelkontroll er fylt med en farge som er oppført i det første panorama-elementet ved hjelp av dens Fylle eiendom. De Høyde Eiendommen til rektanglene er satt til 50 piksler og Margin eiendommen er satt til 0, 0, 0, 10, som oversetter til en bunnmargin på 10px. Du kan se resultatet av arbeidet ditt i designvisningen til IDE-en din, som vist nedenfor.
Nå som vi har fylt Panorama kontrollen med noe innhold, er det på tide å fokusere på den andre kontrollen av denne opplæringen, Pivot-kontrollen.
2. Vri
Hva er det?
Pivot-kontrollen er en annen måte å presentere innhold til brukeren, unikt for Windows Phone-plattformen. Pivot-kontrollen ligner Panorama-kontrollen på noen måter, men den har en rekke funksjoner som setter den fra hverandre.
Som en Panorama-kontroll kan en Pivot-kontroll bestå av flere PivotItem kontroller. Hvert pivotelement kan inneholde andre kontroller, for eksempel Grid og StackPanel kontroller. Ovennevnte skjermbilde viser en Pivot-kontroll med to PivotItem-kontroller, katalog og anlegget.
Mens panoramakontrollen viser en snik på neste side, gjør Pivot-kontrollen det samme for Overskrift øverst på pivotkontrollen. Dette er tydelig vist i eksemplet ovenfor, der du kan se de første bokstavene i ordet anlegget, tittelen på det andre pivotelementet. For å illustrere at det andre pivotelementet ikke er i fokus, blir tittelen grå.
Opprette en pivotkontroll
La oss skape en Pivot-kontroll ved å følge de samme trinnene vi tok for å opprette en Panorama-kontroll. I stedet velger du alternativet Windows Phone Pivot Page. I likhet med Panorama-kontrollen fyller du pivotkontrollen med listen over farger og navnene som vi gjorde tidligere. Den resulterende XAML-koden for Pivot-kontrollen skal se ut som det som er vist nedenfor.
Før vi kan bygge og kjøre programmet for å se begge kontrollene i aksjon, må vi implementere en måte å navigere på programmets sider. Det vil være fokus for neste del.
3. Sidenavigasjon
Hvis du kjører programmet i sin nåværende form, vil du se MainPage.xaml side, standard inngangspunkt for hvert Windows Phone-program. La oss endre dette.
Legge til knapper
For å navigere til Panorama og Pivot-kontrollen som vi implementerte tidligere, må vi legge til to knappekontroller til MainPage.xaml side. Dobbeltklikk MainPage.xaml i IDE og dra to knappknapper fra Verktøykasse til siden i Visual Studios designvisning.
Som du kan se nedenfor, har jeg også endret Innhold egenskapene til knappen kontrollerer å lese Panorama og Dreie.
Implementere knappkontrollene
Når bruken tapper en knappkontroll, vil vi at applikasjonen skal navigere til enten Panorama eller Pivot-kontrollen. La oss starte med venstre knapp først.
Panorama
Start med å dobbeltklikke på venstre knappekontroll i designvisningen. Dette burde ta deg til MainPage.cs, som inneholder klassen som er knyttet til MainPage.xaml. Visual Studio har allerede opprettet en metode for oss, Button_Click, som påberopes når brukeren tapper knappen merket Panorama.
Når brukeren tapper den første knappen, bør programmet ta dem til Panorama-kontrollen. Vi oppnår dette ved å oppdatere Button_Click metode som vist nedenfor.
Vi påberoper Navigere metode på NavigationService, passerer i destinasjonen, a Uri eksempel og typen av destinasjon, UriKind.Relative. Merk at navnet på destinasjonssiden må samsvare med den første siden av Panorama-kontrollen, PanoramaPage1.xaml i eksempelet ovenfor. Ikke glem det fremste skråstreket.
Dreie
Navigering til pivotkontrollen er veldig lik. Åpne MainPage.xaml, dobbeltklikk på knappen Kontroll merket Dreie, og implementer hendelsesbehandleren, Button_Click_1, som vist under. Den eneste forskjellen er målet vi navigerer til, PivotPage1.xaml.
Bygg og kjør programmet for å teste knappene, samt panorama- og pivotkontrollene. Bruk den fysiske tilbakeknappen til enheten eller emulatoren til å navigere tilbake til forrige side.
Konklusjon
I denne opplæringen har vi dekket to viktige layoutkontroller av Windows Phone-plattformen, Panorama- og Pivot-kontrollene. Vi besøkte også navigasjon og brukte noen av de vanlige kontrollene på Windows Phone, for eksempel knapp, tekstboks og rektangelkontroll. I neste artikkel vil vi konkludere med denne innledende serien på Windows Phone og se på hva som er neste for deg.
Share
Accentsconagua
