Windows Phone 8-plattformen har egna layoutformat som gör att den sticker ut från någon annan mobilplattform. Dessa unika layouter är möjliga tack vare några praktiska inbyggda kontroller av Windows Phone 8 SDK. Kontrollerna som vi ska titta på i denna handledning är Svänga och Panorama kontroller.
1. Panorama
Vad är det?
Windows Phone Panorama Layout kontroll erbjuder ett unikt tillvägagångssätt när det gäller hur innehåll presenteras för användaren. Ett panorama består av flera paneler eller panoramaobjekt som var och en representerar en sida. Vid en viss tid syns bara ett panoramaobjekt tillsammans med en liten del av föregående eller nästa panoramaobjekt. Med panoramakontrollen känns som att du tittar genom ett nyckelhål kan du se en del av rummet bakom dörren, men inte hela rummet.
Ovanstående skärmdump är ett utmärkt exempel för att visa Panorama-kontrollen. Ovanstående exempel innehåller fem panoramaobjekt. Varje panoramaobjekt representerar en sida med innehåll.
I ovanstående skärmdump har den aktiva panoraman en titel på meny. Samtidigt kan vi se en glimt av nästa panoramaobjekt med titeln skiss. Panorama kontrollen visar användaren att mer innehåll väntar på att upptäckas till höger. Låt oss ta reda på hur du använder panoramakontrollen.
Skapa en panoramakontroll
Börja med att skapa ett nytt Windows Phone-projekt. För att lägga till en Panorama-kontroll i projektet, välj Lägg till nytt objekt> Windows Phone Panorama-sida> Lägg till från Projekt meny. Detta bör lägga till en panoramakontroll med två panoramaobjekt. Panoramakontrollen ska vara synlig i Visual Studios designvyn.
Låt oss lägga till lite innehåll på Panorama-kontrollen. Vi kommer att fylla i det första panoramaobjektet med en lista med färger och det andra panoramaobjektet med ett antal färgade rektanglar som motsvarar listan med färger i det första panoramaobjektet. Just nu innehåller Panorama-kontrollen en Grid-kontroll med namnet LayoutRoot som visas nedan.
Grid kontrollen heter LayoutRoot är huvudbehållaren på den aktuella sidan i vår ansökan och håller alla andra delar av sidan. Kom ihåg att i XAML kontroller är strukturerad i hierarkiskt, mycket lik XML.
Panoramakontrollen är kapslad i Grid-kontrollen och har a Titel egendom av "min ansökan". Panorama-kontrollen innehåller panoramaobjekten. Som du kan se i ovanstående XAML-kod, innehåller Panorama-kontrollen för närvarande två panoramaobjekt. Rubrik egenskapen hos panoramaobjekten är item1 och ITEM2 respektive.
De Rubrik egenskapen hos ett panoramaobjekt liknar Titel egenskapen hos Panorama kontrollen och du kan ändra dem till vad du vill.
Lägga till färger
Låt oss nu fylla i panoramaobjekten med lite innehåll som vi har diskuterat tidigare. Uppdatera innehållet i de två panoramaobjekten enligt nedan.
Som du kan se har jag ändrat Rubrik egenskapen hos panorama objekten till färgnamn och färger respektive. Till det första panoramaobjektet har jag lagt till en StackPanel-kontroll som innehåller fem TextBlock-kontroller. Var och en av TextBlock-kontrollerna har sin Text egenskapen satt till namnet färg. Jag har också satt Textstorlek egenskapen för varje TextBlock-kontroll till 30px för att göra texten större.
Den andra PanoramaItem-kontrollen innehåller också en StackPanel-kontroll, innehållande fem rektangulära kontroller. Varje rektangelkontroll är fylld med en färg som anges i det första panoramaobjektet med dess Fylla fast egendom. De Höjd egenskapen hos rektanglarna är inställd på x 50 bildpunkter och den Marginal fastigheten är inställd på 0, 0, 0, 10, vilket översätter till en bottenmarginal på 10px. Du kan se resultatet av ditt arbete i designvyn av din IDE som visas nedan.
Nu när vi har fyllt panoramakontrollen med lite innehåll, är det dags att fokusera på den andra kontrollen av denna handledning, pivotkontrollen.
2. Pivot
Vad är det?
Pivot-kontrollen är ett annat sätt att presentera innehåll för användaren, unikt för Windows Phone-plattformen. Pivot-kontrollen liknar Panorama-kontrollen på vissa sätt, men den har ett antal funktioner som skiljer det från varandra.
Som en panoramakontroll kan en pivotkontroll bestå av flera PivotItem kontroller. Varje pivot-objekt kan innehålla andra kontroller, som Grid och StackPanel-kontroller. Ovanstående skärmdump visar en Pivot-kontroll med två PivotItem-kontroller, katalog och anläggning.
Medan panoramakontrollen visar en snygg titt på nästa sida, gör Pivot-kontrollen samma för Rubrik högst upp på pivot-kontrollen. Detta visas tydligt i ovanstående exempel där du kan se de första bokstäverna i ordet anläggning, titeln på det andra pivot-objektet. För att illustrera att det andra pivot-objektet inte är i fokus, är titeln gråtonad.
Skapa en pivotkontroll
Låt oss skapa en Pivot-kontroll genom att följa samma steg som vi tog för att skapa en Panorama-kontroll. Istället väljer du alternativet Windows Phone Pivot Page. Liksom Panorama-kontrollen, fyll i Pivot-kontrollen med listan över färger och deras namn som vi gjorde tidigare. Den resulterande XAML-koden för Pivot-kontrollen ska likna vad som visas nedan.
Innan vi kan bygga och köra programmet för att se båda kontrollerna i åtgärd, måste vi implementera ett sätt att navigera på programmets sidor. Det kommer att vara fokus för nästa avsnitt.
3. Sidnavigering
Om du kör programmet i sin nuvarande form ser du MainPage.xaml sida, standardinställningspunkten för varje Windows Phone-applikation. Låt oss ändra det här.
Lägga till knappar
För att navigera till Panorama och Pivot-kontrollen som vi implementerade tidigare måste vi lägga till två knappkontroller till MainPage.xaml sida. Dubbelklicka MainPage.xaml i din IDE och dra två knappknappar från Toolbox till sidan i Visual Studios designvy.
Som du kan se nedan har jag också ändrat Innehåll egenskaper på knapparna kontrollerar att läsa Panorama och Svänga.
Genomföra knappreglagen
När användningen knackar på en knappkontroll, vill vi att applikationen ska navigera till antingen Panorama eller Pivot-kontrollen. Låt oss börja med vänster knapp först.
Panorama
Börja med att dubbelklicka på den vänstra knappkontrollen i designvyn. Detta borde ta dig till MainPage.cs, som innehåller den klass som är kopplad till MainPage.xaml. Visual Studio har redan skapat en metod för oss, Button_Click, som påkallas när användaren knackar på knappen märkt Panorama.
När användaren tappar den första knappen, bör programmet ta dem till Panorama-kontrollen. Vi uppnår detta genom att uppdatera Button_Click metod som visas nedan.
Vi åberopar Navigera metod på NavigationService, passerar i destinationen, a Uri exempel och typen av destination, UriKind.Relative. Observera att namnet på destinationssidan måste matcha den första sidan i Panorama-kontrollen, PanoramaPage1.xaml i ovanstående exempel. Glöm inte det främsta språket framåt.
Svänga
Navigering till pivot-kontrollen är väldigt likartad. Öppna MainPage.xaml, dubbelklicka på knappen Knapp märkt Svänga, och implementera händelsehanteraren, Button_Click_1, enligt nedanstående. Den enda skillnaden är destinationen vi navigerar till, PivotPage1.xaml.
Bygg och kör programmet för att testa knapparna samt Panorama och Pivot-kontrollerna. Använd den fysiska bakåtknappen på din enhet eller emulator för att navigera tillbaka till föregående sida.
Slutsats
I den här handledningen har vi täckt två viktiga layoutkontroller av Windows Phone-plattformen, Panorama och Pivot-kontrollerna. Vi besökte också navigering och använde några av de gemensamma kontrollerna på Windows Phone, som knapp, textbox och rektangelkontroll. I nästa artikel kommer vi att avsluta denna inledande serie på Windows Phone och titta vidare på vad som är nästa för dig.
Share
Accentsconagua
