Opprette din første Universal Windows App

Universal Windows-apper gjør det mulig å målrette mot hver Windows-enhet i en løsning. Du utvikler en gang, deler mesteparten av koden din, og distribuerer på Windows, Windows Phone eller Xbox.

Målet er å maksimere gjenbruk av kode. Du kan dele kode, brukerkontroller, stiler, strenger og andre eiendeler mellom Windows Phone og Windows 8-prosjekter i Visual Studio. Dette reduserer innsatsen som trengs for å bygge og vedlikeholde en app for hver type enhet.

Introduksjon

Fra en utviklerperspektiv er en universell Windows-app ikke en enkelt binær som kjører på flere plattformer. I stedet tar det form av en Visual Studio-løsning som inneholder flere prosjekter, ett prosjekt for hver målrettet plattform i tillegg til et delt prosjekt som inneholder kode og ressurser som deles mellom plattformer. Mye kode kan deles mellom prosjektene, da Windows Phone 8.1 implementerer flertallet av WinRT APIer som Windows 8.1 implementerer.

Du kan opprette et Windows Phone-program ved hjelp av Silverlight-kjøretiden (versjon 8.0 eller 8.1) eller WinRT-kjøretiden (den fra universelle Windows-apper). WinRT-kjøretiden lar deg lage et program som vil kjøre på Windows, Windows Phone, og til og med Xbox One.

Vi bruker XAML-rammeverket for å utvikle en app for flere plattformer. I den nåværende versjonen er det en API-konvergens på 90%, men det er fortsatt et lite sett som ikke er konververt ennå. Windows Phone-funksjoner som bare er tilgjengelige i Silverlight-rammen er:

  • Linser støtte
  • VoIP-støtte
  • Kameraopptaksoppgave
  • Utklippstavle-APIer
  • Lås skjerm bakgrunnsbilde API

I denne veiledningen vil jeg bruke en universell Windows appmal for å lage en Hex Clock-app, en presis heksadesimale fargeklokke. Det går gjennom hele 24 timers fargespekter, fra # 000000 til # 235959. Med hvert kryss av klokken endres appens bakgrunn til fargen som svarer til gjeldende tid, konvertert til heksadesimal. Den bruker samme implementering som Hex Color JS Clock for å generere hex-koden for gjeldende tid.

Designet ble inspirert av en veiledning for Windows Phone 7 klokke på Tuts +. Mens klokkeappen bare retter seg mot Windows Phone, bruker vi design for å lage en lignende app for Windows Phone 8.1 og Windows 8.1. Nedenfor skjermbildet viser hva vi skal bygge.

I denne veiledningen vil jeg diskutere følgende emner som er relevante for å utvikle universelle Windows-apper:

  • strukturen av universelle Windows-apper
  • bytter oppstartsprosjekter i Visual Studio
  • kontekstbryter for universelle Windows-apper i Visual Studio-editoren
  • hvordan å skrive plattformskode i det delte prosjektet
  • hvordan legge til støtte for Windows eller Windows Phone til et eksisterende prosjekt
  • bygge en universell Windows-app fra grunnen av

1. Struktur av Universal Windows Apps

En universell Windows-app er en samling av tre prosjekter vedlagt i en valgfri løsningskatalog. Windows- og Windows Phone-prosjekter er plattformprosjekter og er ansvarlige for å lage applikasjonspakker (.appx), rettet mot de respektive plattformene. Disse prosjektene inneholder eiendeler som er spesifikke for plattformen som er målrettet.

Det delte prosjektet er en container for kode som kjører på begge plattformene. De har ikke binærutgang, men innholdet blir importert av plattformprosjektene og brukes som en del av byggeprosessen for å generere apppakker (.appx).

Skjermbildet nedenfor viser løsningen som Visual Studio oppretter når du velger prosjektmal for en Blank App (Universal Apps).

Visual Studio 2013 Update 2 introduserer den nye funksjonen som er universelle Windows-apper. Last ned og installer denne oppdateringen før du begynner å bygge universelle Windows-apper.

