Silverlight este platforma principală de dezvoltare a aplicațiilor pentru Windows Phone 7. Într-un tutorial anterior am abordat modul în care sistemul dvs. a fost creat pentru dezvoltarea Windows Phone 7 și apoi am dezvoltat foarte aplicație simplă Silverlight care a rotit un buton în jurul unei rețele. Acest articol vă va prezenta mai multe funcții Silverlight avansate și vă va permite să dezvoltați aplicații semnificative care afișează date în moduri interesante și unice.
Acest articol vă va prezenta câteva caracteristici Windows Phone 7 și Silverlight de nivel intermediar, inclusiv resurse de aplicații, stiluri, șabloane de date și navigare de vizualizare. Veți profita de legarea datelor și WP7 servicii care vă permit să navigați rapid între pagini. Ar trebui să aveți o anumită familiaritate cu XAML și C # înainte de a începe acest tutorial.
Crearea Proiectului
În acest tutorial, veți crea un simplu client Digg care permite unui utilizator să răsfoiască povestiri după subiect. Veți beneficia de avantajele funcțiilor Silverlight și Windows Phone 7 la nivel intermediar, inclusiv resurse de aplicații, stiluri, șabloane de date și servicii de navigare. Veți utiliza legarea datelor pentru a afișa informații din Digg și diverse WP7 pentru a permite utilizatorilor să se apropie de cererea dvs..
Pentru a începe, asigurați-vă că aveți cele mai recente instrumente de dezvoltare Windows Phone 7 instalate pe computer. Instrumentele au fost actualizate la data de 12 iulie 2010, astfel încât este posibil să fie necesar să dezinstalați un CTP anterior și să instalați instrumentele Beta.
Deschideți Visual Studio 2010 și faceți clic pe Proiect nou în bara laterală stângă. În fereastra de dialog care se afișează, selectați "Windows Phone Application" din șabloanele disponibile și dați proiectului numele acestuia ca "SimpleDigg". Asigurați-vă că este bifată opțiunea "Create directory for solution" și apoi faceți clic pe "OK" ar trebui să arate după cum urmează:
După ce proiectul dvs. este creat, Visual Studio deschide MainPage.xaml pentru editare. Închideți acest fișier pentru moment.
Crearea de clase de date Digg
Pentru a accesa datele Digg, vom folosi API-ul oficial. În special, vom folosi metodele story.getAll și topic.getAll. Exemplu de răspunsuri pentru fiecare apel găsiți la următoarele adrese URL:
story.getAll
topic.getAll
După cum puteți vedea, story.getAll returnează articole de poveste. Povestirile au o mulțime de date asociate cu ele, dar ne vom concentra pe 4 informații:
Titlu
Descriere
Diggs
Legătură
Să creăm clasa pentru a ține aceste date. În Visual Studio Solution Explorer (care este deschis implicit în bara laterală dreaptă), faceți clic dreapta pe proiectul dvs. și alegeți "Adăugați> Folder nou". Denumiți acest nou dosar Digg. Faceți clic dreapta pe folderul nou creat și alegeți "Add> Class ...". Denumiți clasa Poveste și faceți clic pe butonul Adăugați.
Visual Studio va deschide noua clasă pentru editare. În interiorul definiției clasei adăugați patru proprietăți publice, cum ar fi:
public string Titlu get; a stabilit; șir public Descriere get; a stabilit; șir public public Link get; a stabilit; public int Diggs get; a stabilit;
Acum, adăugați clasa care va conține datele Topic. Faceți clic dreapta pe dvs. Digg dosarul din nou și alegeți "Adăugați> Clasa ...". Denumiți clasa Subiect și adăugați următoarele proprietăți la deschiderea fișierului:
șir public nume get; a stabilit; șir public shortName get; a stabilit;
În acest moment, ați creat toate clasele de date de care veți avea nevoie pentru acest tutorial și sunteți gata să marcați vizualizările necesare pentru restul aplicației.
Crearea de vizualizări
Clientul SimpleDigg are trei vizualizări diferite care trebuie create. Sunt:
Lista de teme - Listează toate subiectele de pe Digg
Listă de povestiri - Listează articole extrase din Digg pe baza unui anumit subiect
Poveste detaliată - Afișează detalii despre o poveste selectată
Lista de subiecte
Lista de subiecte va fi primul ecran pe care utilizatorii îl vor vedea atunci când își pornesc aplicația. Acesta cuprinde o listă de nume de subiecte care, atunci când unul dintre subiecte este apăsat, duce la o listă de povestiri în acel subiect. Deoarece acesta va fi primul ecran pe care îl văd utilizatorii, vom merge mai departe și vom folosi fișierul MainPage.xaml creat anterior, care există deja în proiect. Deschideți MainPage.xaml și ar trebui să vedeți o reprezentare vizuală pe partea stângă și marcajul pentru vizualizarea din dreapta.
Faceți clic pe textul "Aplicația mea" în reprezentarea vizuală și observați că: a TextBlock element în reprezentarea XAML este evidențiat. Acea TextBlock are o Text atributul ocupat în prezent de valoarea "APLICAȚIA MEA". Schimbați valoarea la ceea ce doriți. Vă recomandăm "Simple Digg". Veți vedea că designerul vizual actualizează actualizările.
Acum, repetați procesul cu șirul "nume pagină". Faceți clic pe text, găsiți corespunzător TextBlock și modificați Text atribut. De această dată, vă recomandăm să o schimbați la "Subiecte". Dacă ați făcut totul corect până acum, ar trebui să aveți a StackPanel element care conține două @ TextBlock @ s, fiecare cu o valoare corespunzătoare. XAML-ul arată după cum urmează:
Acum, trebuie să adăugați containerul listei la pagina dvs. Deschideți caseta de instrumente de control (amplasată în partea stângă a Visual Studio) și glisați un element ListBox în zona mare necompletată a paginii. Trebuie să îl modificați pentru a întinde lățimea și înălțimea containerului, astfel că puneți cursorul în editorul XAML și modificați elementul ListBox astfel:
Acest marcaj elimină toate stilul pe care designerul vizual le-a introdus și redenumirea elementului, astfel încât să puteți accesa elementele din acesta. În acest moment, ați terminat marcajul pentru afișarea listei de subiecte și puteți trece acum la celelalte părți ale aplicației
Listă de povestiri
Vizualizarea listei de povestiri este foarte asemănătoare cu lista de subiecte. În scopuri organizaționale, vom plasa această vizualizare (și mai târziu, vizualizarea Detalii poveste) în interiorul unui dosar separat. Faceți clic dreapta pe numele proiectului în Solution Explorer și alegeți "Add> Folder New". Nume folderul nou Vizualizări. Apoi, faceți clic dreapta pe Vizualizări și selectați "Adăugați> Articol nou ..." Selectați Windows Phone Portrait Page șablon și numește-l Stories.xaml. Caseta dvs. de dialog ar trebui să arate după cum urmează:
Acum, ca și mai înainte, schimbați titlul aplicației la "Simple Digg" și numele paginii la "Stories". Apoi glisați un ListBox în spațiul gol de sub titlul paginii și modificați marcajul acestuia pentru a arăta astfel:
În acest moment, afișarea listei de povestiri pare aproape identică cu lista dvs. de subiecte. Diferențele reale vor apărea atunci când le veți umple cu elemente de date.
Detalii despre poveste
Vizualizarea finală pentru aplicația dvs. este afișarea Detalii despre poveste. Afișarea Detalii despre poveste va prezenta cele 4 date despre care am vorbit mai devreme:
Titlu
Descriere
Diggs
Legătură
Numărul Diggs și titlu va ocupa partea superioară a vederii, iar descrierea povestirii va fi urmată de dedesubt. După aceasta, un link va permite utilizatorului să navigheze la povestea în cauză, dacă doresc.
Ca și înainte, faceți clic dreapta pe Vizualizări în proiectul dvs. și alegeți Adăugați> Element nou. Selectează Windows Phone Portrait Page șablon și denumiți noua vizualizare Story.xaml. Faceți clic pe Adăugați și va crea Visual Studio Story.xaml și deschideți-l pentru editare.
Schimbați titlul aplicației și titlurile de pagină pentru a citi "Simple Digg" și "Story" respectiv. Acum trageți a StackPanel în spațiul gol de sub titlul paginii. Trageți un altul StackPanel în precedentul StackPanel. Acest StackPanel va conține titlul de poveste și numărul Digg. Doriți ca aceste elemente să se alinieze una lângă alta, deci schimbați Orientare proprietate la Orizontală.
În cele din urmă, trageți a TextBlock și a Buton în primul tău StackPanel. TextBlock va conține descrierea povestii în timp ce Buton va permite utilizatorului să viziteze sursa de poveste. Va trebui să faceți modificări importante ale proprietății acestor elemente și, mai degrabă decât să le treceți unul câte unul, asigurați-vă că marcajul dvs. arată astfel:
Puteți vedea că am eliminat cele mai explicite Înălţime și Lăţime proprietati si schimbat Text și Nume proprietăți la ceva mai puțin descriptiv. Arată puțin urât acum, dar o să rezolvăm mai târziu. Dacă aveți totul marcat corect, atunci panoul vizual de designer ar trebui să arate după cum urmează:
În acest moment, elementele de bază ale tuturor viziunilor necesare sunt realizate. Puteți lovi F5 să aprindă aplicația pentru a confirma că totul funcționează, dar veți obține doar un ecran gol cu "Subiecte" în partea de sus.
Personalizarea Mapperului de navigație
Următorul lucru pe care trebuie să-l faceți este să vă asigurați că puteți direcționa utilizatorii în jurul aplicației. Pentru a face acest lucru, veți utiliza maparea navigației Silverlight cu câteva reguli simple. Deschideți proiectul App.xaml și plasați cursorul în interiorul deschiderii cerere element și adăugați un nou spațiu de nume după cum urmează:
xmlns: nav = "CLR-namespace: System.Windows.Navigation; asamblare = Microsoft.Phone"
Acesta face referire la spațiul de nume Windows System Navigation (o caracteristică Silverlight) și vă permite să utilizați diferitele clase de bibliotecă care există în cadrul acestuia. Acum, găsiți Application.Resources element în App.xaml și adăugați următoarele elemente:
Codul pe care tocmai l-ați introdus creează o varietate de mapări URI pentru vizualizările din cadrul aplicației. Acestea corespund listei de subiecte, listei de povestiri și, respectiv, detaliilor de opinie. După cum puteți vedea, maparea navigației Silverlight vă permite să definiți variabilele de interogare din interiorul mapărilor personalizate. Acest lucru va veni la îndemână mai târziu atunci când vom merge la de fapt, populare de date.
Dar nu ați terminat cu cartografiere URI. Trebuie să spuneți aplicației dvs. să folosească acest lucru UriMapper, deschideți astfel App.xaml cod în urmă făcând clic pe săgeata de lângă App.xaml și deschiderea App.xaml.cs. În interiorul App după apelul la InitializePhoneApplication () adăugați următoarea declarație:
RootFrame.UriMapper = Resurse ["UriMapper"] ca UriMapper;
Această declarație indică aplicației dvs. să utilizeze UriMapper-ul pe care tocmai l-ați definit XAML pentru aplicația dvs. de telefon. Acum, să începem să populam niște date.
Populația listei de teme
Primul lucru pe care trebuie să-l facem este să populezi lista Topic. Vom face acest lucru când utilizatorul navighează mai întâi la MainPage.xaml pagină. Pentru a vă asigura că acest lucru se întâmplă, veți înlocui OnNavigatedTo metoda pentru Pagina principală clasă. Deschis MainPage.xaml.cs dând clic pe săgeata de lângă MainPage.xaml. Plasați cursorul după constructor și adăugați următorul cod:
protejat override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = nou WebClient (); digg.DownloadStringCompleted + = DownloadStringCompletedEventHandler nou (digg_DownloadStringCompleted); digg.DownloadStringAsync (noul Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (expeditor obiect, DownloadStringCompletedEventArgs e)
Puteți vedea că în interior OnNavigatedTo metoda pe care o creați WebClient obiect, atribuiți-i un handler de evenimente atunci când un șir este descărcat și apoi instruiți-l să descarce șirul de pe Digg topic.getAll Adresa URL a metodei. Știm că șirul de descărcat va fi în format XML, deci trebuie să ne asigurăm că editorul nostru de evenimente poate parsa XML. În acest scop, vom folosi bibliotecile Linq disponibile în cadrul .NET. Înainte de a putea folosi aceste clase de bibliotecă, totuși, va trebui să adăugăm o referință la bibliotecă. Faceți clic dreapta pe elementul "Referințe" din panoul Explorator soluție și alegeți "Adăugați o referință ..." Din lista care apare, selectați System.Xml.Linq și faceți clic pe "OK".
Acum, trebuie doar să completați un handler de evenimente pe care l-ați creat. Schimbare digg_DownloadStringCompleted astfel încât să pară următoarele:
void digg_DownloadStringCompleted (expeditor obiect, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); var subiecte = de la subiect în topicXml.Descendants ("topic") selectați Subiect nou Name = topic.Attribute ("nume"). TopicsList.ItemsSource = subiecte;
În primul rând, verificați dacă descărcarea a fost încheiată cu succes. Dacă a fost, atunci parsezi șirul rezultat și generați o colecție de subiecte folosind Linq în XML. Dacă sunteți interesat, puteți citi mai multe despre Linq către XML pe site-ul oficial MSDN.
În cele din urmă, atribuiți ItemsSource proprietate a TopicsList la subiectele pe care le-ați analizat. Dacă vedeți o linie neclară sub Topic, plasați cursorul după ea, faceți clic pe săgeata în jos care apare sub cuvânt și selectați "folosind SimpleDigg.Digg". În acest moment, aveți subiectele dvs. populate, astfel încât să porniți emulatorul telefonului dvs. apăsând pe F5 și ar trebui să vedeți ceva asemănător:
După cum puteți vedea, lista dvs. a fost populată, dar datele corecte nu sunt afișate. Să avem grijă de asta acum.
Șabloane de date
Șablonul de date este unul dintre cele mai puternice instrumente din setul de instrumente Silverlight. Acestea vă permit să definiți marcajul care ar trebui afișat pentru obiectele arbitrare. În acest moment, vom defini DataTemplates pentru Digg Topics and Stories. Deschis App.xaml și plasați cursorul în interiorul Application.Resources element. Adăugați următorul element:
Acest DataTemplate prevede conține un simplu TextBlock element care este legat de Nume proprietatea obiectului care este afișat. Dacă vă aduceți aminte, Digg.Topic clasa conține a Nume proprietate care este setată la Nume atributul returnat din apelul API pentru subiectele Digg. Întoarce-te la tine MainPage.xaml și găsiți ListBox element. Adăugați o proprietate nouă ItemTemplate la ListBox după cum urmează:
ItemTemplate = "StaticResource TopicTemplate"
Această linie de cod instruiește aplicația să utilizeze unitatea dvs. creată anterior DataTemplate resursă pentru a afișa obiectele de subiect care alcătuiesc ListBoxde colectare. Dacă apăsați F5 și executați aplicația, veți vedea că numele de subiect sunt afișate corect acum:
Fetching și Afișarea articolelor
În acest moment, suntem gata să începem să preluăm povestiri pe fiecare subiect și să le listăm. În primul rând, trebuie să spunem aplicației că, atunci când este atins un titlu de subiect, aplicația trebuie să navigheze către lista de articole. Deschis MainPage.xaml și găsiți-vă ListBox element. Adaugă SelectionChanged proprietate și permite Visual Studio să creeze un nou handler de evenimente. În MainPage.xaml.cs, schimbați managerul evenimentului astfel încât acesta să citească ceva de genul:
Dacă executați aplicația acum (apăsând F5), puteți vedea că navigați la pagina Stories de fiecare dată când selectați un subiect. Acum, trebuie doar să populam lista de povestiri și să le afișăm în mod corespunzător. Așa cum am făcut mai devreme, vom trece peste OnNavigatedTo metodă pentru a face acest lucru. Deschis Vizualizări / Stories.xaml.cs și adăugați următorul cod:
protejat override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Numele șirului; NavigationContext.QueryString.TryGetValue ("Subiect", nume ieșire); WebClient client = nou WebClient (); client.DownloadStringCompleted + = nou DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (nou Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + nume)); void client_DownloadStringCompleted (expeditor obiect, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement povesteXml = XElement.Parse (e.Result); var stories = de la poveste în povesteXml.Descendants ("story") selectați noi Digg.Story Title = story.Element ("title"). Parsează (story.Attribute ("diggs"). Valoare), Link = story.Attribute ("link"). StoriesList.ItemsSource = povestiri;
Multe dintre acestea vor părea familiare. Singura parte care ar putea părea ciudată este preluarea numelui subiectului. Dacă vă amintiți, ați cartografiat / Subiecte / topic la /Views/Stories.xaml?Topic=topic. Adică, permiteți ca variabila șirului de interogare de subiect să fie transmisă într-un format prietenos. Când am navigat de pe lista de subiecte, am trecut numele scurt în Uri. În codul de mai sus, când lista de povestiri este în curs de navigare, vom regăsi această variabilă și o vom folosi pentru a apela adresa URL API Digg cu un anumit subiect.
Știm că dacă vom declanșa aplicația noastră în acest moment, nu vom obține acel aspect pe care îl dorim pentru lista noastră de povestiri. Să definim un alt DateTemplate pe care să îl folosim în această vizualizare. Deschide App.xaml și adăugați următorul cod la dvs. Application.Resources element.
Acum, deschide-te Vizualizări / Stories.xaml și modificați-vă ListBox element astfel:
Rulați aplicația apăsând F5 și faceți clic pe numele subiectului. Așteaptă o clipă și vei vedea că vor apărea poveștile tale. Următorul lucru pe care trebuie să-l facem este să afișăm detalii despre poveste pe pagina cu detalii.
Afișarea detaliilor despre poveste
Pentru a afișa detalii despre poveste, trebuie să lăsăm mai întâi navigarea pe pagina cu detaliile povestirii și apoi vom gestiona afișarea datelor. În lista de povestiri, avem o serie de articole de poveste. Când unul dintre ele este selectat, dorim să stocăm asta Poveste obiect undeva și apoi folosiți-l pe pagina detaliilor poveștii. Pentru a face acest lucru, vom adăuga un handler de evenimente la SelectionChanged eveniment după cum urmează:
Aici, stocați povestea selectată în PhoneApplicationService clasa lui Stat proprietate conform recomandărilor din cele mai bune practici ale modelului de execuție. Dacă aveți o linie roșie neclară sub PhoneApplicationService apoi plasați cursorul în interiorul cuvântului și apoi selectați meniul derulant care apare și alegeți "folosind Microsoft.Phone.Shell".
Acum, trebuie să recuperăm acest lucru la celălalt capăt. Deschide-ți Vizualizări / Story.xaml.cs și adăugați următorul cod care suprascrie OnNavigatedTo:
Aici, interceptați navigarea la vizualizarea detaliilor de poveste, preluați povestea stocată în PhoneApplicationService„s Stat proprietate, și apoi eliminați povestea din PhoneApplicationService„s Stat Colectie. Apoi setați DataContext pentru a vedea povestea extrasă. Aceasta este cheia, deoarece vom folosi această obligație pentru a afișa datele corespunzătoare.
Deschideți marcajele pentru vizualizarea detaliilor despre poveste Vizualizări / Story.xaml. Modificați-l pentru a utiliza legăturile după cum urmează:
Dacă lansați aplicația acum (apăsați F5), veți putea detalia lista de subiecte, lista de povestiri, detalii despre povestea completă. Afișarea detaliilor povestirii ar trebui să arate după cum urmează:
Este doar un ultim lucru de făcut. Adăugați un handler de evenimente pentru clic pe butonul Link din Vizualizări / Story.xaml după cum urmează:
Schimbați modulul de gestionare a evenimentului, Link_Click, pentru a citi următorul text:
Dacă vedeți o linie roșie neclară sub WebBrowserTask, apoi plasați cursorul peste clasă și apoi selectați "utilizând Microsoft.Phone.Tasks" din meniul derulant care apare. Acest cod lansează browserul web Windows Phone 7 când dă clic pe buton și îl navighează către adresa URL a povestirii.
Terminand
Aveți un client pe deplin funcțional, deși simplu, în acest moment. Puteți căuta povestiri pe subiecte, vizualiza detalii despre poveste și puteți vizita întreaga poveste în WP7 browser web. În acest tutorial avem:
Creat clase pentru a stoca datele Digg
Crearea și personalizarea vizualizărilor aplicațiilor utilizând designerul vizual
URI personalizate de navigare și au folosit serviciul Windows Phone 7 Navigation
Implementate DataTemplates și Stiluri pentru a afișa povești și subiecte
Depășiți instrumentele de tratare a evenimentelor OnNavigatedTo și OnNavigatedFrmo pentru a oferi funcționalitatea adecvată pentru fiecare pagină
A folosit taskurile Windows Phone 7 pentru a lansa un browser web
Unele dintre subiectele pe care le-am abordat sunt departe de a fi acoperite într-un simplu tutorial, astfel încât probabil veți dori să aflați mai multe despre ele. Următoarele resurse vă vor ajuta să începeți:
Șabloane de date
Prezentarea templului de date
Tutoriale WPF: Șabloane de date
stiluri
Tutoriale WPF: stiluri
WPF Tour Guided - Stiluri
Windows Phone 7 Programming
Ghid de programare
Noțiuni de bază
Sper că te-ai bucurat de acest tutorial. Dacă aveți întrebări sau doriți să vedeți ceva diferit într-un viitor tutorial Windows Phone 7, anunțați-ne în comentarii.
Share
Accentsconagua
