Silverlight is het belangrijkste applicatieontwikkelplatform voor Windows Phone 7. In een vorige tutorial hebben we besproken hoe u uw systeem kunt instellen voor ontwikkeling van Windows Phone 7 en vervolgens hebben we een heel eenvoudige Silverlight-toepassing die een knop rond een raster verdraaide. Dit artikel introduceert u meer geavanceerde Silverlight-functies en stelt u in staat om betekenisvolle toepassingen te ontwikkelen die gegevens op interessante en unieke manieren weergeven.
Dit artikel introduceert een aantal Windows Phone 7- en Silverlight-functies op gemiddeld niveau, waaronder toepassingsbronnen, stijlen, gegevenssjablonen en weergavavigatie. U profiteert van databinding en WP7 services waarmee u snel en eenvoudig tussen pagina's kunt navigeren. U moet vertrouwd zijn met XAML en C # voordat u aan deze zelfstudie begint.
Uw project maken
In deze zelfstudie gaat u een eenvoudige Digg-client maken waarmee een gebruiker op thema's kan bladeren. U profiteert van de Silverlight- en Windows Phone 7-functies op gemiddeld niveau, waaronder toepassingsbronnen, stijlen, gegevenssjablonen en navigatieservices. U gebruikt databinding om informatie van Digg en diverse weer te geven WP7 services om gebruikers in staat te stellen uw applicatie te omzeilen.
Zorg er om te beginnen voor dat u de nieuwste ontwikkelingshulpmiddelen voor Windows Phone 7 op uw computer hebt geïnstalleerd. De hulpprogramma's zijn bijgewerkt op 12 juli 2010, dus u moet mogelijk een eerdere CTP verwijderen en de hulpprogramma's Beta installeren.
Open Visual Studio 2010 en klik op Nieuw project in de linkerzijbalk. Selecteer in het dialoogvenster dat verschijnt, "Windows Phone Application" uit de beschikbare sjablonen en geef uw project de naam "SimpleDigg". Zorg ervoor dat de schakelaar "Create directory for solution" is aangevinkt en klik vervolgens op "OK". Uw instelling moet er als volgt uitzien:
Nadat uw project is gemaakt, opent Visual Studio MainPage.xaml voor bewerking. Sluit dit bestand voor nu.
Digg-dataklassen maken
Om toegang te krijgen tot de gegevens van Digg, gebruiken we hun officiële API. In het bijzonder gebruiken we de methoden story.getAll en topic.getAll. Voorbeeldantwoorden voor elke oproep zijn te vinden op de volgende URL's:
story.getAll
topic.getAll
Zoals je kunt zien, story.getAll geeft verhaalitems terug. Verhalen hebben veel gegevens met zich mee, maar we gaan ons richten op 4 stukjes informatie:
Titel
Omschrijving
Diggs
Link
Laten we de klasse maken om deze gegevens te bewaren. In de Solution Explorer van Visual Studio (die standaard is geopend in de rechterzijbalk), klikt u met de rechtermuisknop op uw project en kiest u "Toevoegen> Nieuwe map". Geef deze nieuwe map een naam Digg. Klik met de rechtermuisknop op uw nieuw gemaakte map en kies "Toevoegen> Klasse ...". Geef je klas een naam Verhaal en klik op de knop Toevoegen.
Visual Studio opent uw nieuwe klasse voor bewerking. Voeg binnen de klassedefinitie vier openbare eigenschappen toe, zoals de volgende:
openbare string Titel get; vast te stellen; public string Description get; vast te stellen; openbare string Link get; vast te stellen; openbare int Diggs get; vast te stellen;
Voeg nu de klasse toe die de Onderwerpgegevens bevat. Klik met de rechtermuisknop op uw Digg map opnieuw en kies "Toevoegen> Klasse ...". Geef je klas een naam Onderwerp en voeg de volgende eigenschappen toe wanneer het bestand wordt geopend:
public string Naam get; vast te stellen; openbare string ShortName get; vast te stellen;
Op dit punt hebt u alle gegevensklassen gemaakt die u nodig hebt voor deze zelfstudie en kunt u de benodigde weergaven voor de rest van de toepassing markeren..
Aanzichten maken
De SimpleDigg-client heeft drie verschillende weergaven die moeten worden gemaakt. Zij zijn:
Onderwerpslijst - Geeft een overzicht van alle onderwerpen op Digg
Verhalenlijst - Geeft een overzicht van verhalen die zijn opgehaald van Digg op basis van een bepaald onderwerp
Verhaalgegevens - Toont details over een geselecteerd verhaal
Onderwerpenlijst
De onderwerpenlijst is het eerste scherm dat gebruikers te zien krijgen wanneer ze uw toepassing starten. Het bevat een lijst met onderwerpnamen die, wanneer een van de onderwerpen wordt aangeklikt, leidt naar een lijst met onderwerpen in dat onderwerp. Omdat dit het eerste scherm is dat gebruikers zien, gebruiken we het eerder gemaakte MainPage.xaml-bestand dat al in het project bestaat. Open MainPage.xaml en u zou aan de linkerkant een visuele weergave moeten zien en de markering voor de weergave aan de rechterkant.
Klik op de tekst "Mijn toepassing" in de visuele weergave en merk op dat een TextBlock element in de XAML-weergave is gemarkeerd. Dat TextBlock heeft een Tekst attribuut momenteel bezet door de waarde "MIJN TOEPASSING." Verander die waarde in wat u maar wilt. Ik raad "Simple Digg." Aan. U ziet dat de visual designer wordt bijgewerkt om aan uw wijzigingen te voldoen.
Herhaal nu het proces met de tekenreeks "page name". Klik op de tekst, zoek de juiste TextBlock en wijzig de Tekst attribuut. Deze keer raad ik aan het te veranderen in "Onderwerpen". Als je alles goed hebt gedaan tot nu toe, zou je een StackPanel element dat twee @ TextBlock @ s bevat, elk met een geschikte waarde. De XAML ziet er als volgt uit:
Nu moet u de lijstcontainer toevoegen aan uw pagina. Open de Control Toolbox (aan de linkerkant van Visual Studio) en sleep een ListBox-item naar het grote lege gebied op uw pagina. Je moet dit aanpassen om de breedte en hoogte van de container te vergroten, dus plaats je cursor in de XAML-editor en pas het ListBox-element aan om het als volgt te lezen:
Deze opmaak verwijdert alle stijlen die de visuele ontwerper heeft geïntroduceerd en hernoemt het element zodat u toegang hebt tot de elementen daarin. Op dit punt hebt u de markup voltooid voor de weergave Lijst met onderwerpen en kunt u nu verdergaan met de andere delen van de toepassing
Verhalenlijst
De weergave van de verhalenlijst lijkt sterk op de lijst met onderwerpen. Voor organisatorische doeleinden plaatsen we deze weergave (en later de weergave Verhaalgegevens) in een aparte map. Klik met de rechtermuisknop op de naam van uw project in de Solution Explorer en kies "Toevoegen> Nieuwe map". Geef de nieuwe map een naam Keer bekeken. Klik vervolgens met de rechtermuisknop op de Keer bekeken map en kies "Toevoegen> Nieuw item ..." Selecteer de Windows Phone Portrait-pagina sjabloon en noem het Stories.xaml. Uw dialoogvenster moet er als volgt uitzien:
Wijzig de titel van de applicatie nu naar "Simple Digg" en de paginanaam naar "Stories". Sleep vervolgens een ListBox naar de lege ruimte onder je paginatitel en pas de opmaak aan om er als volgt uit te zien:
Op dit punt ziet uw weergave van de verhalenlijst er bijna identiek uit als uw lijst met onderwerpen. De echte verschillen worden weergegeven wanneer u ze opvult met gegevensitems.
Verhaal details
De laatste weergave voor uw toepassing is de weergave Verhaaldetails. In de weergave Verhaaldetails worden de vier gegevens gepresenteerd waarover we eerder hebben gesproken:
Titel
Omschrijving
Diggs
Link
Het aantal Diggs en de titel zal de bovenkant van de weergave bezetten en de beschrijving van het verhaal zal hieronder volgen. Hierna zal een link de gebruiker toestaan om naar het betreffende verhaal te navigeren als zij dat willen.
Als eerder, klik met de rechtermuisknop op de Keer bekeken map in uw project en kies Toevoegen> Nieuw item. Selecteer de Windows Phone Portrait-pagina sjabloon en geef uw nieuwe weergave een naam Story.xaml. Klik op Toevoegen en Visual Studio maakt Story.xaml en open het voor bewerking.
Wijzig de tekstblokken van de toepassingstitel en de paginatitel om respectievelijk "Eenvoudig Digg" en "Verhaal" te lezen. Sleep nu een StackPanel in de lege ruimte onder je paginatitel. Sleep een andere StackPanel naar de vorige StackPanel. Deze StackPanel bevat de titel van het verhaal en Digg-telling. U wilt dat deze items naast elkaar worden uitgelijnd, dus wijzig de oriëntering eigendom aan Horizontaal.
Sleep tot slot een TextBlock en een Knop in je eerste StackPanel. De TextBlock bevat de beschrijving van het verhaal terwijl de Knop stelt de gebruiker in staat om de bron van het verhaal te bezoeken. U moet een aantal uitgebreide modificatie van deze elementen aanbrengen en in plaats van ze één voor één te doorlopen, moet u ervoor zorgen dat uw markup er als volgt uitziet:
U kunt zien dat we het meest expliciet hebben verwijderd Hoogte en Breedte eigenschappen en gewijzigd Tekst en Naam eigenschappen om iets een beetje meer beschrijvend. Het ziet er op dit moment een beetje lelijk uit, maar dat lossen we later op. Als u alles correct hebt gemarkeerd, moet uw paneel voor visuele ontwerper er als volgt uitzien:
Op dit punt zijn de basisprincipes van alle noodzakelijke weergaven gereed. Je kunt op F5 drukken om de applicatie op te starten om te bevestigen dat alles werkt, maar je krijgt gewoon een leeg scherm met "Onderwerpen" bovenaan.
De navigatiekaartmaker aanpassen
Het volgende dat u moet doen, is ervoor zorgen dat u gebruikers rond uw toepassing kunt leiden. Om dit te doen, gebruik je Silverlight's navigatiemapping met een paar eenvoudige regels. Open je project App.xaml bestand en plaats je cursor in de opening Toepassing element en voeg als volgt een nieuwe naamruimte toe:
xmlns: nav = "clr-naamruimte: System.Windows.Navigation; assemblage = Microsoft.Phone"
Dit verwijst naar de Windows System Navigation-naamruimte (een Silverlight-functie) en stelt u in staat de verschillende bibliotheekklassen te gebruiken die er in zitten. Zoek nu het Application.Resources element in App.xaml en voeg de volgende elementen toe:
De code die u zojuist hebt ingevoerd, maakt een verscheidenheid aan URI-toewijzingen voor de weergaven in uw toepassing. Ze komen respectievelijk overeen met de lijst met onderwerpen, de verhalenlijst en de detailweergave van het verhaal. Zoals u kunt zien, kunt u in Silverlight-navigatiekarakteristieken queryvariabelen definiëren binnen uw aangepaste toewijzingen. Dit zal later van pas komen als we daadwerkelijk gegevens gaan invullen.
U bent echter nog niet klaar met URI-kaarten. U moet uw toepassing hiervan op de hoogte stellen UriMapper, open dus de App.xaml code achter door op de pijl naast te klikken App.xaml en openen App.xaml.cs. Binnenkant van de App methode na de oproep naar InitializePhoneApplication () voeg de volgende verklaring toe:
RootFrame.UriMapper = Resources ["UriMapper"] als UriMapper;
Deze verklaring vertelt uw toepassing om de UriMapper te gebruiken die u zojuist hebt gedefinieerd XAML voor je telefoonapp. Laten we beginnen met het invullen van enkele gegevens.
De onderwerpenlijst invullen
Het eerste dat we moeten doen is de lijst met onderwerpen invullen. We doen dit wanneer de gebruiker voor het eerst naar de .navigeert MainPage.xaml pagina. Om ervoor te zorgen dat dit gebeurt, overschrijft u de OnNavigatedTo methode voor de Hoofdpagina klasse. Open MainPage.xaml.cs door op de pijl naast te klikken MainPage.xaml. Plaats je cursor achter de constructor en voeg de volgende code toe:
beschermde override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = nieuwe WebClient (); digg.DownloadStringCompleted + = nieuwe DownloadStringCompletedEventHandler (digg_DownloadStringCompleted); digg.DownloadStringAsync (nieuwe Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (object afzender, DownloadStringCompletedEventArgs e)
Je kunt dat binnenin de OnNavigatedTo methode die u maakt Web cliënt object, wijs het een gebeurtenishandler toe voor wanneer een tekenreeks wordt gedownload en geef deze opdracht om de tekenreeks van de Digg te downloaden topic.getAll methode-URL. We weten dat de te downloaden string in XML-indeling zal zijn, dus we moeten ervoor zorgen dat onze gebeurtenishandler de XML kan ontleden. Voor dit doel zullen we de Linq-bibliotheken gebruiken die beschikbaar zijn in het .NET-framework. Voordat we die bibliotheekklassen kunnen gebruiken, moeten we echter een verwijzing naar de bibliotheek toevoegen. Klik met de rechtermuisknop op het item "Verwijzingen" in het deelvenster Solution Explorer en kies "Referentie toevoegen ...". Selecteer in de lijst die wordt weergegeven, System.Xml.Linq en klik op "OK".
Nu hoeft u alleen de gebeurtenishandler in te vullen die u hebt gemaakt. Verandering digg_DownloadStringCompleted dus het ziet eruit als het volgende:
void digg_DownloadStringCompleted (object afzender, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); var topics = from topic in topicXml.Descendants ("topic") selecteer new Topic Name = topic.Attribute ("name"). Value, ShortName = topic.Attribute ("short_name"). Waarde; TopicsList.ItemsSource = onderwerpen;
Eerst controleert u of de download succesvol is voltooid. Als dat zo was, parseerde u de resulterende tekenreeks en genereerde u een verzameling onderwerpen met Linq to XML. Als u geïnteresseerd bent, kunt u meer lezen over Linq naar XML op de officiële MSDN-site.
Tot slot wijst u de ItemsSource eigendom van de TopicsList naar de onderwerpen die je hebt geparseerd. Als je een kronkelige regel ziet onder Onderwerp, plaats je de cursor ernaast, klik je op de pijl die onder het woord verschijnt en selecteer je "using SimpleDigg.Digg". Op dit punt heb je je onderwerpen ingevuld, dus activeer je telefoonemulator door op F5 te drukken. Je ziet dan ongeveer het volgende:
Zoals u kunt zien, is uw lijst gevuld maar de juiste gegevens worden niet weergegeven. Laten we daar nu voor zorgen.
Gegevenssjablonen
Datasjabloon is een van de krachtigste tools in uw Silverlight-toolkit. Hiermee kunt u de markeringen definiëren die voor willekeurige objecten moeten worden weergegeven. Op dit punt zullen we DataTemplates definiëren voor Digg Topics and Stories. Open App.xaml en plaats je cursor in de Application.Resources element. Voeg het volgende element toe:
Deze DataTemplate-aanbieding bevat een eenvoudige TextBlock element dat is gebonden aan de Naam eigenschap van het object dat wordt weergegeven. Als je het onthoudt, de Digg.Topic klasse bevat een Naam eigenschap die is ingesteld op de naam kenmerk terug van de API-aanroep Digg-onderwerpen. Keer terug naar jouw MainPage.xaml en vind de Keuzelijst element. Voeg een nieuwe eigenschap toe ItemTemplate naar de Keuzelijst als volgt:
ItemTemplate = "StaticResource TopicTemplate"
Deze regel code geeft de toepassing opdracht om uw eerder gemaakte code te gebruiken DataTemplate resource om de onderwerpobjecten weer te geven waaruit de Keuzelijstde verzameling. Als u op F5 drukt en uw toepassing uitvoert, ziet u dat de onderwerpnamen nu correct worden weergegeven:
Ophalen en weergeven van verhalen
Op dit moment zijn we klaar om verhalen per onderwerp op te halen en ze op te sommen. Ten eerste moeten we de toepassing laten weten dat wanneer een onderwerpstitel wordt aangeroepen, de toepassing naar de verhalenlijst moet navigeren. Open MainPage.xaml en vind jouw Keuzelijst element. Voeg de toe SelectionChanged property en Visual Studio toestaan om een nieuwe gebeurtenishandler te maken. In MainPage.xaml.cs, verander je event handler, zodat het iets als het volgende leest:
Als u uw toepassing nu uitvoert (door op F5 te drukken), kunt u zien dat u naar de pagina Verhalen navigeert wanneer u een onderwerp selecteert. Nu moeten we gewoon de verhalenlijst vullen en ze op de juiste manier weergeven. Zoals we eerder deden, gaan we de OnNavigatedTo methode om dat te laten gebeuren. Open Views / Stories.xaml.cs en voeg de volgende code toe:
beschermde override void OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); String naam; NavigationContext.QueryString.TryGetValue ("Onderwerp", naam uit); WebClient-client = nieuwe WebClient (); client.DownloadStringCompleted + = nieuwe DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (nieuwe Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + name)); void client_DownloadStringCompleted (object afzender, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement storyXml = XElement.Parse (e.Result); var stories = from story in storyXml.Descendants ("story") selecteer een nieuwe Digg.Story Title = story.Element ("title"). Waarde, Beschrijving = story.Element ("description"). Waarde, Diggs = Int32. Parseren (story.Attribute ("diggs"). Value), Link = story.Attribute ("link"). Waarde; StoriesList.ItemsSource = verhalen;
Veel hiervan zal bekend voorkomen. Het enige deel dat er vreemd uit kan zien, is het ophalen van de onderwerpnaam. Als je je herinnert, heb je je in kaart gebracht / Onderwerpen / onderwerp naar /Views/Stories.xaml?Topic=topic. Dat wil zeggen, u staat toe dat de Topic-querystringvariabele in een vriendelijke indeling wordt doorgegeven. Toen we vanuit de onderwerpenlijst navigeerden, hebben we de korte naam van het onderwerp in de relatieve Uri doorgegeven. In de bovenstaande code halen we bij het ophalen van de verhalenlijst deze variabele op en gebruiken we deze om de URL van de Digg API te bellen met een specifiek onderwerp.
We weten dat als we onze aanvraag op dit punt starten, we niet het uiterlijk krijgen dat we willen voor onze lijst met verhalen. Laten we een andere DataTemplate definiëren om in deze weergave te gebruiken. Doe open App.xaml en voeg de volgende code toe aan uw Application.Resources element.
Nu, open Views / Stories.xaml en wijzig uw Keuzelijst element zodat het als volgt luidt:
Start uw toepassing door op F5 te drukken en klik op de naam van een onderwerp. Wacht even en je zult je verhalen zien verschijnen. Het volgende dat we moeten doen is verhaaldetails op de detailpagina weergeven.
Verhaaldetails weergeven
Om de details van het verhaal weer te geven, moeten we eerst de navigatie naar de detailpagina van het verhaal toestaan en dan zullen we omgaan met het weergeven van gegevens. In de verhalenlijst hebben we een aantal verhaalitems. Wanneer een van hen is geselecteerd, willen we dat opslaan Verhaal object ergens en gebruik het dan op de pagina met verhaaldetails. Om dit te doen, zullen we een gebeurtenishandler toevoegen aan de SelectionChanged evenement als volgt:
Hier bewaart u het geselecteerde verhaal in de PhoneApplicationService klasse Staat eigendom zoals aanbevolen door de best practices van het uitvoeringsmodel. Als je een rode kronkelige streep eronder hebt PhoneApplicationService plaats dan je cursor in het woord en selecteer vervolgens de vervolgkeuzelijst die verschijnt en kies "using Microsoft.Phone.Shell".
Nu moeten we dit aan de andere kant ophalen. Open je Views / Story.xaml.cs en voeg de volgende code toe die overschrijft OnNavigatedTo:
Hier onderschept u de navigatie naar de detailweergave van het verhaal en haalt u het verhaal op dat is opgeslagen in de PhoneApplicationService's Staat property en verwijder vervolgens het verhaal uit de PhoneApplicationService's Staat verzameling. U stelt vervolgens de DataContext voor het uitzicht op het verhaal opgehaald. Dit is belangrijk, omdat we deze binding gebruiken om de juiste gegevens weer te geven.
Open uw markup voor weergave van de verhaaldetails in Views / Story.xaml. Pas het aan om bindingen als volgt te gebruiken:
Als u uw toepassing nu start (druk op F5), kunt u een drill-down maken van de lijst met onderwerpen, de lijst met verhalen en details van het volledige verhaal. De weergave met verhaaldetails moet er ongeveer als volgt uitzien:
Er is maar één laatste ding om te doen. Voeg een klikgebeurtenishandler toe aan de linkknop in Views / Story.xaml als volgt:
Wijzig je gebeurtenishandler, Link_Click, om als volgt te lezen:
Als je een rode kronkelige lijn ziet onder WebBrowserTask, plaats dan je cursor op de klasse en selecteer vervolgens "using Microsoft.Phone.Tasks" in de vervolgkeuzelijst die verschijnt. Deze code start de Windows Phone 7-webbrowser wanneer op de knop wordt geklikt en navigeert naar de URL van het verhaal.
Afronden
Je hebt op dit moment een volledig functionerende, hoewel eenvoudige, Digg-client. U kunt bladeren door onderwerpen op onderwerpen, verhaaldetails bekijken en het volledige verhaal in de WP7 webbrowser. In deze tutorial hebben we:
Creëerde klassen om Digg-gegevens op te slaan
Creëerde en aangepaste toepassingsaanzichten met behulp van de visuele ontwerper
Aangepaste navigatie-URI's en gebruikte de Windows Phone 7 Navigation-service
DataTemplates en stijlen geïmplementeerd om verhalen en onderwerpen weer te geven
De gebeurtenis-handlers OnnavigatedTo en OnNavigatedFrmo werden overschreven om de juiste functionaliteit voor elke pagina te bieden
Gebruikte de Windows Phone 7-taken om een webbrowser te starten
Sommige van de onderwerpen die we hebben behandeld, zijn veel te diepgaand om te behandelen in een eenvoudige tutorial, dus je zult waarschijnlijk meer willen weten over hen. De volgende bronnen kunnen u helpen aan de slag te gaan:
Gegevenssjablonen
Data Templating Overzicht
WPF-handleidingen: gegevenssjablonen
stijlen
WPF-zelfstudies: stijlen
WPF-rondleiding met gids - Stijlen
Windows Phone 7-programmering
Programmeerhandleiding
Ermee beginnen
Ik hoop dat je deze tutorial leuk vond. Als u vragen hebt of iets anders wilt zien in een toekomstige Windows Phone 7-zelfstudie, kunt u me dit laten weten in de opmerkingen.
Share
Accentsconagua
