Platforma Windows Phone 8 are propriile stiluri de aspect care îi fac să iasă în evidență de orice altă platformă mobilă. Aceste layout-uri unice sunt posibile datorită câtorva comenzi integrate convenționale ale Windows Phone 8 SDK. Controalele la care vom vedea în acest tutorial sunt Pivot și Panoramă controale.
1. Panorama
Ce este?
Controlul aspectului Windows Phone Panorama oferă o abordare unică în ceea ce privește modul în care conținutul este prezentat utilizatorului. Panorama este alcătuită din mai multe panouri sau elemente panoramice care reprezintă fiecare o pagină. În orice moment, numai un element panoramic este vizibil alături de o mică porțiune din elementul panoramic anterior sau următor. Folosind controlul Panorama se simte ca peeking printr-o cheie de cheie, puteți vedea o parte a camerei din spatele ușii, dar nu întreaga cameră.
Imaginea de mai sus este un exemplu excelent pentru a demonstra controlul Panorama. Exemplul de mai sus conține cinci elemente panoramice. Fiecare articol panoramic reprezintă o pagină cu conținut.
În captura de ecran de mai sus, panorama activă are un titlu de meniul. În același timp, putem vedea o bucatica a următorului element panoramic intitulat Recomandate. Comanda panoramică indică utilizatorului că mai mult conținut așteaptă să fie descoperit în partea dreaptă. Hai să aflăm cum să folosim controlul Panorama.
Crearea unui control panoramic
Începeți prin crearea unui nou proiect Windows Phone. Pentru a adăuga un control panoramic la proiect, alegeți Adăugați un element nou> Pagina Panoramă Windows Phone> Adăugați de la Proiect meniul. Acest lucru ar trebui să adauge un control Panorama cu două elemente panoramice. Controlul panoramic trebuie să fie vizibil în vizualizarea de proiectare a Visual Studio.
Să adăugăm conținut la controlul Panorama. Vom umple primul element panoramic cu o listă de culori și cel de-al doilea element panoramic cu un număr de dreptunghiuri colorate care corespund listei de culori a primului element panoramic. În prezent, controlul Panorama conține un control Grid cu numele LayoutRoot așa cum se arată mai jos.
Se numește controlul rețelei LayoutRoot este containerul principal al paginii curente a aplicației noastre, care deține fiecare element al paginii. Rețineți că în controalele XAML sunt structurate în mod ierarhic, foarte asemănătoare cu XML.
Comanda panoramică este imbricată în controlul grilei și are un Titlu proprietatea "aplicatia mea"Controlul Panorama conține elementele panoramice.Așa cum puteți vedea în fragmentul XAML de mai sus, controlul Panorama conține în prezent două elemente panoramice. Antet proprietatea obiectelor panoramice este item1 și ITEM2 respectiv.
Antet proprietatea unui element panoramic este similară cu Titlu proprietatea controlului Panorama și le puteți schimba la ceea ce vă place.
Adăugarea de culori
Să populam acum articolele panoramice cu un anumit conținut, așa cum am discutat mai devreme. Actualizați conținutul celor două elemente panoramice după cum se arată mai jos.
După cum puteți vedea, am schimbat-o Antet proprietatea elementelor panoramice la nume de culori și colorate respectiv. La primul articol panoramic, am adăugat un control StackPanel care conține cinci controale TextBlock. Fiecare dintre controalele TextBlock are Text proprietate setată la culoarea numelui. De asemenea, am setat Marimea fontului proprietățile fiecărui control TextBlock la 30px pentru a face textul mai mare.
Cel de-al doilea control PanoramaItem conține, de asemenea, un control StackPanel, care conține cinci controale Rectangle. Fiecare comandă dreptunghiulară este umplută cu o culoare listată în primul element panoramic utilizând Completati proprietate. Înălţime proprietatea dreptunghiurilor este setată la 50px si margine proprietatea este setată la 0, 0, 0, 10, care se traduce la o margine inferioară de 10px. Puteți vedea rezultatul activității dvs. în vizualizarea de proiectare a IDE, după cum se arată mai jos.
Acum că am populat controlul Panorama cu un anumit conținut, este timpul să ne concentrăm asupra celui de-al doilea control al acestui tutorial, controlul Pivot.
2. Pivot
Ce este?
Controlul Pivot este un alt mod de prezentare a conținutului utilizatorului, unic pentru platforma Windows Phone. Controlarea Pivot este similară cu controlul Panorama în anumite moduri, dar are o serie de caracteristici care o diferențiază.
Ca un control Panorama, un control Pivot poate consta din mai multe PivotItem controale. Fiecare element pivot poate conține alte controale, cum ar fi controalele Grid și StackPanel. Imaginea de mai sus prezintă un control Pivot cu două controale PivotItem, director și facilitate.
În timp ce controlul Panorama prezintă o privire de sneak pe următoarea pagină, comanda Pivot face același lucru pentru Antet în partea de sus a controlului Pivot. Acest lucru este arătat clar în exemplul de mai sus, în care puteți vedea primele litere ale cuvântului facilitate, titlul celui de-al doilea element pivot. Pentru a ilustra faptul că cel de-al doilea element pivot nu este focalizat, titlul acestuia este în culoarea gri.
Crearea unui control pivot
Să creăm un control Pivot urmând aceiași pași pe care i-am făcut pentru a crea un control Panorama. În schimb, selectați opțiunea Pagină pictogramă Windows Phone. Ca și controlul Panorama, apăsați butonul Pivot cu lista de culori și numele lor, așa cum am făcut mai devreme. Codul XAML rezultat pentru comanda Pivot ar trebui să pară similar cu cel prezentat mai jos.
Înainte de a putea construi și rula aplicația pentru a vedea ambele comenzi în acțiune, trebuie să implementăm o modalitate de navigare a paginilor aplicației. Acesta va fi centrul următoarei secțiuni.
3. Navigare pe pagini
Dacă rulați aplicația în forma sa actuală, veți vedea MainPage.xaml , punctul de intrare implicit pentru fiecare aplicație Windows Phone. Să schimbăm asta.
Adăugarea butoanelor
Pentru a naviga la controlul Panorama și Pivot implementat mai devreme, trebuie să adăugăm două comenzi Button la MainPage.xaml pagină. Dublu click MainPage.xaml în IDE și trageți două comenzi Buton din Trusa de scule la pagina din vizualizarea de proiectare Visual Studio.
Așa cum puteți vedea mai jos, am schimbat și el Conţinut proprietățile butoanelor Button pentru citire Panoramă și Pivot.
Implementarea butoanelor de control
Când folosiți butoanele Buton de comandă, dorim ca aplicația să navigheze spre comanda Panorama sau Pivot. Să începem mai întâi cu butonul din stânga.
Panoramă
Începeți prin a face dublu clic pe butonul stânga al butonului din vizualizarea de proiectare. Ar trebui să te ducă MainPage.cs, care conține clasa la care este legată MainPage.xaml. Visual Studio a creat deja o metodă pentru noi, Button_Click, care este invocată atunci când utilizatorul pune pe butonul etichetat Panoramă.
Atunci când utilizatorul pune primul buton, aplicația trebuie să-i ducă la controlul Panorama. Realizăm acest lucru prin actualizarea Button_Click așa cum se arată mai jos.
Invocăm navigaţi metoda pe NavigationService, trecerea în destinație, a uri exemplu și tipul destinației, UriKind.Relative. Rețineți că numele paginii de destinație trebuie să se potrivească cu prima pagină a comenzii Panorama, PanoramaPage1.xaml în exemplul de mai sus. Nu uitati de slash-ul din fata.
Pivot
Navigarea la comanda Pivot este foarte asemănătoare. Deschideți MainPage.xaml, faceți dublu clic pe butonul Buton controlat Pivot, și să pună în aplicare gestionarea evenimentului, Button_Click_1, așa cum se arată mai jos. Singura diferență este destinația la care navigăm, PivotPage1.xaml.
Construiți și executați aplicația pentru a testa butoanele, precum și comenzile Panorama și Pivot. Utilizați butonul fizic înapoi al dispozitivului sau emulatorului pentru a naviga înapoi la pagina anterioară.
Concluzie
În acest tutorial, am abordat două controale importante de aspect ale platformei Windows Phone, comenzile Panorama și Pivot. De asemenea, am revizuit navigația și am folosit unele dintre comenzile comune pe Windows Phone, cum ar fi butoanele Buton, TextBox și Rectangle. În următorul articol, vom încheia această serie introductivă pe Windows Phone și vă uităm la ceea ce urmează pentru dvs..
Share
Accentsconagua