2. Bytte oppstartsprosjekter

Når du kjører løsningen, er prosjektet som kjører, det som er valgt som oppstartsprosjekt. For å angi oppstartsprosjektet, høyreklikk på prosjektknuten i Solution Explorer og velg alternativet Sett som oppstartsprosjekt. Du kan raskt bytte oppstartsprosjektet fra Feilsøkingsmål rullegardin som nå teller alle mulige prosjekter i løsningen.

Prosjektet du velger, vises med fet skrift i Solution Explorer. De tilgjengelige feilsøkingsmålene endres når du bytter oppstartsprosjekter.

  • Når Windows-prosjektet er oppstartsprosjektet, vil Feilsøkingsmål drop-down viser alternativer for Windows Simulator eller Lokal maskin.
  • Når Windows Phone-prosjektet er oppstartsprosjektet, viser rullegardinmenyen alternativer for Enhet så vel som ulike emulatorer.

3. Kontekstbryter i Kodeditor

Når du skriver kode i et delt prosjekt, kan du bruke prosjektkontekstbryteren i navigasjonsfeltet til å velge plattformen du målretter mot, som i sin tur tilpasser IntelliSense-opplevelsen i kodeditoren.

Hvis du bruker en API i delt kode som ikke støttes på begge plattformene, identifiserer en feilmelding denne API når du bygger prosjektet. Du trenger ikke å bygge prosjektet for å bekrefte at du bruker API-programmer på tvers av plattformen.

Følgende skjermbilde viser et eksempel på advarselsikonene og IntelliSense for en type som bare støttes i Windows Phone-apper.

4. Cross-Platform Code i delt prosjekt

I det delte prosjektet skriver du vanligvis kode som er felles for begge plattformene. For å isolere deler av kode som er plattformspesifikke, bruk # ifdef direktiv. Konstantene WINDOWS_APP og WINDOWS_PHONE_APP er forhåndsdefinert for deg.

Følgende er de betingede kompileringskonstantene som du kan bruke til å skrive plattformspesifikk kode:

C # WINDOWS_APP
WINDOWS_PHONE_APP
C++
WINAPI_FAMILY_PC_APP
WINAPI_FAMILY_PHONE_APP

Når du skriver kode i det delte prosjektet, bruker Visual Studio-kodeditoren en kontekst som retter seg mot en plattform eller den andre. I C #, IntelliSense som du ser når du skriver kode er spesifikk for konteksten til kodeditoren, det vil si spesifikk for Windows eller Windows Phone.

5. Legge til støtte for Windows / Windows Phone

Hvis du allerede har et eksisterende Windows 8.1-program, kan du bruke Legg til Windows Phone 8.1 kommandoen for å legge til et nytt Windows Phone 8.1-prosjekt og et delt prosjekt til løsningen. Et lignende alternativ er også tilgjengelig hvis du har et Windows Phone 8.1-program, og du vil legge til støtte for Windows 8.1.

For å legge til støtte for en type enhet eller en annen, i Solution Explorer, høyreklikk på prosjektet og velg Legg til Windows Phone 8.1 eller Legg til Windows 8.1.

Her legger Visual Studio et nytt Windows Phone eller Windows-prosjekt til løsningen. Et delt prosjekt blir også automatisk opprettet for deg.

Følgende skjermbilde viser en løsning etter at du har lagt til et Windows Phone-prosjekt til et eksisterende Windows-prosjekt. Det delte prosjektet som legges til løsningen, er i utgangspunktet tomt.

Merk at hvis du oppretter en app ved hjelp av en universell Windows appmal, inneholder det delte prosjektet allerede App.xaml fil.

Trinn 1: Flytt filer til delt prosjekt

Du kan flytte hvilken som helst kode du vil dele mellom apper til det delte prosjektet. For eksempel kan du flytte Fellesdatamodel, og Strings mapper til delt prosjekt. Du kan til og med flytte App.xaml til det delte prosjektet.

