Windows Phone 8: Pivot Og Panorama
26
Del
7
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter Komme i gang med Windows Phone 8.Windows Phone 8. Arbeide med Media ContentWindows Phone 8: Hvor To Go From Here
Windows Phone 8-plattformen har sin egne layout stiler som gjør det skiller seg ut fra alle andre mobile plattform. Disse unike oppsett er mulig takket være et par praktiske innebygde kontroller av Windows Phone 8 SDK. Kontrollene som vi skal se på i denne opplæringen er det Pivot Hotell og Panorama
kontroller.
1. Panorama
Hva er det?
Windows Phone Panorama layout kontroll tilbyr en unik tilnærming i forhold til hvordan innholdet presenteres for brukeren. En Panorama består av flere paneler eller panorama elementer som hver representerer en side. Til enhver tid, er bare ett panorama element synlig sammen med en liten del av den forrige eller neste panorama element. Bruke Panorama kontrollen føles som titte gjennom et nøkkelhull, kan du se en del av rommet bak døren, men ikke hele rommet.
På skjermbildet ovenfor vises et godt eksempel for å demonstrere Panorama kontroll. Eksempelet ovenfor inneholder fem panorama elementer. Hver panorama element representerer en side med innhold.
I skjermbildet over, har den aktive panorama en tittel på -menyen
. Samtidig ser vi et glimt av neste panorama elementet omtalt
. Panorama kontroll viser brukeren at mer innhold venter på å bli oppdaget på høyre side. La oss finne ut hvordan du bruker Panorama kontroll.
Opprette et Panorama Kontroll
Start med å opprette en ny Windows Phone-prosjektet. For å legge til en Panorama kontrollen til prosjektet, velger du Legg til nytt element > Windows Phone Panorama Page > Legg
fra Prosjekt
menyen. Dette bør legge et Panorama kontroll med to panorama elementer. Panorama kontroll skal være synlig i Visual Studio design utsikt.
La oss legge litt innhold til Panorama kontroll. Vi kommer til å fylle den første panorama element med en liste over farger og andre panorama elementet med en rekke fargede rektangler som samsvarer med listen over fargene på første panorama element. Akkurat nå, inneholder Panorama kontroll en Grid kontroll med et navn på LayoutRoot som vist nedenfor
< Grid x. Name = "LayoutRoot" > < telefon: Panorama Tittel = "application min" > <! - Panorama element én - > < telefon: PanoramaItem Header = "item1" > < Grid /> < /telefon: PanoramaItem > <! - Panorama element to - > < telefon: PanoramaItem Header = "item2" > < Grid /> < /telefon: PanoramaItem > < /telefon: Panorama > < /Grid >
The Grid kontroll navnet LayoutRoot
er hoved beholder av gjeldende side av vår søknad, holder alle andre element på siden. Husk at i XAML-kontroller er strukturert i hierarkisk, svært lik XML.
Panorama kontroll er nestet i Grid kontroll og har en Tittel
eiendom
"< b> min søknad
". Panorama kontroll inneholder panorama elementer. Som du kan se i ovennevnte XAML biten inneholder Panorama kontroll i dag to panorama elementer. Header
eiendom panorama elementene er item1 Hotell og item2
hhv.
Header
tilhører et panorama element er lik den Tittel
eiendommen av Panorama kontroll og du kan endre dem til hva du vil.
Legge Colors
La oss nå fylle panorama elementer med noe innhold som vi har diskutert tidligere. Oppdatere innholdet i de to panorama elementer som vist nedenfor
< - LayoutRoot inneholder roten rutenett der all annen side innhold plasseres - > < Grid x:.! Name = "LayoutRoot" > < telefon: Panorama Tittel = "application min" > <! - Panorama element én - > < telefon: PanoramaItem Header = "fargenavn" > < StackPanel > < TextBlock Text = "Red" skrift = "30" > < /TextBlock > < TextBlock Text = "Yellow" skrift = "30" > < /TextBlock > < TextBlock Text = "Blue" skrift = "30" > < /TextBlock > < TextBlock Text = "Green" skrift = "30" > < /TextBlock > < TextBlock Text = "White" skrift = "30" > < /TextBlock > < /StackPanel > < /telefon: PanoramaItem > <! - Panorama element to - > < telefon: PanoramaItem Header = "farger" > < StackPanel > < rektangel height = "50" Fyll = "Red" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "Yellow" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "Blue" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "Green" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "White" Margin = "0 0 0 10" > < /rektangulært > < /StackPanel > < /telefon: PanoramaItem > < /telefon: Panorama > < /Grid >
Som du ser har jeg endret Header
eiendom panorama elementer til fargenavn
og farger
hhv. Til den første panorama element, har jeg lagt en StackPanel kontroll inneholder fem TextBlock kontroller. Hver av de TextBlock kontrollene har sin Tekst
eiendom sett til navnet farge. Jeg har også satt i Skriftstørrelse
tilhører hver TextBlock kontroll til 30px
å gjøre teksten større.
Den andre PanoramaItem kontrollen inneholder også en StackPanel kontroll, som inneholder fem- rektangel kontroller. Hvert rektangel kontroll er fylt med en farge som er oppført i den første panorama element ved hjelp av sin Fyll
eiendom. Høyde
eiendom rektanglene er satt til 50 piksler Hotell og Margin
eiendommen er satt til 0, 0, 0, 10
, som settes til en bunn margin på 10px
. Du kan se resultatet av ditt arbeid i utformingen visning av IDE som vist nedenfor.
Nå som vi har befolket Panorama kontroll med noe innhold, er det på tide å fokusere på den andre kontrollen av denne opplæringen, Pivot kontroll.
2. Pivot
Hva er det?
Pivot-kontroll er en annen måte å presentere innhold til brukeren, unik for Windows Phone-plattformen. Pivot kontroll ligner på Panorama kontroll på noen måter, men det har en rekke funksjoner som skiller den.
Som en Panorama kontroll, kan en Pivot kontroll består av flere PivotItem Anmeldelser kontroller. Hver pivot elementet kan inneholde andre kontroller, for eksempel Grid og StackPanel kontroller. Skjermbildet over viser en Pivot kontroll med to PivotItem kontroller, katalogen Kjøpe og anlegget
.
Mens Panorama kontroll viser en sniktitt på den neste siden, Pivot kontroll gjør det samme for Header
på toppen av Pivot kontroll. Dette vises tydelig i eksempelet ovenfor der du kan se de første bokstavene i ordet anlegget
, tittelen på andre pivot elementet. For å illustrere at den andre dreie varen ikke er i fokus, er tittelen nedtonet.
Opprette en Pivot Kontroll
La oss lage en Pivot-kontroll ved å følge de samme trinnene vi tok til skape et Panorama kontroll. I stedet velger Windows Phone Pivot Page alternativet. I likhet med Panorama kontroll, befolke Pivot kontroll med listen over farger og deres navn som vi gjorde tidligere. Den resulterende XAML koden for Pivot kontroll bør ligne på det som er vist nedenfor
< Grid x. Name = "LayoutRoot" Bakgrunn = "Transparent" > <! - Pivot Control - > < telefon: Pivot Tittel = "MIN SØKNAD" > <! - Pivot punkt en - > < telefon: PivotItem Header = "fargenavn" > < StackPanel > < TextBlock Text = "Red" skrift = "30" > < /TextBlock > < TextBlock Text = "Yellow" skrift = "30" > < /TextBlock > < TextBlock Text = "Blue" skrift = "30" > < /TextBlock > < TextBlock Text = "Green" skrift = "30" > < /TextBlock > < TextBlock Text = "White" skrift = "30" > < /TextBlock > < /StackPanel > < /telefon: PivotItem > <! - Pivot punkt to - > < telefon: PivotItem Header = "farger" > < StackPanel > < rektangel height = "50" Fyll = "Red" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "Yellow" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "Blue" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "Green" Margin = "0 0 0 10" > < /rektangulært > < rektangel height = "50" Fyll = "White" Margin = "0 0 0 10" > < /rektangulært > < /StackPanel > < /telefon: PivotItem > < /telefon: Pivot > < /Grid >
Før vi kan bygge og kjøre programmet for å se begge kontrollene i aksjon, må vi gjennomføre en måte å navigere programmets sider. Det vil være fokus for neste avsnitt.
3. Page Navigation
Hvis du kjører programmet i sin nåværende form, vil du se MainPage.xaml
side, poenget standard inngang for alle Windows Phone-programmet. La oss endre dette.
Legge Knapper
For å navigere til Panorama og Pivot kontroll vi gjennomførte tidligere, må vi legge til to knappekontrollene til MainPage.xaml
side. Dobbelklikk på MainPage.xaml
i IDE og drar to knappekontroller fra Toolbox
til siden i Visual Studio design utsikt.
Som du kan se nedenfor, Jeg har også endret Innhold
egenskaper knappekontrollene til å lese Panorama Hotell og Pivot
.
Implementering knappekontrollene
< p> Når bruken taps en knapp kontroll, ønsker vi at programmet skal navigere til enten Panorama eller Pivot kontroll. La oss starte med den venstre knappen først.
Panorama
Start med å dobbeltklikke på venstre knapp kontroll i utformingsvisning. Dette skal ta deg til MainPage.cs
, som inneholder den klassen som er knyttet til MainPage.xaml
. Visual Studio har allerede opprettet en metode for oss, Button_Click, som er påberopt når brukeren kraner på knappen merket Panorama
.
Private void Button_Click (objekt avsenderen, RoutedEventArgs e) {}
Når bruker kraner den første knappen, programmet skal ta dem til Panorama kontroll. Vi oppnår dette ved å oppdatere Button_Click metoden som vist nedenfor
private void Button_Click (objekt avsenderen, RoutedEventArgs e). {NavigationService.Navigate (ny Uri ("/PanoramaPage1.xaml", UriKind.Relative));}
Vi påberope Naviger metoden på NavigationService, passerer i målet, en Uri eksempel, og den type mål, UriKind.Relative. Legg merke til at navnet på destinasjonen siden trenger for å matche den første siden av Panorama kontroll, PanoramaPage1.xaml
i eksempelet ovenfor. Ikke glem den ledende skråstrek.
Pivot
Navigere til Pivot kontrollen er svært like. Åpne MainPage.xaml, dobbeltklikker du på knappen kontroll Pivot
og implementere hendelsesbehandling, Button_Click_1, som vist nedenfor. Den eneste forskjellen er målet vi navigere til, PivotPage1.xaml
.
Private void Button_Click_1 (objekt avsenderen, RoutedEventArgs e) {NavigationService.Navigate (ny Uri ("/PivotPage1.xaml", UriKind. relativ));}
Bygg og kjøre programmet for å teste knappene samt Panorama og pivot kontroller. Bruk fysisk tilbake-knappen på enheten eller emulator å navigere tilbake til forrige side.
Konklusjon
I denne opplæringen, har vi dekket to viktige layout kontroller av Windows Phone-plattformen, de Panorama og pivot kontroller. Vi har også gjensyn med navigasjon og brukt noen av de vanlige kontrollene på Windows Phone, slik som Button, TextBox, og rektangulært kontroller. I neste artikkel vil vi avslutte denne innledende serien på Windows Phone og se fremover på hva som blir det neste for deg.