Het Windows Phone 8-platform heeft zijn eigen lay-outstijlen die het onderscheiden van elk ander mobiel platform. Deze unieke lay-outs zijn mogelijk dankzij een paar handige ingebouwde bedieningselementen van de Windows Phone 8 SDK. De besturingselementen waar we naar gaan kijken in deze tutorial zijn de spil en Panorama controls.
1. Panorama
Wat is het?
Het lay-outbesturingselement Windows Phone Panorama biedt een unieke benadering in termen van hoe inhoud wordt gepresenteerd aan de gebruiker. Een panorama bestaat uit meerdere panelen of panoramapunten die elk een pagina vertegenwoordigen. Op een bepaald moment is slechts één panorama-item zichtbaar naast een klein gedeelte van het vorige of volgende panorama-item. Het gebruik van de Panorama-bediening voelt alsof je door een sleutelgat glijdt, je kunt een deel van de kamer achter de deur zien, maar niet de hele kamer.
De bovenstaande schermafbeelding is een goed voorbeeld om het besturingselement Panorama te demonstreren. Het bovenstaande voorbeeld bevat vijf panorama-items. Elk panorama-item vertegenwoordigt een pagina met inhoud.
In de bovenstaande schermafbeelding heeft het actieve panorama de titel menu. Tegelijkertijd kunnen we een glimp opvangen van het volgende panorama-item met de titel Aanbevolen. Het besturingselement Panorama toont de gebruiker dat er meer inhoud wacht om ontdekt te worden aan de rechterkant. Laten we kijken hoe we het Panorama-besturingselement kunnen gebruiken.
Een panoramacontrole maken
Begin met het maken van een nieuw Windows Phone-project. Als u een Panorama-besturingselement aan het project wilt toevoegen, kiest u Nieuw item toevoegen> Windows Phone Panorama-pagina> Toevoegen van de project menu. Dit zou een Panorama-regeling moeten toevoegen met twee panorama-items. Het Panorama-besturingselement moet zichtbaar zijn in de ontwerpweergave van Visual Studio.
Laten we wat inhoud toevoegen aan het Panorama-besturingselement. We gaan het eerste panorama-item vullen met een lijst met kleuren en het tweede panorama-item met een aantal gekleurde rechthoeken die overeenkomen met de lijst met kleuren van het eerste panorama-item. Op dit moment bevat het Panorama-besturingselement een rasterbesturing met de naam LayoutRoot zoals hieronder weergegeven.
De Grid-knop genaamd LayoutRoot is de hoofdcontainer van de huidige pagina van onze applicatie, die elk ander element van de pagina bevat. Vergeet niet dat in XAML-besturingselementen hiërarchisch gestructureerd zijn, zeer vergelijkbaar met XML.
Het Panorama-besturingselement is genest in de rasterbesturing en heeft een Titel eigendom van "mijn aanvraag"Het Panorama-besturingselement bevat de panorama-items. Zoals u in het bovenstaande XAML-fragment kunt zien, bevat het panorama-besturingselement momenteel twee panorama-items. hoofd eigenschap van de panorama-items is item 1 en item2 respectievelijk.
De hoofd eigenschap van een panorama-item is vergelijkbaar met de Titel eigenschap van het Panorama-besturingselement en u kunt ze naar wens wijzigen.
Kleuren toevoegen
Laten we nu de panorama-items vullen met bepaalde inhoud zoals we eerder hebben besproken. Werk de inhoud van de twee panoramapunten bij, zoals hieronder wordt weergegeven.
Zoals je kunt zien, heb ik de hoofd eigenschap van de panorama-items naar kleurnamen en kleuren respectievelijk. Aan het eerste panorama-item heb ik een StackPanel-besturingselement toegevoegd dat vijf TextBlock-besturingselementen bevat. Elk van de TextBlock-besturingselementen heeft zijn Tekst eigenschap ingesteld op de naamkleur. Ik heb ook de Lettertypegrootte eigenschap van elk TextBlock-besturingselement aan 30px om de tekst groter te maken.
Het tweede PanoramaItem-besturingselement bevat ook een StackPanel-besturingselement, dat vijf besturingselementen voor rechthoeken bevat. Elk besturingselement Rectangle is gevuld met een kleur die wordt vermeld in het eerste panorama-item met behulp van de Vullen eigendom. De Hoogte eigenschap van de rechthoeken is ingesteld op 50px en de Marge eigenschap is ingesteld op 0, 0, 0, 10, wat zich vertaalt naar een ondermarge van 10px. U kunt het resultaat van uw werk zien in de ontwerpweergave van uw IDE, zoals hieronder weergegeven.
Nu we het Panorama-besturingselement hebben gevuld met wat inhoud, is het tijd om ons te concentreren op het tweede besturingselement van deze zelfstudie, het draaipunt.
2. Draaien
Wat is het?
De Pivot-besturing is een andere manier om inhoud aan de gebruiker te presenteren, die uniek is voor het Windows Phone-platform. De draaibediening is in sommige opzichten vergelijkbaar met het Panorama-besturingselement, maar heeft een aantal functies waarmee het zich onderscheidt.
Net als bij een Panorama-besturing kan een draaipuntbesturing uit meerdere bestaan PivotItem controles. Elk spilitem kan andere bedieningselementen bevatten, zoals Grid- en StackPanel-besturingselementen. De bovenstaande schermafbeelding toont een draaibediening met twee PivotItem-besturingselementen, directory en faciliteit.
Terwijl het panoramabedieningselement een voorproefje van de volgende pagina weergeeft, doet het draaihulpprogramma hetzelfde voor de hoofd aan de bovenkant van het draaipunt. Dit wordt duidelijk weergegeven in het bovenstaande voorbeeld waarin u de eerste letters van het woord kunt zien faciliteit, de titel van het tweede draaipunt. Om te illustreren dat het tweede draaipunt niet scherp is, is de titel ervan grijs.
Een draaibeheersing maken
Laten we een draaibediening maken door dezelfde stappen te volgen die we hebben genomen om een Panorama-besturingselement te maken. Selecteer in plaats daarvan de optie Windows Phone Pivot-pagina. Net zoals bij het Panorama-besturingselement, vult u het draaipuntbesturingselement in met de lijst met kleuren en hun namen, zoals we eerder deden. De resulterende XAML-code voor de draaibediening moet er ongeveer zo uitzien als hieronder wordt weergegeven.
Voordat we de applicatie kunnen bouwen en uitvoeren om beide besturingselementen in actie te zien, moeten we een manier implementeren om door de pagina's van de toepassing te navigeren. Dat zal de focus zijn van de volgende sectie.
3. Paginanavigatie
Als u de applicatie in zijn huidige vorm uitvoert, ziet u de MainPage.xaml pagina, het standaardinvoerpunt voor elke Windows Phone-toepassing. Laten we dit veranderen.
Knoppen toevoegen
Om naar de Panorama- en Pivot-besturing te navigeren die we eerder hebben geïmplementeerd, moeten we twee Knopregelaars toevoegen aan de MainPage.xaml pagina. Dubbelklik MainPage.xaml in je IDE en sleep twee Button controls uit de Gereedschapskist naar de pagina in de ontwerpweergave van Visual Studio.
Zoals je hieronder kunt zien, heb ik ook de Inhoud eigenschappen van de knopbedieningen om te lezen Panorama en spil.
De knopbediening implementeren
Wanneer het gebruik op een knopbesturing tikt, willen we dat de toepassing naar de Panorama- of de draaibediening navigeert. Laten we eerst beginnen met de linkerknop.
Panorama
Begin door te dubbelklikken op de linkerknopknop in de ontwerpweergave. Dit zou je naar moeten brengen MainPage.cs, die de klasse bevat waaraan is gekoppeld MainPage.xaml. Visual Studio heeft al een methode voor ons gemaakt, Button_Click, die wordt aangeroepen wanneer de gebruiker op de knop met het label tikt Panorama.
Wanneer de gebruiker op de eerste knop tikt, moet de toepassing deze naar het Panorama-besturingselement brengen. We bereiken dit door de Button_Click methode zoals hieronder getoond.
We roepen het Navigeren methode op NavigationService, het passeren van de bestemming, a Uri bijvoorbeeld, en het type bestemming, UriKind.Relative. Merk op dat de naam van de bestemmingspagina moet overeenkomen met de eerste pagina van het Panorama-besturingselement, PanoramaPage1.xaml in het bovenstaande voorbeeld. Vergeet de leidende voorwaartse schuine streep niet.
spil
Navigeren naar de draaibediening is zeer vergelijkbaar. Open MainPage.xaml en dubbelklik op het label Button control spil, en implementeer de gebeurtenishandler, Button_Click_1, zoals hieronder getoond. Het enige verschil is de bestemming waarheen we navigeren, PivotPage1.xaml.
Bouw en voer de applicatie uit om de knoppen te testen, evenals de Panorama- en Pivot-knoppen. Gebruik de fysieke terugknop van uw apparaat of emulator om terug te gaan naar de vorige pagina.
Conclusie
In deze zelfstudie hebben we twee belangrijke lay-outbesturingselementen besproken van het Windows Phone-platform, de Panorama- en Pivot-besturingselementen. We hebben ook de navigatie opnieuw bekeken en een aantal algemene besturingselementen op Windows Phone gebruikt, zoals Knop-, Tekstvak- en Rechthoek-besturingselementen. In het volgende artikel zullen we deze inleidende serie over Windows Phone afsluiten en vooruit kijken naar wat de toekomst biedt voor jou.
Share
Accentsconagua