Du kan imidlertid motta noen kompilatorfeil om koden du flytter inn i det delte prosjektet. Du kan løse disse feilene ved å konfigurere ditt nye app-prosjekt for å ha samme sett med referanser som ditt opprinnelige prosjekt.

Følgende skjermbilde viser den samme monteringsreferansen som er lagt til i begge prosjektene.

Hvis den delte koden din bruker APIer som er spesifikke for Windows, bruker du # ifdef direktiv med WINDOWS_APP konstant for å isolere den delen av koden. Bruke WINDOWS_PHONE_APP konstant for å isolere deler av kode spesifikk for Windows Phone 8.1.

Trinn 2: Del App.xaml

Når du lager en ny løsning for en universell Windows-app, plasserer Visual Studio-steder App.xaml i det delte prosjektet. Hvis du konverterer et eksisterende prosjekt til en universell Windows-app, kan du flytte App.xaml til det delte prosjektet manuelt. Du må sette byggaktivitetsegenskapen til siden til ApplicationDefinition etter at du har flyttet filen. Her er trinnene involvert:

  • Solution Explorer, I det delte prosjektet velger du App.xaml fil.
  • Velg Utsikt > Eiendommer vindu.
  • I Eiendommer vindu, i Bygg handling rullegardinliste, velg ApplicationDefinition.

Du må også bestemme hvordan du vil åpne den første siden av appen din. Hvis du deler App.xaml fil og vil bruke en annen startside for hver app, må du legge til # ifdef direktiver som vist nedenfor.

#if WINDOWS_APP hvis (! rootFrame.Navigate (typeof (HubPage)) #endif #if WINDOWS_PHONE_APP hvis (! rootFrame.Navigate (typeof (WindowsPhoneStartPage)) #endif kaste ny unntak ("Kunne ikke opprette startside"); 

6. Kom i gang Skriv en Universal Windows App

Trinn 1: Prosjektoppsett

For det første, velg en prosjektmal for en universell Windows-app i Nytt prosjekt dialogboks. Følgende skjermbilde viser de universelle Windows app prosjektmaler som er tilgjengelige for C #.

Gi prosjektet et navn. jeg vil bruke Hex Clock Pro for prosjektet mitt.

Trinn 2: Bygg brukergrensesnittet

For det meste skjer brukergrensesnittarbeidet i plattformspesifikke prosjekter, slik at du kan lage et brukergrensesnitt som ser bra ut på PC, tabletter og telefoner, men som deler felles data, ressurser, komponenter og til og med visning- modeller.

I stedet for å bygge separate brukergrensesnitt for Windows Phone 8.1 og Windows 8.1-versjoner av Hex Clock Pro, definerer jeg en felles design i det delte prosjektet. Jeg må bare gjøre noen få endringer i XAML på klokken app på Tuts + for å få det til å fungere for begge plattformene.

                       

Trinn 3: Delingskode

Som diskutert tidligere, kan kode som er felles for begge plattformene bli satt i det felles prosjektet. Kode som bruker plattformspesifikke APIer må plasseres i en av plattformspesifikke prosjekter. Du kan til og med bruke # ifdef direktiver for å inkludere plattformspesifikk kode i en delt fil.

Siden Hex Clock Pro appen ikke bruker noen APIer som er plattformspesifikke, kan jeg sette all koden i det delte prosjektet.

Skjuler statuslinjen

I MainPage.xaml.cs I det delte prosjektet har vi brukt # ifdef direktivet for å isolere kode som er spesifikk for Windows Phone. Koden vedlagt i # ifdef skjuler statuslinjen på Windows Phone.

offentlig MainPage () this.InitializeComponent (); #if WINDOWS_PHONE_APP ApplicationView.GetForCurrentView (). SetDesiredBoundsMode (ApplicationViewBoundsMode.UseCoreWindow); #slutt om 

Viser nåværende tid

Jeg har brukt DispatcherTimer klasse for å ringe en første tick når LayoutRoot rutenettet er lastet. De tidsur objektet ringer til timer_Tick funksjon på hvert kryss i klokken. 

