Silverlight er den viktigste applikasjonsutviklingsplattformen for Windows Phone 7. I en tidligere opplæring dekket vi hvordan du skal få systemet opprettet for Windows Phone 7-utvikling, og da utviklet vi en veldig Enkel Silverlight-applikasjon som roterte en knapp rundt et rutenett. Denne artikkelen vil introdusere deg til mer avanserte Silverlight-funksjoner og vil gjøre det mulig for deg å utvikle meningsfulle applikasjoner som viser data på interessante og unike måter.
Denne artikkelen vil introdusere deg til en rekke mellomstore Windows Phone 7 og Silverlight-funksjoner, inkludert applikasjonsressurser, stiler, dataskjermer og visning av navigasjon. Du vil dra nytte av data bindende og WP7 tjenester som lar deg navigere mellom sider raskt og enkelt. Du bør ha litt kjent XAML og C # før du begynner denne opplæringen.
Opprette prosjektet ditt
I denne opplæringen skal du lage en enkel Digg-klient som lar en bruker bla gjennom historier etter emne. Du vil dra nytte av Silverlight og Windows Phone 7-funksjoner på mellomnivå, inkludert programressurser, stiler, datasjabloner og navigasjonstjenester. Du bruker datainnbinding til å vise informasjon fra Digg og diverse WP7 tjenester for å tillate brukere å komme seg rundt søknaden din.
For å komme i gang, sørg for at du har de nyeste utviklingsverktøyene for Windows Phone 7 installert på datamaskinen. Verktøyene ble oppdatert 12. juli 2010, så du må kanskje avinstallere en tidligere CTP og installere verktøyene Beta.
Åpne Visual Studio 2010 og klikk på Nytt prosjekt i venstre sidefelt. I dialogboksen som dukker opp, velg "Windows Phone Application" fra de tilgjengelige malene og gi prosjektet et navn som "SimpleDigg." Kontroller at "Opprett katalog for løsning" -bryter er merket og klikk deretter "OK". Innstillingen bør se ut som følgende:
Etter at prosjektet ditt er opprettet, åpner Visual Studio MainPage.xaml for redigering. Lukk denne filen for nå.
Opprette Digg Dataklasser
For å få tilgang til Diggs data, bruker vi deres offisielle API. Spesielt vil vi bruke story.getAll og topic.getAlle metoder. Eksempel på svar for hver samtale finner du på følgende nettadresser:
story.getAll
topic.getAll
Som du kan se, story.getAll returnerer historien. Historier har mye data knyttet til dem, men vi skal fokusere på 4 opplysninger:
Tittel
Beskrivelse
Diggs
link
La oss lage klassen for å holde disse dataene. I Visual Studio Solution Explorer (som er åpen som standard i høyre sidefelt), høyreklikk på prosjektet ditt og velg "Legg til> Ny mappe". Gi denne nye mappen navnet Digg. Høyreklikk på den nylig opprettede mappen din og velg "Legg til> Klasse ...". Gi klassen din navn Historie og klikk på Legg til-knappen.
Visual Studio åpner den nye klassen for redigering. Inne i klassen definisjon legge til fire offentlige egenskaper som følgende:
offentlig streng Tittel get; sett; offentlig streng Beskrivelse get; sett; offentlig streng Link get; sett; offentlige int Diggs get; sett;
Nå legger du til klassen som vil holde Emne-data. Høyreklikk på din Digg mappe igjen og velg "Legg til> Klasse ...". Gi klassen din navn Emne og legg til følgende egenskaper når filen åpnes:
offentlig streng Navn get; sett; offentlig streng ShortName get; sett;
På dette tidspunktet har du opprettet alle dataklassene du trenger for denne opplæringen, og er klare til å markere visningen som trengs for resten av programmet.
Opprette visninger
SimpleDigg-klienten har tre forskjellige visninger som må opprettes. De er:
Emneliste - Viser alle emner på Digg
Story List - Viser historier hentet fra Digg basert på et bestemt emne
Story Detail - Viser detaljer om en valgt historie
Emner Liste
Emnelisten blir den første skjermen som brukerne ser når de starter programmet. Den består av en liste over emnenavn som, når et av emnet klikkes, fører til en liste over historier i det emnet. Siden dette blir den første skjermen som brukerne ser, vil vi fortsette og bruke den tidligere opprettede MainPage.xaml-filen som allerede finnes i prosjektet. Åpne MainPage.xaml, og du bør se en visuell representasjon til venstre og markeringen for visningen til høyre.
Klikk på teksten "Min søknad" i den visuelle representasjonen og legg merke til at a TextBlock element i XAML-representasjonen er uthevet. At TextBlock har en Tekst attributt for tiden okkupert av verdien "MY APPLICATION." Endre den verdien til hva du vil. Jeg anbefaler "Simple Digg." Du vil se at de visuelle designoppdateringene samsvarer med endringene dine.
Nå, gjenta prosessen med "sidenavn" -strengen. Klikk på teksten, finn passende TextBlock og endre Tekst Egenskap. Denne gangen anbefaler jeg å bytte den til "Emner". Hvis du har gjort alt riktig opp til dette punktet, bør du ha en StackPanel element som inneholder to @ TextBlock @ s, hver med en passende verdi. XAML ser ut som følgende:
Nå må du legge til listebeholderen på siden din. Åpne Control Toolbox (plassert til venstre for Visual Studio), og dra et ListBox-element inn i det store blanke området på siden din. Du må endre den for å strekke bredden og høyden på beholderen. Sett så markøren i XAML-editoren og modifiser ListBox-elementet for å lese som:
Denne markeringen fjerner all stilingen som den visuelle designeren introduserte og omdøper elementet slik at du kan få tilgang til elementer i den. På dette tidspunktet har du fullført markeringen for emnet Listevisning, og kan nå flytte til de andre delene av programmet
Story List
Historikklistevisningen er veldig lik emnelisten. For organisatoriske formål skal vi sette denne visningen (og senere, detaljhistorien) inne i en egen mappe. Høyreklikk på prosjektets navn i Solution Explorer og velg "Add> New Folder." Navngi den nye mappen Visninger. Deretter høyreklikker du på Visninger mappe og velg "Legg til> Nytt element ..." Velg Windows Phone Portrait Page mal og navn den Stories.xaml. Dialogboksen din bør se ut som følgende:
Nå, som tidligere, endre søknadstittelen til "Simple Digg" og sidenavnet til "Stories." Deretter drar du en ListBox på tomrommet under sidetittelen din og endrer det som er merket slik at det ser ut som det følgende:
På dette punktet ser historikklistevisningen din nesten ut som emnelisten din. De virkelige forskjellene vil dukke opp når du fyller dem med dataposter.
Historie detaljer
Den endelige visningen for søknaden din er visningsposisjonen. Historiedetaljer-visningen presenterer de 4 dataene vi snakket om tidligere:
Tittel
Beskrivelse
Diggs
link
Antall Diggs og tittel vil okkupere toppen av visningen, og historien beskrives nedenfor. Etter det vil en koblingsvilje tillate brukeren å navigere til den aktuelle historien hvis de ønsker det.
Som før, høyreklikk på Visninger mappe i prosjektet ditt og velg Legg til> Nytt element. Velg Windows Phone Portrait Page mal og navnet på den nye visningen din Story.xaml. Klikk på Legg til og Visual Studio vil opprette Story.xaml og åpne den for redigering.
Endre programtittel og side tittel tekstblokker for å lese "Simple Digg" og "Story" henholdsvis. Dra nå a StackPanel inn i det tomme rommet under sidetittelen din. Dra en annen StackPanel inn i forrige StackPanel. Dette StackPanel vil inneholde historietittelen og Digg-tellingen. Du vil at disse elementene skal justere ved siden av hverandre, så endre orientering eiendom til Horisontal.
Til slutt drar du a TextBlock og a Knapp inn i din første StackPanel. De TextBlock vil inneholde historien beskrivelsen mens Knapp vil tillate brukeren å besøke historikkilden. Du kommer til å trenge å gjøre noe omfattende eiendomsmodifikasjon til disse elementene, og i stedet for å kjøre gjennom dem en etter en, må du bare sørge for at oppslaget ditt ser ut som følgende:
Du kan se at vi har fjernet mest eksplisitte Høyde og Bredde egenskaper og endret Tekst og Navn Egenskaper til noe litt mer beskrivende. Det ser litt stygg akkurat nå, men vi løser det senere. Hvis du har alt merket riktig, bør din visuelle designpanel se ut som følgende:
På dette punktet er grunnleggende om alle nødvendige synspunkter gjort. Du kan slå F5 for å skyte opp søknaden for å bekrefte at alt fungerer, men du får bare en blank skjerm med "Topics" øverst.
Tilpasse navigasjonsmappen
Det neste du må gjøre er å sørge for at du kan lede brukere rundt applikasjonen din. For å gjøre det, bruker du Silverlights navigasjonskartlegging med noen få enkle regler. Åpne prosjektet ditt App.xaml fil og plasser markøren inne i åpningen applikasjon element og legg til et nytt navneområde som følger:
xmlns: nav = "clr-navnerom: System.Windows.Navigation, montering = Microsoft.Phone"
Dette refererer til Windows System Navigation namespace (en Silverlight-funksjon) og lar deg bruke de forskjellige biblioteksklassene som finnes i den. Finn nå Application.Resources element i App.xaml og legg til følgende elementer:
Koden du nettopp har opprettet, skaper en rekke URI-mappings for visningene i søknaden din. De korresponderer med henholdsvis emnelisten, historikklisten og historiedetaljer. Som du kan se, gir Silverlight navigasjons kartlegging deg mulighet til å definere søkevariabler inni dine tilpassede mappings. Dette vil komme til nytte senere når vi går for å faktisk fylle ut data.
Du er ikke ferdig med URI-kartlegging, skjønt. Du må fortelle søknaden din om å bruke dette UriMapper, så åpne App.xaml kode bak ved å klikke på pilen ved siden av App.xaml og åpning App.xaml.cs. Innsiden av app metode etter samtalen til InitializePhoneApplication () legg til følgende erklæring:
RootFrame.UriMapper = Ressurser ["UriMapper"] som UriMapper;
Denne setningen forteller at søknaden din skal bruke UriMapper du bare har definert i XAML for telefonappen din. Nå, la oss begynne å fylle ut noen data.
Populere emnelisten
Det første vi må gjøre er å fylle ut emnelisten. Vi gjør dette når brukeren først navigerer til MainPage.xaml side. For å sikre at dette skjer, vil du overstyre OnNavigatedTo metode for Hovedside klasse. Åpen MainPage.xaml.cs ved å klikke på pilen ved siden av MainPage.xaml. Plasser markøren etter konstruktøren og legg til følgende kode:
beskyttet overstyring ugyldig OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); WebClient digg = ny WebClient (); digg.DownloadStringCompleted + = ny DownloadStringCompletedEventHandler (digg_DownloadStringCompleted); digg.DownloadStringAsync (ny Uri ("http://services.digg.com/1.0/endpoint?method=topic.getAll")); void digg_DownloadStringCompleted (objekt sender, DownloadStringCompletedEventArgs e)
Du kan se det inne i OnNavigatedTo Metode du lager en WebClient objekt, tilordne det en hendelsehandler for når en streng er lastet ned, og instruer den om å laste ned strengen fra Digg topic.getAll Metode URL. Vi vet at strengen som skal lastes ned, er i XML-format, så vi må sørge for at vår hendelsehandler kan analysere XML-en. Til dette formål bruker vi Linq-bibliotekene som er tilgjengelige i .NET-rammen. Før vi kan bruke disse biblioteksklassene, må vi imidlertid legge til en referanse til biblioteket. Høyreklikk på "Referanser" -elementet i ruten Explorer Explorer og velg "Legg til referanse ..." Fra listen som dukker opp, velg System.Xml.Linq og klikk "OK".
Nå trenger du bare å fylle inn hendelseshåndteringen du opprettet. Endring digg_DownloadStringCompleted så det ser ut som følgende:
void digg_DownloadStringCompleted (objekt sender, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement topicXml = XElement.Parse (e.Result); var emner = fra emne i topicXml.Descendants ("topic") velg nytt emne Name = topic.Attribute ("name"). Verdi, ShortName = topic.Attribute ("short_name"). Verdi; EmnerListe.ItemsSource = emner;
Først sjekker du for å se om nedlastingen ble fullført. Hvis det var, så analyserer du den resulterende strengen og genererer en samling emner ved hjelp av Linq til XML. Hvis du er interessert, kan du lese mer om Linq til XML på det offisielle MSDN-nettstedet.
Til slutt tildeler du ItemsSource eiendom av TopicsList til emnene du analyserte ut. Hvis du ser en skarp linje under Emne, plasserer du markøren etter det, klikker du på nedpilen som vises under ordet, og velger "ved hjelp av SimpleDigg.Digg". På dette punktet har du temaene dine populært, så brann opp din telefonemulator ved å trykke på F5, og du bør se noe som følger:
Som du kan se, har listen din blitt fylt ut, men de riktige dataene blir ikke vist. La oss ta vare på det nå.
Datamaler
Datamalen er et av de kraftigste verktøyene i Silverlight verktøykassen. De lar deg definere markeringen som skal vises for vilkårlig gjenstand. På dette punktet definerer vi DataTemplates for Digg-emner og -historier. Åpen App.xaml og plasser markøren inne i Application.Resources element. Legg til følgende element:
Denne DataTemplate gir inneholder en enkel TextBlock element som er bundet til Navn egenskapen til objektet som vises. Hvis du husker, Digg.Topic klassen inneholder a Navn eiendom som er satt til Navn Attributt returneres fra API-samtalen for Digg-emner. Gå tilbake til din MainPage.xaml og finn ListBox element. Legg til en ny eiendom ItemTemplate til ListBox som følger:
ItemTemplate = "StaticResource TopicTemplate"
Denne linjen med kode instruerer applikasjonen til å bruke tidligere opprettet DataTemplate ressurs for å vise emnet Emne som utgjør ListBoxsamling. Hvis du trykker på F5 og kjører programmet, ser du at Emnetavn vises riktig nå:
Henter og viser historier
På dette tidspunktet er vi klare til å begynne å hente historier per emne og notere dem. Først må vi fortelle søknaden at når en emnetittel tappes, bør søknaden navigere til historielisten. Åpen MainPage.xaml og finn din ListBox element. Legg til SelectionChanged eiendom og la Visual Studio lage en ny hendelsehandler. I MainPage.xaml.cs, endre hendelseshåndterer slik at den leser noe som følger:
Hvis du kjører programmet nå (ved å trykke på F5), kan du se at du navigerer til siden Historier når du velger et emne. Nå trenger vi bare å fylle ut historielisten og få dem til å vises riktig. Som vi gjorde tidligere, skal vi overstyre OnNavigatedTo metode for å få det til å skje. Åpen Visninger / Stories.xaml.cs og legg til følgende kode:
beskyttet overstyring ugyldig OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Strenge navn; NavigationContext.QueryString.TryGetValue ("Emne", utnavn); WebClient klient = ny WebClient (); client.DownloadStringCompleted + = ny DownloadStringCompletedEventHandler (client_DownloadStringCompleted); client.DownloadStringAsync (ny Uri ("http://services.digg.com/1.0/endpoint?method=story.getAll&topic=" + navn)); void client_DownloadStringCompleted (objekt sender, DownloadStringCompletedEventArgs e) if (e.Error! = null) return; XElement storyXml = XElement.Parse (e.Result); var historier = fra historien i storyXml.Descendants ("story") velg ny Digg.Story Tittel = story.Element ("title"). Verdi, Beskrivelse = story.Element ("beskrivelse"). Verdi, Diggs = Int32. Parse (story.Attribute ("diggs"). Verdi), Link = story.Attribute ("link"). Verdi; StoriesList.ItemsSource = historier;
Mye av dette vil se kjent ut. Den eneste delen som kan se rart er å hente emnetavnet. Hvis du husker, har du kartlagt / Topics / emne til /Views/Stories.xaml?Topic=topic. Det vil si at du tillater at emnestrengvariabelen for temaet blir sendt i et vennlig format. Når vi navigerte fra emnelisten, passerte vi emnetavnet i den relative Uri. I koden ovenfor, når historikklisten navigeres til, henter vi denne variabelen og bruker den til å ringe Digg API-nettadressen med et bestemt emne.
Vi vet at hvis vi skyter opp søknaden vår på dette punktet, kommer vi ikke til å få den type utseende vi ønsker for vår historieoppføring. La oss definere et annet DataTemplate å bruke i denne visningen. Åpne opp App.xaml og legg til følgende kode i din Application.Resources element.
Nå, åpne opp Visninger / Stories.xaml og endre din ListBox element så det lyder som følger:
Kjør din søknad ved å trykke F5 og klikk på et emne navn. Vent litt, og du får se historiene dine vises. Det neste vi må gjøre er å vise historien om detaljene på siden.
Viser historikkdetaljer
For å vise historikkdetaljer må vi først tillate navigering til historiddetaljsiden, og vi skal håndtere visning av data. I historielisten har vi en rekke historieartikler. Når en av dem er valgt, vil vi lagre det Historie objekt et sted og bruk det på historien detaljer siden. For å gjøre det, legger vi til en hendelsesbehandler til SelectionChanged hendelse som følger:
Her lagrer du den valgte historien i PhoneApplicationService klassens Stat eiendom som anbefalt av beste praksis for utførelsesmodellen. Hvis du har en rød squiggly linje under PhoneApplicationService plasser deretter markøren inne i ordet og velg deretter rullegardinmenyen som vises og velg "ved hjelp av Microsoft.Phone.Shell".
Nå må vi hente dette i den andre enden. Åpne opp din Visninger / Story.xaml.cs og legg til følgende kode som overstyrer OnNavigatedTo:
beskyttet overstyring ugyldig OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedTo (e); Digg.Story story = PhoneApplicationService.Current.State ["Story"] som Digg.Story; this.DataContext = story;
Her avspiller du navigasjonen til detaljvisningen for historien, henter historien som er lagret i PhoneApplicationService's Stat eiendom, og fjern deretter historien fra PhoneApplicationService's Stat samling. Du setter deretter inn Datacontext for utsikten til historien hentet. Dette er nøkkelen, da vi vil bruke dette bindende for å vise de riktige dataene.
Åpne oppslaget for visning av historien detaljer i Visninger / Story.xaml. Endre den til å bruke bindinger som følger:
Hvis du starter søknaden din nå (trykk F5), vil du kunne drille ned fra emnelisten, til historielisten, til full historie detaljer. Historien detaljer visning bør se ut som følgende:
Det er bare en siste ting å gjøre. Legg til et klikk hendelseshåndterer til Link-knappen i Visninger / Story.xaml som følger:
Endre hendelseshåndtereren din, Link_Click, å lese som følger:
Hvis du ser en rød squiggly linje under WebBrowserTask, plasser markøren din over klassen og velg deretter "ved hjelp av Microsoft.Phone.Tasks" fra rullegardinmenyen som vises. Denne koden starter Windows Phone 7 nettleseren når du klikker på knappen og navigerer den til historienes URL.
Etterbehandling
Du har en fullt fungerende, om enn enkel, Digg-klient på dette punktet. Du kan bla gjennom historier etter emner, se historikkdetaljer og besøke hele historien i WP7 nettleser. I denne opplæringen har vi:
Opprettet klasser for å lagre Digg-data
Skapte og tilpassede applikasjonsvisninger ved hjelp av den visuelle designeren
Tilpassede navigasjons-URIer og brukt Windows Phone 7 Navigation-tjenesten
Implementert DataTemplates and Styles for å vise historier og emner
Overrode OnNavigatedTo og OnNavigatedFrmo hendelsesbehandlere for å gi passende funksjonalitet for hver side
Brukt Windows Phone 7-oppgaver for å starte en nettleser
Noen av emnene vi dekket er langt til dybde for å dekke i en enkel opplæring, så du vil sikkert finne ut mer om dem. Følgende ressurser skal hjelpe deg med å komme i gang:
Datamaler
Data Templating Oversikt
WPF Tutorials: Datamaler
Styles
WPF Tutorials: Stiler
WPF guidet tur - stiler
Windows Phone 7 Programmering
Programmeringsveiledning
Starter
Jeg håper du har hatt denne opplæringen. Hvis du har spørsmål eller ønsker å se noe annet i en fremtidig veiledning for Windows Phone 7, gi meg beskjed i kommentarene.
Share
Accentsconagua
