Silverlight è la principale piattaforma di sviluppo di applicazioni per Windows Phone 7. In un precedente tutorial abbiamo trattato come impostare il tuo sistema per lo sviluppo di Windows Phone 7 e poi abbiamo sviluppato un molto semplice applicazione Silverlight che ruotava un pulsante attorno a una griglia. Questo articolo ti introdurrà a funzioni Silverlight più avanzate e ti consentirà di sviluppare applicazioni significative che visualizzano i dati in modi interessanti e unici.
Questo articolo ti introdurrà a una serie di funzionalità di Windows Phone 7 e Silverlight di livello intermedio, tra cui risorse applicative, stili, modelli di dati e visualizzazione della navigazione. Approfitta dell'associazione dati e WP7 servizi che ti consentono di navigare tra le pagine in modo rapido e semplice. Dovresti avere familiarità con XAML e C # prima di iniziare questo tutorial.
Creare il tuo progetto
In questo tutorial, creerai un semplice client Digg che consente a un utente di sfogliare le storie per argomento. Sfruttate le funzionalità di livello intermedio Silverlight e Windows Phone 7, tra cui risorse applicative, stili, modelli di dati e servizi di navigazione. Utilizzerai l'associazione dati per visualizzare informazioni da Digg e varie WP7 servizi per consentire agli utenti di aggirare la tua applicazione.
Per iniziare, assicurati di avere gli ultimi strumenti di sviluppo di Windows Phone 7 installati sul tuo computer. Gli strumenti sono stati aggiornati il 12 luglio 2010, quindi potrebbe essere necessario disinstallare un CTP precedente e installare gli strumenti Beta.
Apri Visual Studio 2010 e fai clic su Nuovo progetto nella barra laterale sinistra. Nella finestra di dialogo che si apre, seleziona "Applicazione Windows Phone" dai modelli disponibili e assegna al tuo progetto un nome come "SimpleDigg". Assicurati che l'opzione "Crea directory per soluzione" sia selezionata e fai clic su "OK". Le tue impostazioni dovrebbe apparire come il seguente:
Dopo aver creato il progetto, Visual Studio apre MainPage.xaml per la modifica. Chiudi questo file per ora.
Creazione di classi di dati Digg
Per accedere ai dati di Digg, useremo la loro API ufficiale. In particolare, utilizzeremo i metodi story.getAll e topic.getAll. È possibile trovare risposte di esempio per ogni chiamata ai seguenti URL:
story.getAll
topic.getAll
Come potete vedere, story.getAll restituisce gli articoli della storia. Le storie hanno molti dati associati a loro, ma ci concentreremo su 4 informazioni:
Titolo
Descrizione
Diggs
collegamento
Creiamo la classe per conservare questi dati. In Esplora soluzioni di Visual Studio (che è aperto per impostazione predefinita nella barra laterale destra), fare clic con il pulsante destro del mouse sul progetto e selezionare "Aggiungi> Nuova cartella". Assegna un nome a questa nuova cartella Digg. Fai clic destro sulla cartella appena creata e scegli "Aggiungi> Classe ...". Dai un nome alla tua classe Storia e fare clic sul pulsante Aggiungi.
Visual Studio aprirà la tua nuova classe per la modifica. All'interno della definizione della classe aggiungi quattro proprietà pubbliche come la seguente:
stringa pubblica Titolo get; impostato; stringa pubblica Descrizione get; impostato; public string Link get; impostato; public int Diggs get; impostato;
Ora aggiungi la classe che conserverà i dati dell'argomento. Fai clic destro sul tuo Digg cartella di nuovo e scegliere "Aggiungi> Classe ...". Dai un nome alla tua classe Argomento e aggiungi le seguenti proprietà quando il file si apre:
stringa pubblica Nome get; impostato; public string ShortName get; impostato;
A questo punto, hai creato tutte le classi di dati che ti serviranno per questo tutorial e sei pronto per contrassegnare le viste necessarie per il resto dell'applicazione.
Creazione di viste
Il client SimpleDigg ha tre diverse viste che devono essere create. Loro sono:
Elenco argomenti - Elenca tutti gli argomenti su Digg
Elenco delle storie - Elenca le storie recuperate da Digg in base a un argomento particolare
Dettaglio storia: mostra i dettagli di una storia selezionata
Elenco degli argomenti
L'Elenco argomenti sarà la prima schermata visualizzata dagli utenti all'avvio dell'applicazione. Comprende un elenco di nomi di argomenti che, quando si fa clic su uno degli argomenti, conduce a un elenco di storie in quell'argomento. Poiché questa sarà la prima schermata visualizzata dagli utenti, andremo avanti e utilizzeremo il file MainPage.xaml creato in precedenza che esiste già nel Progetto. Apri MainPage.xaml e dovresti vedere una rappresentazione visuale a sinistra e il markup per la vista a destra.
Fare clic sul testo "La mia applicazione" nella rappresentazione visiva e notare che a TextBlock l'elemento nella rappresentazione XAML è evidenziato. Quello TextBlock ha un Testo attributo attualmente occupato dal valore "LA MIA APPLICAZIONE". Modifica questo valore in base a ciò che desideri. Raccomando "Simple Digg". Vedrai che il visual designer si aggiorna per adattarsi alle tue modifiche.
Ora, ripeti il processo con la stringa "nome della pagina". Clicca sul testo, trova l'appropriato TextBlock e modificare il Testo attributo. Questa volta, ti consiglio di cambiarlo in "Argomenti". Se hai fatto tutto correttamente fino a questo punto, dovresti avere un StackPanel elemento che contiene due @ TextBlock @ s, ciascuno con un valore appropriato. XAML ha il seguente aspetto:
Ora è necessario aggiungere il contenitore dell'elenco alla pagina. Apri gli Strumenti di controllo (situati a sinistra di Visual Studio) e trascina un oggetto ListBox nell'area vuota della tua pagina. Devi modificarlo per allungare la larghezza e l'altezza del suo contenitore, quindi metti il cursore nell'editor XAML e modifica l'elemento ListBox per leggere come segue:
Questo markup rimuove tutti gli stili che il visual designer ha introdotto e rinomina l'elemento in modo da poter accedere agli elementi in esso contenuti. A questo punto, hai completato il markup per la vista Elenco argomenti e ora puoi spostarti sulle altre parti dell'applicazione
Lista delle storie
La visualizzazione elenco storie è molto simile alla lista degli argomenti. Per scopi organizzativi, inseriremo questa vista (e in seguito, la vista Dettagli cronologia) all'interno di una cartella separata. Fai clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e seleziona "Aggiungi> Nuova cartella". Assegna un nome alla nuova cartella Visualizzazioni. Quindi, fare clic con il tasto destro del mouse su Visualizzazioni cartella e scegli "Aggiungi> Nuovo elemento ..." Seleziona il Pagina ritratto di Windows Phone modello e chiamarlo Stories.xaml. La finestra di dialogo dovrebbe apparire come la seguente:
Ora, come prima, cambia il titolo dell'applicazione in "Simple Digg" e il nome della pagina in "Stories". Quindi, trascina un ListBox sullo spazio vuoto sotto il titolo della pagina e modifica il markup in modo che assomigli al seguente:
A questo punto la visualizzazione della lista delle storie sembra quasi identica alla tua lista di argomenti. Le vere differenze verranno visualizzate quando le si popola con elementi di dati.
Dettagli della storia
La vista finale per la tua applicazione è la visualizzazione Dettagli storia. La visualizzazione Dettagli storia presenterà i 4 pezzi di dati di cui abbiamo parlato in precedenza:
Titolo
Descrizione
Diggs
collegamento
Il numero di Diggs e titolo occuperà la parte superiore della vista e la descrizione della storia seguirà al di sotto. Successivamente, un link consentirà all'utente di navigare nella storia in questione, se lo desidera.
Come prima, fare clic con il tasto destro del mouse su Visualizzazioni cartella nel tuo progetto e scegli Aggiungi> Nuovo elemento. Seleziona il Pagina ritratto di Windows Phone template e dai il nome alla tua nuova vista Story.xaml. Fai clic su Aggiungi e Visual Studio verrà creato Story.xaml e aprilo per la modifica.
Cambia il titolo dell'applicazione e il testo del titolo della pagina per leggere rispettivamente "Simple Digg" e "Story". Ora, trascina un StackPanel nello spazio vuoto sotto il titolo della tua pagina. Trascina un altro StackPanel nel precedente StackPanel. Questo StackPanel conterrà il titolo della storia e il conteggio dei Digg. Vuoi che questi elementi si allineino uno accanto all'altro, quindi cambia il Orientamento proprietà a Orizzontale.
Infine, trascina un TextBlock e a Pulsante nel tuo primo StackPanel. Il TextBlock conterrà la descrizione della storia mentre il Pulsante consentirà all'utente di visitare la fonte della storia. Dovrai apportare alcune estese modifiche di proprietà a questi elementi e, piuttosto che eseguirli uno per uno, assicurati che il tuo markup sia simile al seguente:
Puoi vedere che abbiamo rimosso il più esplicito Altezza e Larghezza proprietà e cambiato Testo e Nome proprietà a qualcosa di un po 'più descrittivo. Sembra un po 'brutto in questo momento, ma lo sistemeremo più tardi. Se tutto è stato corretto correttamente, il riquadro del tuo visual designer dovrebbe essere simile al seguente:
A questo punto, vengono eseguite le basi di tutte le visualizzazioni necessarie. Puoi premere F5 per attivare l'applicazione per confermare che tutto funzioni, ma avrai solo una schermata vuota con "Argomenti" in alto.
Personalizzazione del Navigation Mapper
La prossima cosa che devi fare è assicurarti di poter indirizzare gli utenti attorno alla tua applicazione. Per farlo, utilizzerai la mappatura di navigazione di Silverlight con alcune semplici regole. Apri i tuoi progetti App.xaml file e posiziona il cursore all'interno dell'apertura Applicazione elemento e aggiungere un nuovo spazio dei nomi come segue:
xmlns: nav = "CLR-namespace: System.Windows.Navigation; assemblaggio = Microsoft.Phone"
Questo fa riferimento allo spazio dei nomi Navigazione di sistema di Windows (una funzione di Silverlight) e consente di utilizzare le varie classi di libreria esistenti al suo interno. Ora, trova il Application.Resources elemento in App.xaml e aggiungi i seguenti elementi:
Il codice appena inserito crea una varietà di mappature URI per le viste all'interno dell'applicazione. Corrispondono rispettivamente alla lista degli argomenti, alla lista delle storie e alle viste dei dettagli della storia. Come puoi vedere, il mapping di navigazione di Silverlight ti consente di definire variabili di query all'interno dei tuoi mapping personalizzati. Questo tornerà utile più tardi quando andremo a popolare i dati.
Non hai finito con la mappatura URI, però. Devi dire alla tua applicazione di usarlo UriMapper, quindi apri il App.xaml codice dietro facendo clic sulla freccia accanto a App.xaml e apertura app.xaml.cs. All'interno del App metodo dopo la chiamata a InitializePhoneApplication () aggiungi la seguente dichiarazione:
RootFrame.UriMapper = Risorse ["UriMapper"] come UriMapper;
Questa affermazione dice alla tua applicazione di usare l'UriMapper che hai appena definito XAML per la tua app del telefono. Ora iniziamo a popolare alcuni dati.
Compilare l'elenco degli argomenti
La prima cosa che dobbiamo fare è compilare l'elenco degli argomenti. Lo faremo quando l'utente naviga per la prima volta MainPage.xaml pagina. Per assicurarti che ciò accada, sostituirai il OnNavigatedTo metodo per il Pagina principale classe. Aperto MainPage.xaml.cs facendo clic sulla freccia accanto a MainPage.xaml. Posiziona il cursore dopo il costruttore e aggiungi il seguente codice:
protetto override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = new WebClient (); digg.DownloadStringCompleted + = new DownloadStringCompletedEventHandler (digg_DownloadStringCompleted); digg.DownloadStringAsync (new Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (mittente dell'oggetto, DownloadStringCompletedEventArgs e)
Lo puoi vedere all'interno del OnNavigatedTo metodo che crei a WebClient oggetto, assegnargli un gestore di eventi per quando viene scaricata una stringa, e poi istruirlo per scaricare la stringa dal Digg topic.getAll URL del metodo. Sappiamo che la stringa da scaricare sarà in formato XML, quindi dobbiamo assicurarci che il nostro gestore di eventi possa analizzare l'XML. A tale scopo utilizzeremo le librerie Linq disponibili nel framework .NET. Prima di poter utilizzare quelle classi di libreria, però, dovremo aggiungere un riferimento alla libreria. Fai clic con il pulsante destro del mouse sull'elemento "Riferimenti" nel riquadro Esplora soluzioni e scegli "Aggiungi riferimento ...". Dall'elenco che viene visualizzato, seleziona System.Xml.Linq e fai clic su "OK".
Ora, devi solo compilare il gestore eventi che hai creato. Modificare digg_DownloadStringCompleted quindi sembra il seguente:
void digg_DownloadStringCompleted (mittente dell'oggetto, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); argomenti var = argomento in topicXml.Descendants ("argomento") seleziona nuovo argomento Name = topic.Attribute ("nome"). Value, ShortName = topic.Attribute ("short_name"). Value; TopicsList.ItemsSource = argomenti;
Innanzitutto, verifichi se il download è stato completato correttamente. Se lo era, quindi analizzi la stringa risultante e generi una raccolta di argomenti usando Linq in XML. Se sei interessato, puoi leggere di più su Linq in XML sul sito ufficiale MSDN.
Alla fine, assegni il ItemsSource proprietà del TopicsList agli argomenti che hai analizzato. Se vedi una linea ondulata sotto Argomento, posiziona il cursore su di esso, fai clic sulla freccia giù che appare sotto la parola e seleziona "utilizzando SimpleDigg.Digg". A questo punto, i tuoi argomenti sono popolati, quindi attiva l'emulatore del tuo telefono premendo F5 e dovresti vedere qualcosa del tipo:
Come puoi vedere, l'elenco è stato compilato ma i dati corretti non vengono visualizzati. Occupiamoci di questo ora.
Modelli di dati
Il modello dati è uno degli strumenti più potenti nel tuo toolkit Silverlight. Ti permettono di definire il markup che dovrebbe essere mostrato per oggetti arbitrari. A questo punto, definiremo DataTemplates per Digg Topics and Stories. Aperto App.xaml e posiziona il cursore all'interno del Application.Resources elemento. Aggiungi il seguente elemento:
Questo DataTemplate contiene un semplice TextBlock elemento che è legato al Nome proprietà dell'oggetto che viene visualizzato. Se ricordi, il Digg.Topic la classe contiene a Nome proprietà che è impostata su nome attributo restituito dalla chiamata API di argomenti Digg. Torna al tuo MainPage.xaml e trova il ListBox elemento. Aggiungi una nuova proprietà ItemTemplate al ListBox come segue:
ItemTemplate = "StaticResource TopicTemplate"
Questa riga di codice indica all'applicazione di utilizzare il tuo creato in precedenza DataTemplate risorsa per visualizzare gli oggetti Argomento che compongono il ListBoxLa collezione di Se premi F5 ed esegui la tua applicazione, vedrai che i nomi degli Argomenti vengono visualizzati correttamente ora:
Recupero e visualizzazione di storie
A questo punto siamo pronti per iniziare a recuperare storie per argomento e elencarle. Innanzitutto, dobbiamo dire all'applicazione che quando viene toccato un titolo di argomento l'applicazione deve navigare nell'elenco delle storie. Aperto MainPage.xaml e trova il tuo ListBox elemento. Aggiungi il SelectionChanged proprietà e consentire a Visual Studio di creare un nuovo gestore di eventi. Nel MainPage.xaml.cs, cambia il gestore di eventi in modo che legga qualcosa come il seguente:
Se si esegue l'applicazione ora (premendo F5), è possibile vedere che si naviga alla pagina Storie ogni volta che si seleziona un argomento. Ora, abbiamo solo bisogno di compilare effettivamente la lista delle storie e farle visualizzare in modo appropriato. Come abbiamo fatto in precedenza, abbiamo intenzione di ignorare il OnNavigatedTo metodo per farlo accadere. Aperto Visite / Stories.xaml.cs e aggiungi il seguente codice:
protetto override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Nome della stringa; NavigationContext.QueryString.TryGetValue ("Argomento", nome); Client WebClient = nuovo WebClient (); client.DownloadStringCompleted + = new DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (nuovo Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + name)); void client_DownloadStringCompleted (mittente dell'oggetto, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement storyXml = XElement.Parse (e.Result); var stories = from story in storyXml.Descendants ("story") seleziona new Digg.Story Title = story.Element ("title"). Value, Description = story.Element ("description"). Value, Diggs = Int32. Parse (story.Attribute ("diggs"). Value), Link = story.Attribute ("link"). Value; StoriesList.ItemsSource = stories;
Molto di questo sembrerà familiare. L'unica parte che può sembrare strana è il recupero del nome dell'argomento. Se ricordi, hai mappato / Temi / argomento a /Views/Stories.xaml?Topic=topic. Cioè, permetti che la variabile della stringa di query dell'argomento venga passata in un formato amichevole. Quando siamo passati dalla lista degli argomenti, abbiamo passato il topic shortname nel relativo Uri. Nel codice sopra, quando l'elenco delle storie viene navigato, recuperiamo questa variabile e la usiamo per chiamare l'URL dell'API Digg con un argomento specifico.
Sappiamo che se accendiamo la nostra applicazione a questo punto non otterremo il tipo di aspetto che vogliamo per il nostro elenco di storie. Definiamo un altro DataTemplate da usare in questa vista. Aprire App.xaml e aggiungi il seguente codice al tuo Application.Resources elemento.
Ora, apri Vista / Stories.xaml e modifica il tuo ListBox elemento in modo che legga come segue:
Esegui l'applicazione premendo F5 e fai clic sul nome di un argomento. Aspetta un attimo e vedrai apparire le tue storie. La prossima cosa che dobbiamo fare è visualizzare i dettagli della storia nella pagina dei dettagli.
Visualizzazione dei dettagli della storia
Per visualizzare i dettagli della storia, dobbiamo prima consentire la navigazione nella pagina dei dettagli della storia e poi gestiremo la visualizzazione dei dati. Nella lista delle storie, abbiamo un numero di elementi della storia. Quando viene selezionato uno di questi, vogliamo memorizzarlo Storia oggetti da qualche parte e poi usarli nella pagina dei dettagli della storia. Per fare ciò, aggiungeremo un gestore di eventi al SelectionChanged evento come segue:
private void StoriesList_SelectionChanged (mittente dell'oggetto, SelectionChangedEventArgs e) PhoneApplicationService.Current.State ["Story"] = StoriesList.SelectedItem; NavigationService.Navigate (new Uri ("/ Story", UriKind.Relative));
Qui, stai memorizzando la storia selezionata nel PhoneApplicationService La classe di Stato proprietà come raccomandato dalle best practice del modello di esecuzione. Se hai una linea rossa ondulata sotto PhoneApplicationService quindi posiziona il cursore all'interno della parola, quindi seleziona il menu a discesa visualizzato e scegli "utilizzando Microsoft.Phone.Shell".
Ora, dobbiamo recuperarlo dall'altra parte. Apri il tuo Visite / Story.xaml.cs e aggiungi il seguente codice che sovrascrive OnNavigatedTo:
protetto override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Digg.Story story = PhoneApplicationService.Current.State ["Story"] come Digg.Story; this.DataContext = storia;
Qui, intercetti la navigazione nella vista dei dettagli della storia, recupera la storia memorizzata in PhoneApplicationService'S Stato proprietà e quindi rimuovere la storia dal PhoneApplicationService'S Stato collezione. Quindi si imposta il DataContext per la vista della storia recuperata. Questa è la chiave, poiché utilizzeremo questa associazione per visualizzare i dati appropriati.
Apri il tuo markup per la visualizzazione dei dettagli della storia in Vista / Story.xaml. Modificalo per utilizzare i collegamenti come segue:
Se avvii la tua applicazione ora (premi F5) sarai in grado di eseguire il drill down dall'elenco degli argomenti, all'elenco delle storie, ai dettagli completi della storia. La visualizzazione dei dettagli della storia dovrebbe essere simile alla seguente:
C'è solo un'ultima cosa da fare. Aggiungi un gestore di eventi click al pulsante Link in Vista / Story.xaml come segue:
Cambia il gestore dell'evento, Link_Click, leggere come segue:
private void Link_Click (mittente dell'oggetto, RoutedEventArgs e) Attività WebBrowserTask = new WebBrowserTask (); task.URL = (this.DataContext as Digg.Story) .Link; task.Show ();
Se vedi una linea rossa ondulata sotto WebBrowserTask, quindi posiziona il cursore sulla classe e seleziona "utilizzando Microsoft.Phone.Tasks" dal menu a discesa visualizzato. Questo codice avvia il browser Web di Windows Phone 7 facendo clic sul pulsante e navigandolo fino all'URL della storia.
Finendo
A questo punto hai un client Digg pienamente funzionante, anche se semplice. Puoi sfogliare storie per argomenti, visualizzare i dettagli della storia e visitare la storia completa nel WP7 programma di navigazione in rete. In questo tutorial abbiamo:
Classi create per memorizzare i dati Digg
Viste di applicazioni create e personalizzate utilizzando il visual designer
URI di navigazione personalizzati e utilizzato il servizio di navigazione di Windows Phone 7
Implementato DataTemplates e Stili per visualizzare storie e argomenti
Ignora i gestori di eventi OnNavigatedTo e OnNavigatedFrmo per fornire funzionalità appropriate per ogni pagina
Ha utilizzato le attività di Windows Phone 7 per avviare un browser web
Alcuni degli argomenti trattati sono molto approfonditi da includere in un semplice tutorial, quindi probabilmente vorrai saperne di più su di essi. Le seguenti risorse dovrebbero aiutarti a iniziare:
Modelli di dati
Panoramica Templatura dati
Esercitazioni su WPF: modelli di dati
stili
Tutorial WPF: stili
Tour guidato WPF - Stili
Programmazione di Windows Phone 7
Guida alla programmazione
Iniziare
Spero ti sia piaciuto questo tutorial. Se avete domande o volete vedere qualcosa di diverso in un futuro tutorial di Windows Phone 7, fatemelo sapere nei commenti.
Share
Accentsconagua