prøv DispatcherTimer timer = ny DispatcherTimer (); timer.Tick + = timer_Tick; timer.Interval = ny TimeSpan (0, 0, 0, 1); timer.Start (); timer_Tick (null, null); // Ring en innledende tick fangst 

De timer_Tick funksjon oppdaterer den viste tiden i appen, samtidig som den oppdaterer bakgrunnsfargen.

Oppdaterer bakgrunnsfargen

Bakgrunnsfargen er satt til en heksadesimal farge som tilsvarer gjeldende tid.  

HexColour color = new HexColour (hexTime); SolidColorBrush bgBrush = ny SolidColorBrush (Color.FromArgb (color.A, color.R, color.G, color.B)); LayoutRoot.Background = bgBrush;

En gjenstand for HexColour klassen initialiseres med gjeldende tid, og returnerer tilsvarende RGB-verdier. Konstruktøren av HexColour klassen setter verdiene A, R, G, B for den angitte fargen.

offentlig HexColour (streng hexCode) if (hexCode == null) kaste nye ArgumentNullException ("hexCode");  hvis (! Regex.IsMatch (hexCode, HEX_PATTERN)) kaste nytt ArgumentException ("Format må være # 000000 eller # FF000000 (ingen ekstra hvitt plass)", "hexCode");  // barber av '#' symbol hexCode = hexCode.TrimStart ('#'); // hvis ingen alfa verdi angitt, antar ingen åpenhet (0xFF) hvis (hexCode.Length! = LENGTH_WITH_ALPHA) hexCode = String.Format ("FF 0", hexCode); _color = ny farge (); _color.A = byte.Parse (hexCode.Substring (0, 2), NumberStyles.AllowHexSpecifier); hvis (_color.A < 50) _color.A = 50; _color.R = byte.Parse(hexCode.Substring(2, 2), NumberStyles.AllowHexSpecifier); _color.G = byte.Parse(hexCode.Substring(4, 2), NumberStyles.AllowHexSpecifier); _color.B = byte.Parse(hexCode.Substring(6, 2), NumberStyles.AllowHexSpecifier); 

Legge til animasjoner og effekter

Jeg har etterlignet den første animasjonen som ble brukt i forrige klokke-app på Tuts + og den initialiseres når LayoutRoot er lastet.

Storyboard sb = (Storyboard) this.Resources ["IntialAnimation"]; sb.BeginTime = TimeSpan.FromSeconds (0.1); sb.Begin ();

Dette er alt vi trenger for å bygge Hex Clock Pro-appen. Appen bruker 100% delt kode. Du trenger bare å generere separate apppakker for begge plattformene. Appen ser veldig ut på Windows Phone og bruker den samme XAML-koden for brukergrensesnittet.

Merk at jeg har lagt til alle XAML- og C # -kodene i det delte prosjektet, men når jeg distribuerer enten Windows-appen eller Windows Phone-appen, blir koden i det delte prosjektet fusjonert internt med plattformspesifikke prosjekter.

Konklusjon

Mesteparten av koden for Windows-appen og Windows Phone-appen deles, og mens brukergrensesnittene er adskilte, er de like at bygningen både er mindre arbeid enn å bygge to brukergrensesnitt fra grunnen av.

Hvis jeg hadde bygget en Windows Phone versjon av Hex Clock Pro for Windows Phone 7 eller 8, ville det vært mye mer arbeid siden Windows Phone 7 inneholder ingen WinRT APIer og Windows Phone 8 inneholder bare en liten delmengde.

Med Windows 10 vil vi se mer konvergens, som betyr en API-WinRT API-for flere plattformer og en høy grad av troskap mellom brukergrensesnittelementer for hver plattform som ikke hindrer utviklere i å bruke plattformspesifikke elementer til å presentere Den beste mulige opplevelsen på hver enhet. Du er velkommen til å laste ned opplærings kildefiler for å bruke som referanse. Hex Clock Pro er også tilgjengelig på markedet for Windows Phone 8.1 og Windows 8.1.