La piattaforma Windows Phone 8 ha i propri stili di layout che la distinguono da qualsiasi altra piattaforma mobile. Questi layout unici sono possibili grazie a pochi comodi controlli integrati dell'SDK di Windows Phone 8. I controlli che vedremo in questo tutorial sono i Perno e Panorama controlli.
1. Panorama
Che cos'è?
Il controllo del layout di Windows Phone Panorama offre un approccio unico in termini di presentazione dei contenuti all'utente. Un panorama è composto da più pannelli o elementi panoramici che rappresentano ciascuno una pagina. In qualsiasi momento, solo una voce panoramica è visibile insieme a una piccola parte dell'elemento panorama precedente o successivo. Usando il controllo Panorama sembra di sbirciare attraverso un buco della serratura, puoi vedere parte della stanza dietro la porta, ma non l'intera stanza.
L'immagine sopra è un ottimo esempio per dimostrare il controllo Panorama. L'esempio precedente contiene cinque elementi panorama. Ogni oggetto panorama rappresenta una pagina con contenuto.
Nell'immagine sopra, il panorama attivo ha un titolo di menu. Allo stesso tempo, possiamo vedere un assaggio del prossimo oggetto panoramico intitolato In primo piano. Il controllo Panorama mostra all'utente che più contenuti sono in attesa di essere scoperti sulla destra. Scopriamo come usare il controllo Panorama.
Creazione di un controllo Panorama
Inizia creando un nuovo progetto Windows Phone. Per aggiungere un controllo Panorama al progetto, selezionare Aggiungi nuovo elemento> Pagina Panoramica di Windows Phone> Aggiungi dal Progetto menu. Questo dovrebbe aggiungere un controllo Panorama con due elementi panorama. Il controllo Panorama dovrebbe essere visibile nella vista di progettazione di Visual Studio.
Aggiungiamo un po 'di contenuto al controllo Panorama. Inseriremo il primo oggetto panoramico con un elenco di colori e il secondo oggetto panoramico con un numero di rettangoli colorati che corrisponde all'elenco dei colori del primo elemento panorama. In questo momento, il controllo Panorama contiene un controllo Grid con un nome di LayoutRoot come mostrato di seguito.
Il controllo Grid chiamato LayoutRoot è il contenitore principale della pagina corrente della nostra applicazione, contenente ogni altro elemento della pagina. Ricorda che in XAML i controlli sono strutturati in modo gerarchico, molto simile a XML.
Il controllo Panorama è nidificato nel controllo Grid e ha a Titolo proprietà di "la mia applicazioneIl controllo Panorama contiene gli elementi panorama. Come si può vedere nel frammento XAML sopra, il controllo Panorama contiene attualmente due elementi panorama. Intestazione la proprietà degli elementi del panorama è item1 e item2 rispettivamente.
Il Intestazione la proprietà di un elemento panorama è simile a Titolo proprietà del controllo Panorama e puoi cambiarli in qualsiasi modo tu voglia.
Aggiunta di colori
Inseriamo ora gli elementi del panorama con alcuni contenuti come quelli di cui abbiamo discusso in precedenza. Aggiorna il contenuto dei due elementi panoramici come mostrato di seguito.
Come puoi vedere ho cambiato il Intestazione proprietà degli articoli panorama a nomi di colori e colori rispettivamente. Al primo elemento panorama ho aggiunto un controllo StackPanel contenente cinque controlli TextBlock. Ciascuno dei controlli TextBlock ha il suo Testo proprietà impostata sul colore del nome. Ho anche impostato il Dimensione del font proprietà di ciascun controllo TextBlock a 30px per ingrandire il testo.
Il secondo controllo PanoramaItem contiene anche un controllo StackPanel, contenente cinque controlli Rettangolo. Ogni controllo Rettangolo viene riempito con un colore elencato nel primo oggetto panorama usando il suo Riempire proprietà. Il Altezza la proprietà dei rettangoli è impostata su 50px e il Margine la proprietà è impostata su 0, 0, 0, 10, che si traduce in un margine inferiore di 10px. Puoi vedere il risultato del tuo lavoro nella vista di progettazione del tuo IDE come mostrato di seguito.
Ora che abbiamo compilato il controllo Panorama con alcuni contenuti, è ora di concentrarsi sul secondo controllo di questo tutorial, il controllo Pivot.
2. Pivot
Che cos'è?
Il controllo Pivot è un altro modo per presentare il contenuto all'utente, unico per la piattaforma Windows Phone. Il controllo Pivot è simile al controllo Panorama in alcuni modi, ma ha un numero di funzioni che lo distinguono.
Come un controllo Panorama, un controllo Pivot può essere costituito da più elementi PivotItem controlli. Ogni elemento pivot può contenere altri controlli, come i controlli Grid e StackPanel. L'immagine sopra mostra un controllo Pivot con due controlli PivotItem, elenco e servizio, struttura.
Mentre il controllo Panorama mostra un'anteprima della pagina successiva, il controllo Pivot fa lo stesso per il Intestazione nella parte superiore del controllo Pivot. Questo è chiaramente mostrato nell'esempio sopra in cui puoi vedere le prime lettere della parola servizio, struttura, il titolo del secondo oggetto pivot. Per illustrare che il secondo oggetto pivot non è a fuoco, il titolo è disattivato.
Creazione di un controllo pivot
Creiamo un controllo Pivot seguendo la stessa procedura adottata per creare un controllo Panorama. Invece, selezionare l'opzione Pagina di pivot di Windows Phone. Come il controllo Panorama, compila il controllo Pivot con l'elenco di colori e il loro nome come abbiamo fatto in precedenza. Il codice XAML risultante per il controllo Pivot dovrebbe essere simile a quanto mostrato di seguito.
Prima di poter creare ed eseguire l'applicazione per vedere entrambi i controlli in azione, è necessario implementare un modo per navigare nelle pagine dell'applicazione. Questo sarà l'obiettivo della prossima sezione.
3. Navigazione della pagina
Se si esegue l'applicazione nel suo modulo corrente, verrà visualizzato il MainPage.xaml pagina, il punto di ingresso predefinito per ogni applicazione Windows Phone. Cambiamo questo.
Aggiunta di pulsanti
Per passare al controllo Panorama e Pivot implementato in precedenza, è necessario aggiungere due controlli Button a MainPage.xaml pagina. Doppio click MainPage.xaml nel tuo IDE e trascina due controlli Button dal cassetta degli attrezzi alla pagina nella vista di progettazione di Visual Studio.
Come puoi vedere qui sotto, ho anche cambiato il Soddisfare proprietà dei controlli Button da leggere Panorama e Perno.
Implementazione dei pulsanti di controllo
Quando l'uso tocca un controllo Button, vogliamo che l'applicazione passi al controllo Panorama o Pivot. Iniziamo con il pulsante sinistro prima.
Panorama
Inizia facendo doppio clic sul controllo Button sinistro nella vista disegno. Questo dovrebbe portarti a MainPage.cs, che contiene la classe a cui è collegato MainPage.xaml. Visual Studio ha già creato un metodo per noi, Button_Click, che viene invocato quando l'utente tocca il pulsante etichettato Panorama.
Quando l'utente tocca il primo pulsante, l'applicazione dovrebbe portarli al controllo Panorama. Lo realizziamo aggiornando il Button_Click metodo come mostrato di seguito.
Invochiamo il Navigare metodo attivo NavigationService, passando nella destinazione, a Uri istanza e il tipo di destinazione, UriKind.Relative. Si noti che il nome della pagina di destinazione deve corrispondere alla prima pagina del controllo Panorama, PanoramaPage1.xaml nell'esempio sopra. Non dimenticare il principale colpo in avanti.
Perno
La navigazione verso il controllo Pivot è molto simile. Aprire MainPage.xaml, fare doppio clic sul controllo Button etichettato Perno, e implementare il gestore di eventi, Button_Click_1, come mostrato di seguito. L'unica differenza è la destinazione verso cui navighiamo, PivotPage1.xaml.
Crea ed esegui l'applicazione per testare i pulsanti e i controlli Panorama e Pivot. Utilizza il pulsante fisico del dispositivo o dell'emulatore per tornare alla pagina precedente.
Conclusione
In questo tutorial, abbiamo coperto due importanti controlli di layout della piattaforma Windows Phone, i controlli Panorama e Pivot. Abbiamo anche rivisitato la navigazione e utilizzato alcuni dei controlli comuni su Windows Phone, come i controlli Button, TextBox e Rectangle. Nel prossimo articolo, concluderemo questa serie introduttiva su Windows Phone e guarderemo al futuro.
Share
Accentsconagua
