Silverlight är den huvudsakliga applikationsutvecklingsplattformen för Windows Phone 7. I en tidigare handledning täckte vi hur du får ditt system att fungera för Windows Phone 7-utveckling och då utvecklade vi en mycket enkel Silverlight applikation som roterade en knapp runt ett rutnät. Denna artikel kommer att introducera dig till mer avancerade Silverlight-funktioner och låter dig utveckla meningsfulla applikationer som visar data på intressanta och unika sätt.
Denna artikel kommer att introducera dig till ett antal Windows Phone 7 och Silverlight-funktioner på mellannivå, inklusive programresurser, stilar, datamallar och visning av navigering. Du kommer att dra nytta av data bindande och WP7 tjänster som gör att du snabbt och enkelt kan navigera mellan sidor. Du borde ha kännedom om XAML och C # innan du börjar denna handledning.
Skapa ditt projekt
I den här handledningen kommer du att skapa en enkel Digg-klient som låter en användare bläddra i historier efter ämne. Du kommer att dra nytta av Silverlight och Windows Phone 7-funktioner på mellannivå, inklusive programresurser, stilar, datamallar och navigeringstjänster. Du använder databindning för att visa information från Digg och olika WP7 tjänster för att tillåta användare att komma runt din ansökan.
För att komma igång, se till att du har de senaste utvecklingsverktygen för Windows Phone 7 installerade på din dator. Verktygen uppdaterades den 12 juli 2010, så du kan behöva avinstallera en tidigare CTP och installera verktygen Beta.
Öppna Visual Studio 2010 och klicka på Nytt projekt i vänster sidofält. I dialogrutan som dyker upp väljer du "Windows Phone Application" från de tillgängliga mallarna och ger ditt projekt ett namn som "SimpleDigg." Kontrollera att "Create Directory for Solution" växlar är markerad och klicka sedan på "OK". Din inställning ska se ut som följande:
När ditt projekt har skapats öppnar Visual Studio MainPage.xaml för redigering. Stäng den här filen för nu.
Skapa Digg Data Classes
För att komma åt Diggs data använder vi deras officiella API. I synnerhet kommer vi att använda story.getAll och topic.getAll metoder. Exempel på svar på varje samtal finns på följande webbadresser:
story.getAll
topic.getAll
Som du kan se, story.getAll returnerar historia. Berättelser har mycket data förknippade med dem, men vi kommer att fokusera på 4 delar av informationen:
Titel
Beskrivning
Diggs
Länk
Låt oss skapa klassen för att hålla denna data. I Visual Studio Solution Explorer (som är öppen som standard i den högra sidofältet) högerklickar du på ditt projekt och väljer "Lägg till> Ny mapp". Namnge den här nya mappen Digg. Högerklicka på din nyskapade mapp och välj "Lägg till> Klass ...". Namnge din klass Berättelse och klicka på knappen Lägg till.
Visual Studio öppnar din nya klass för redigering. Inne i klassdefinitionen läggs till fyra offentliga egenskaper som följande:
allmän sträng Titel get; uppsättning; allmän sträng Beskrivning get; uppsättning; public string Link get; uppsättning; public int Diggs get; uppsättning;
Lägg nu till den klass som håller ämnesdata. Högerklicka på din Digg mappen igen och välj "Lägg till> Klass ...". Namnge din klass Ämne och lägg till följande egenskaper när filen öppnas:
offentlig sträng Namn get; uppsättning; allmän sträng ShortName get; uppsättning;
Vid denna tidpunkt har du skapat alla dataklasser du behöver för denna handledning och är redo att markera de visningar som behövs för resten av programmet.
Skapa visningar
SimpleDigg-klienten har tre olika vyer som måste skapas. Dom är:
Ämneslista - listar alla ämnen på Digg
Story List - listar historier som hämtats från Digg baserat på ett visst ämne
Story Detail - Visar detaljer om en vald historia
Ämneslista
Topic List är den första skärmen som användare ser när de startar din applikation. Den innehåller en lista över ämnesnamn som, när ett av ämnena klickas, leder till en lista över historier i det ämnet. Eftersom det här blir den första skärmen som användarna ser, går vi vidare och använder den tidigare skapade MainPage.xaml-filen som redan finns i projektet. Öppna MainPage.xaml och du ska se en visuell representation till vänster och markeringen för vyn till höger.
Klicka på texten "Min ansökan" i den visuella representationen och märka att a Textblock element i XAML-representationen är markerad. Den där Textblock har en Text attribut som för närvarande upptas av värdet "MY APPLICATION." Ändra det värdet till vad du vill. Jag rekommenderar "Simple Digg." Du ser att de visuella designeruppdateringarna matchar dina ändringar.
Repetera nu processen med "sidnamn" -strängen. Klicka på texten, hitta rätt Textblock och modifiera Text attribut. Den här gången rekommenderar jag att du ändrar den till "Ämnen". Om du har gjort allt rätt till denna punkt borde du ha en Stack element som innehåller två @ TextBlock @ s, var och en med ett lämpligt värde. XAML ser ut som följande:
Nu måste du lägga till listbehållaren på din sida. Öppna kontrollverktygslådan (till vänster om Visual Studio) och dra ett ListBox-objekt i det stora tomma området på din sida. Du måste ändra det för att sträcka bredden och höjden på behållaren. Placera markören i XAML-redigeraren och ändra ListBox-elementet så att det läser som följande:
Denna markering tar bort all stil som den visuella designern introducerar och byter namn på elementet så att du kan komma åt element i den. Vid den här tiden har du slutfört markeringen för ämneslistan och kan nu gå vidare till andra delar av programmet
Story List
Historiklistan är mycket lik ämnelistan. För organisatoriska ändamål kommer vi att lägga den här vyn (och senare, Story Detail view) inuti en separat mapp. Högerklicka på ditt projekt namn i Solution Explorer och välj "Lägg till> Ny mapp." Namn på den nya mappen Visningar. Högerklicka sedan på Visningar mapp och välj "Lägg till> Nytt föremål ..." Välj den Windows Phone Portrait Page mall och namnge den Stories.xaml. Din dialogruta ska se ut som följer:
Ändra, som tidigare, ansökningstiteln till "Simple Digg" och sidnamnet till "Stories." Dra sedan en ListBox på tomtutrymmet under din sidtitel och ändra dess uppställning så att den ser ut som följande:
Vid denna tidpunkt ser din listningslista nästan ut som din ämneslista. De verkliga skillnaderna kommer att dyka upp när du fyller dem med dataposter.
Story Detaljer
Den slutgiltiga vyn för din ansökan är Story Details-vyn. Story Details-vyn kommer att presentera de 4 datatyper som vi pratade om tidigare:
Titel
Beskrivning
Diggs
Länk
Antalet Diggs och titlar kommer att uppta toppen av vyn och berättelsen beskrivs nedan. Efter det kommer en länk att låta användaren navigera till berättelsen ifråga om de önskar.
Som tidigare högerklickar du på Visningar mapp i ditt projekt och välj Lägg till> Nytt föremål. Välj Windows Phone Portrait Page mall och namnge din nya vy Story.xaml. Klicka på Lägg till och Visual Studio kommer att skapa Story.xaml och öppna den för redigering.
Ändra programmets titel och sidtextrubrik för att läsa "Simple Digg" respektive "Story". Dra nu a Stack in i tomtutrymmet under din sidtitel. Dra en annan Stack in i det föregående Stack. Detta Stack kommer att innehålla berättelsen titel och Digg räkna. Du vill att dessa objekt ska anpassas bredvid varandra, så ändra Orientering egendom till Horisontell.
Slutligen dra a Textblock och a Knapp in i din första Stack. De Textblock kommer att innehålla berättelsen beskrivning medan Knapp kommer att tillåta användaren att besöka historikällan. Du kommer att behöva göra en viss omfattande egenskapsändring till dessa element, och istället för att köra igenom dem en efter en, bara se till att din markering ser ut som följande:
Du kan se att vi har tagit bort mest explicit Höjd och Bredd egenskaper och ändrade Text och namn egenskaper till något lite mer beskrivande. Det ser lite grymt just nu, men vi fixar det senare. Om du har allt markerat korrekt måste din visuella designpanel se ut som följande:
Vid denna tidpunkt görs grunderna för alla nödvändiga synpunkter. Du kan slå F5 för att skjuta upp programmet för att bekräfta att allt fungerar, men du får bara en blank skärm med "Topics" överst.
Anpassa navigationsmappen
Nästa sak du behöver göra är att se till att du kan rikta användare runt din ansökan. För att göra så använder du Silverlights navigeringskartläggning med några enkla regler. Öppna ditt projekt App.xaml fil och placera markören inuti öppningen Ansökan element och lägg till en ny namnrymd enligt följande:
xmlns: nav = "clr-namespace: System.Windows.Navigation, montering = Microsoft.Phone"
Detta refererar till Windows System Navigation namespace (en Silverlight-funktion) och låter dig använda de olika biblioteksklasserna som finns inom den. Hitta nu Application.Resources element i App.xaml och lägg till följande element:
Koden du just angett skapar en mängd olika URI-mappings för synpunkterna i din ansökan. De överensstämmer med ämneslistan, historiklistan respektive historikdetaljvy. Som du kan se kan Silverlight navigeringskartläggning du definiera sökvariabler inuti dina anpassade mappings. Detta kommer att vara till nytta senare när vi går för att faktiskt fylla i data.
Du är inte klar med URI-kartläggning. Du måste berätta för din ansökan att använda detta UriMapper, så öppna App.xaml koden bakom genom att klicka på pilen bredvid App.xaml och öppning App.xaml.cs. Inne i App metod efter samtalet till InitializePhoneApplication () lägg till följande uttalande:
RootFrame.UriMapper = Resurser ["UriMapper"] som UriMapper;
Detta uttalande berättar för din ansökan att använda den UriMapper du just definierat i XAML för din telefonapp. Nu börjar vi fylla i vissa data.
Populera ämneslistan
Det första vi behöver göra är att fylla i ämneslistan. Vi gör det här när användaren först navigerar till MainPage.xaml sida. För att säkerställa att detta händer, kommer du att åsidosätta OnNavigatedTo metod för Huvudsida klass. Öppna MainPage.xaml.cs genom att klicka på pilen bredvid MainPage.xaml. Placera markören efter konstruktören och lägg till följande kod:
skyddad åsidosättningsfel OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = ny WebClient (); digg.DownloadStringCompleted + = ny DownloadStringCompletedEventHandler (digg_DownloadStringCompleted); digg.DownloadStringAsync (nya Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (objekt avsändare, DownloadStringCompletedEventArgs e)
Du kan se det inuti OnNavigatedTo metod du skapar en WebClient objekt, tilldela det en händelsehanterare för när en sträng hämtas och instruera den att hämta strängen från Digg topic.getAll metodadress. Vi vet att strängen som ska hämtas kommer att vara i XML-format, så vi måste se till att vår händelsehanterare kan analysera XML. För detta ändamål använder vi Linq-biblioteken som finns tillgängliga i .NET-ramverket. Innan vi kan använda de här biblioteksklasserna måste vi dock lägga till en referens till biblioteket. Högerklicka på objektet "Referenser" i din lösning Explorer Explorer och välj "Lägg till referens ..." Från listan som dyker upp väljer du System.Xml.Linq och klicka på "OK".
Nu behöver du bara fylla i händelsehanteraren som du skapade. Byta digg_DownloadStringCompleted så det ser ut som följande:
void digg_DownloadStringCompleted (objekt avsändare, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); var topics = från ämnet i topicXml.Descendants ("topic") välj nytt ämne Name = topic.Attribute ("name"). Värde, ShortName = topic.Attribute ("short_name"). Värde; ÄmnenLista.ItemsSource = Ämnen;
Först kontrollerar du om nedladdningen var klar. Om det var så analyserar du den resulterande strängen och genererar en samling ämnen genom att använda Linq till XML. Om du är intresserad kan du läsa mer om Linq till XML på den officiella MSDN-webbplatsen.
Slutligen tilldelar du ItemsSource egenskapen hos TopicsList till de ämnen du analyserade. Om du ser en spetsig linje under ämnet, placera du markören efter det, klicka på nedåtpilen som visas under ordet och välj "med SimpleDigg.Digg". Vid den här tiden har du dina ämnen befolkade så skjuter upp din telefonsemulator genom att trycka på F5 och du borde se något som följande:
Som du kan se har din lista blivit befolad men de korrekta uppgifterna visas inte. Låt oss ta hand om det nu.
Dataskärmar
Datamall är ett av de kraftfullaste verktygen i din Silverlight-verktygssats. De låter dig definiera markeringen som ska visas för godtyckliga objekt. Vid denna tidpunkt definierar vi DataTemplates för Digg-ämnen och berättelser. Öppna App.xaml och placera markören inuti Application.Resources element. Lägg till följande element:
Detta DataTemplate tillhandahåller innehåller en enkel Textblock element som är bunden till namn egenskapen hos objektet som visas. Om du kommer ihåg det Digg.Topic klassen innehåller a namn egendom som är inställd på namn attribut returnerat från API-samtalet för Digg-ämnen. Återgå till din MainPage.xaml och hitta ListBox element. Lägg till en ny egendom ItemTemplate till ListBox som följer:
ItemTemplate = "StaticResource TopicTemplate"
Den här koden anger att programmet ska använda din tidigare skapade DataTemplate resurs för att visa ämnesobjekten som utgör ListBoxs samling. Om du trycker på F5 och kör din ansökan ser du att ämnesnamn visas korrekt nu:
Hämtar och visar historier
Vid denna tidpunkt är vi redo att börja hämta historier per ämne och lista dem. Först måste vi berätta för ansökan att när en ämnesrubrik tappas ska applikationen navigera till historiklistan. Öppna MainPage.xaml och hitta din ListBox element. Lägg till SelectionChanged egenskap och låta Visual Studio skapa en ny händelsehanterare. I MainPage.xaml.cs, ändra din händelsehanterare så att den läser något som följande:
privat tomt ÄmnenLista_SelectionChanged (objekt avsändare, SelectionChangedEventArgs e) Ämne ämne = ÄmnenLista.SelectedItem som ämne; NavigationService.Navigate (new Uri ("/ Topics /" + topic.ShortName, UriKind.Relative));
Om du kör din ansökan nu (genom att trycka på F5) kan du se att du navigerar till sidan Stories när du väljer ett ämne. Nu behöver vi bara fylla i historiklistan och få dem att visas på rätt sätt. Som vi gjorde tidigare kommer vi att åsidosätta OnNavigatedTo metod för att få det att hända. Öppna Visningar / Stories.xaml.cs och lägg till följande kod:
skyddad åsidosättningsfel OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Strängnamn; NavigationContext.QueryString.TryGetValue ("Ämne", ut namn); WebClient client = new WebClient (); client.DownloadStringCompleted + = ny DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (nya Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + namn)); void client_DownloadStringCompleted (objekt avsändare, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement storyXml = XElement.Parse (e.Result); var historier = från historien i storyXml.Descendants ("story") välj ny Digg.Story Title = story.Element ("title"). Värde, Beskrivning = story.Element ("description"). Värde, Diggs = Int32. Parse (story.Attribute ("diggs"). Värde), Länk = story.Attribute ("link"). Värde; StoriesList.ItemsSource = historier;
Mycket av detta kommer att se bekant. Den enda delen som kan se udda är att hämta ämnesnamnet. Om du kommer ihåg du mappade / Ämnen / ämne till /Views/Stories.xaml?Topic=topic. Det innebär att du tillåter att ämnesvariabeln för ämnesfrågor skickas i ett vänligt format. När vi navigerade från ämneslistan passerade vi ämnesnamnet i den relativa Uri. I koden ovan, när historiklistan navigeras till, hämtar vi den här variabeln och använder den för att ringa Digg API-webbadressen med ett specifikt ämne.
Vi vet att om vi skjuter upp vår ansökan vid denna tidpunkt kommer vi inte att få den typ av utseende vi vill ha för vår historia notering. Låt oss definiera ett annat DataTemplate att använda i den här vyn. Öppna App.xaml och lägg till följande kod till din Application.Resources element.
Nu, öppna upp Visningar / Stories.xaml och ändra din ListBox element så det lyder som följer:
Kör din ansökan genom att trycka på F5 och klicka på ett ämnesnamn. Vänta ett ögonblick, så får du se dina historier visas. Nästa sak vi behöver göra är att visa historia detaljer på detaljsidan.
Visar historia detaljer
För att visa historia detaljer måste vi först tillåta navigering till detaljeringssidan för historia och vi hanterar sedan visning av data. I berättarlistan har vi ett antal historia. När en av dem väljs, vill vi lagra det Berättelse objekt någonstans och använd sedan den på sidan historia detaljer. För att göra så lägger vi till en händelsehanterare i SelectionChanged händelse enligt följande:
Här lagrar du den markerade historien i PhoneApplicationService klassens stat egendom som rekommenderas av exekveringsmodellens bästa praxis. Om du har en röd squiggly linje under PhoneApplicationService Placera sedan markören inuti ordet och välj sedan rullgardinsmenyn som visas och välj "med Microsoft.Phone.Shell".
Nu måste vi hämta det i andra änden. Öppna din Visningar / Story.xaml.cs och lägg till följande kod som strider mot OnNavigatedTo:
skyddad åsidosättningsfel OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Digg.Story story = PhoneApplicationService.Current.State ["Story"] som Digg.Story; this.DataContext = story;
Här avlyssnar du navigeringen till detaljinformationens historia, hämtar historien som lagrats i PhoneApplicationService's stat egendom, och ta sedan bort historien från PhoneApplicationService's stat samling. Du ställer sedan in DataContext för utsikten till historien som hämtats. Det här är nyckeln, eftersom vi använder den här bindningen för att visa lämpliga data.
Öppna din markering för visning av historikens detaljer i Visningar / Story.xaml. Ändra det för att använda bindningar enligt följande:
Om du startar din ansökan nu (tryck på F5) kommer du att kunna borra ner från ämneslistan, till berättarlistan, till fullständiga historia detaljer. Historikens detaljeringsvy ska se ut som följande:
Det finns bara en sista sak att göra. Lägg till en händelsehanterare för klick på länkknappen i Visningar / Story.xaml som följer:
Ändra din händelsehanterare, Link_Click, att läsa som följande:
Om du ser en röd squiggly linje under WebBrowserTask, Placera markören över klassen och välj sedan "med Microsoft.Phone.Tasks" i rullgardinsmenyn som visas. Den här koden startar webbläsaren Windows Phone 7 när du klickar på knappen och navigerar den till historiens webbadress.
Efterbehandling
Du har en fungerande, om än enkel Digg-klient vid denna tidpunkt. Du kan bläddra i historier genom ämnen, visa historia detaljer och besöka hela historien i WP7 webbläsare. I denna handledning har vi:
Skapade klasser för att lagra Digg-data
Skapat och anpassade applikationsvyer med hjälp av den visuella designern
Anpassade navigations-URI-enheter och använde Windows Phone 7 Navigation-tjänsten
Implementerade DataTemplates och Styles för att visa historier och ämnen
Överrätta OnNavigatedTo och OnNavigatedFrmo händelsehanterare för att tillhandahålla lämplig funktionalitet för varje sida
Användade Windows Phone 7-uppgifterna för att starta en webbläsare
Några av de ämnen vi täckte är långt för djupgående för att täcka i en enkel handledning så att du säkert vill veta mer om dem. Följande resurser ska hjälpa dig att komma igång:
Dataskärmar
Data Templating Översikt
WPF-handledning: Dataskärmar
Styles
WPF-handledning: Styles
WPF guidad tur - stilar
Windows Phone 7 Programmering
Programmeringsguide
Komma igång
Jag hoppas att du har haft den här handledningen. Om du har några frågor eller vill se något annorlunda i en framtida Windows Phone 7-handledning, låt mig veta i kommentarerna.
Share
Accentsconagua
