, skabe din første universelle vinduer app,,,,, 45,,,,,,,, 6,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, universelle vinduer apps gøre det muligt for dem at mål alle vinduer udstyret i en løsning.du får én gang, deler de fleste af din kode, og udnytte - vinduer telefon eller xbox. målet er at maksimere genanvendelse af koden.du kan dele kode, bruger kontrol, styles, tråde, og andre aktiver mellem de vinduer, telefon og vinduer 8 projekter i visuel studie.dette reducerer den indsats, der var nødvendig til at etablere og opretholde en app til hver type anordning.,, indledningen, fra fremkalder perspektiv, en universel vinduer app, er ikke en enkelt binære, der kører på flere forskellige platforme.det tager form af en visuel studie opløsning, der indeholder flere projekter, et projekt for hver målrettet platform, ud over et fælles projekt, der indeholder koden og ressourcer fordeles mellem platforme.   en masse kode kan deles mellem projekter, som   vinduer telefon 8.1 gennemfører de fleste af de winrt apis - vinduer 8.1 gennemfører. du kan skabe en vinduer telefon anvendelse ved hjælp af silverlight runtime (version 8. 0 eller 8.1) eller winrt runtime (en fra alle vinduer apps).den winrt runtime gør dig i stand til at skabe en ansøgning, som vil køre på vinduer, vinduer, telefon og endda xbox.,, vi bruger   xaml   ramme for at udvikle en app til flere platforme.i den nuværende version er der en api - konvergens på 90%, men der er stadig en lille ikke nået endnu.- telefon forhold kun er til rådighed i silverlight ramme:,, linser støtte, voip støtte, kameraet indfange opgave, clipboard apis, lås skærm tapet api, i denne forelæsning, vil jeg bruge en universel vinduer app model at oprette en hex ur app, en præcis hexadecimal farve   ur.den går gennem hele 24 timer farve varierer fra�, til𹦷,.med hver tik uret, app 's baggrund ændringer i farven, der svarer til den nuværende tidspunkt omdannes til hexadecimal.det anvender de samme gennemførelse som hex farve er tiden til at generere hex - kode af de nuværende tidspunkt.,, design var inspireret af en telefon app forelæsning om 7 vinduer. tuts +.mens uret app kun mål vinduer telefon, vi vil bruge sine design til et lignende program til vinduer telefon 8.1 og vinduer 8.1.nedenstående skærmbillede viser, hvad vi er ved at opbygge.,,,,, i denne lektion, jeg vil tale om følgende emner, der er relevante for at udvikle alle vinduer apps:,, strukturen af universelle vinduer apps, skifter startende projekter i visuel studie, sammenhæng, skifteren for universelle vinduer apps i visuel studie redaktør, skriver man krydse platform kode i det fælles projekt, hvor at tilføje støtte til vinduer eller vinduer telefon til et eksisterende projekt, opbygning af en universel vinduer app fra bunden, 1.   struktur af universelle vinduer apps, en universel vinduer app er en samling af tre projekter er indesluttet i en frivillig løsning mappe.vinduerne og vinduer telefon projekter er platform projekter og er ansvarlig for at skabe anvendelse emballage (. appx), der er rettet mod de forskellige platforme.disse projekter omfatter aktiver, som er specifikke for den platform, der målrettet.,, det fælles projekt er en beholder til kode, der kører på begge platforme.de har ikke en kombineret produktion, men indholdet er importeret af den platform, projekter og anvendes som en del af fremstillingsprocessen for at skabe app kolli (. appx).,, skærmbillede nedenfor viser den løsning, som visuelle studie skaber, når man vælger projektet model for en blank app (universal apps).,,,,, visuelle studie 2013 opdatering. 2 indfører det nye, der er universel vinduer apps.downloade og installere denne ajourføring, inden du begynder at opbygge universelle vinduer apps.,,, 2.   skifter startende projekter, da du løb den løsning, det projekt, som løber, er den, der er udvalgt som igangsætning projekt.at fastsætte de nystartede projekt, right-click om projektet knudepunkt i  , opløsning explorer, og vælge  , som startkapital projekt.   du hurtigt kan skifte igangsætning projekt fra, ser ud nu, indeholder mål, at alle mulige projekter i opløsningen.,,,,, det projekt, de vælger, er vist i fed skrift i  , opløsning opdagelsesrejsende.de foreliggende fejlcheck mål ændring, når der skiftes startende projekter.,,, når vinduerne er projektet igangsætning projekt, de ser ud, mål, viser muligheder for vinduer, simulator, eller lokale maskine,.,, når vinduerne telefon projekt er nystartede projekt, ud viser muligheder for, udstyr, samt forskellige emulators., 3.   forbindelse skifteren i kode redaktør, når skrive kode i et fælles projekt, kan du bruge den projekt direkte i navigation bar at udvælge den platform, du er aktivt mod, som igen customizes den intellisense erfaring i kode redaktør.,,,,,, hvis du bruger en api i fælles kodeks ikke støttes på begge platforme, en fejlmeddelelse vil identificere denne api, når man bygger den prognoset. du behøver ikke at bygge projektet til at bekræfte, at du bruger over platform apis, følgende skærmbillede viser et eksempel på den advarsel, billedsymboler og intellisense til en type, som er støttet på vinduer telefon apps.,,,,, 4.   cross platform kode i fælles projekt, i det fælles projekt, du typisk skrive kode, som er fælles for begge platforme.for at udskille dele af koden, der er platform specifikke, brug  ,&#ifdef,   direktiv.konstanterne  , windows_app,   og  , windows_phone_app,   er forudbestemt til dig.,, der er følgende betinget udarbejdelse konstanter, som de kan bruge til at skrive platform specifik kode:, c&#windows_app, windows_phone_app, c + +, winapi_family_pc_app, winapi_family_phone_app, når du skriver kode i det fælles projekt, - studie kode redaktør anvender en sammenhæng, som er rettet mod en platform eller det andet.i c #, intellisense, at du, som du skriver kode er specifikke for rammerne af kode redaktør, der er specifikke for vinduer eller vinduer telefon., 5.  , at støtte til vinduer /vinduer telefon, hvis du allerede har en eksisterende vinduer 8.1 anvendelse, kan du bruge den  , tilføj vinduer telefon 8.1,   ordre til at tilføje en ny vinduer telefon 8.1 projekt og et fælles projekt til løsningen.en lignende mulighed er også til rådighed, hvis de har en vinduer telefon 8.1 anvendelse og du vil tilføje støtte til vinduer 8.1.,, at give støtte til en type anordning eller en anden i  , opløsning opdagelsesrejsende, right-click på projektet, og vælge  , tilføje vinduer telefon 8.1,   eller  , tilføje vinduer 8.1.,,,,, her, visuelle studie tilføjer et nyt vinduer, telefon eller vinduer projekt til løsningen.et fælles projekt er også automatisk skabt for dig. følgende skærmbillede viser en løsning efter tilsætning af nogle vinduer telefon projekt til en eksisterende vinduer projekt.   det fælles projekt, der tilføjes den løsning er i første omgang tom.,,,,, bemærker, at hvis de skaber en app, ved hjælp af en universel vinduer app - model, det fælles projekt allerede indeholder det, app.xaml, fil.,, trin 1: flytning af filer til det fælles projekt, kan du flytte en kode, som du ønsker at dele mellem apps til det fælles projekt.f.eks. kan du flytte  , fælles,  , datamodel, og  , strenge  , mapper til det fælles projekt.du kan selv gå  , app. xaml,   til det fælles projekt, kan de dog modtage en anden fejl med den kode, du flytter ind i det fælles projekt.du kan løse disse fejl ved konfigureringen af din nye app projekt at have det samme sæt af henvisninger, som deres oprindelige projekt. følgende skærmbillede viser samme forsamling reference føjet til begge projekter.,,,,,,, hvis deres fælles kode anvender api - grænseflader, der er specifikke for vinduer, brug  ,&#ifdef,   direktiv med  , windows_app,   konstant at isolere den del af koden.brug  , windows_phone_app,   konstant at udskille dele af kode, der svarer til vinduer telefon 8.1.,, trin 2: deler app. xaml, når man skaber en ny løsning for en universel vinduer app, visuelle studie steder  , app. xaml,   i det fælles projekt.hvis du konvertere et eksisterende projekt til en universel vinduer app, kan du flytte  , app. xaml,   til det fælles projekt manuelt.du bliver nødt til at sætte bygge aktion ejendom af side, applicationdefinition  , efter at den fil.her er de trin:, i  , opløsning explorer, i det fælles projekt, udvælge  , app. xaml,   fil., udvælge  , opfattelse er >, egenskaber, vindue. i, egenskaber, vindue, i at bygge foranstaltninger, ud over, vælg, applicationdefinition,.,, du også er nødt til at beslutte, hvordan de vil åbne den første side af din app.   hvis du deler, app.xaml, dokumentation og   ønsker at anvende en anden start side for hvert program, er du nødt til at tilføje,  ,&#ifdef,   direktiver,&#som vist nedenfor. hvis windows_app hvis (!rootframe. navigere (type (hubpage)))&#endif #, hvis windows_phone_app hvis (!rootframe. navigere (type (windowsphonestartpage)))&#endif {kaster ny undtagelse ("undladt at skabe første side")), 6.   få begyndte at skrive en universel vinduer app, trin 1: projekt fælde, for det første, at vælge et projekt model for en universel vinduer app i det nye projekt, dialog kasse.   følgende skærmbillede viser den universelle vinduer app projekt - modeller, der i øjeblikket er til rådighed for c #.,,,,, give projektet et navn.jeg vil bruge hex - ur prof  , for mit projekt.,, trin 2: bygning af brugergrænsefladen, for det meste af brugergrænsefladen arbejde finder sted under den platform, specifikke projekter, som gør det muligt at opnå et brugergrænseflade, der ser godt ud på pc, tabletter, og telefoner, men at dele fælles data, ressourcer, komponenter og endda på modeller., i stedet for at bygge særskilt   brugergrænseflader   for vinduerne telefon 8.1 og vinduer 8.1 versioner af hex   ur prof, jeg definere en fælles design i det fælles projekt.I just have to make a few changes in the XAML of the clock app on Tuts+ to make it work for both platforms.,,<Canvas x:Name="ContentPanel" Margin="12,0,620,0" HorizontalAlignment="Center" Grid.Row="1" RenderTransformOrigin="0.5,0.5"> <Canvas.RenderTransform> <CompositeTransform Rotation="-30"/> </Canvas.RenderTransform> <Canvas x:Name="TimeText" Height="315" Canvas.Left="-18" Canvas.Top="288" Width="496" RenderTransformOrigin="0.5,0.5" Opacity="0"> <Canvas.RenderTransform> <CompositeTransform/> </Canvas.RenderTransform> <TextBlock x:Name="TimeHours" TextWrapping="Wrap" Text="12" Canvas.Top="24" Style="{StaticResource TimeTextStyle}" Canvas.Left="-67" Width="267" TextAlignment="Right"/> <TextBlock x:Name="TimeDots" Canvas.Left="204" TextWrapping="Wrap" Text=":" Style="{StaticResource TimeTextStyle}"/> <TextBlock x:Name="TimeMinutes" Canvas.Left="263" TextWrapping="Wrap" Text="59" Canvas.Top="24" Style="{StaticResource TimeTextStyle}" Width="257"/> </Canvas> <Rectangle x:Name="HorizontalSeparator" Height="4" Canvas.Left="-400" Canvas.Top="295" Width="1020" Fill="White"/> <Rectangle x:Name="VerticalSeparator" Fill="White" Height="469" Canvas.Left="213" Canvas.Top="489" Width="4"/> <TextBlock x:Name="ApplicationTitle" TextWrapping="Wrap" Text="HEX CLOCK PRO" Canvas.Top="271" Foreground="White" FontSize="16" Canvas.Left="18"/> <TextBlock x:Name="SecondsLabel" Height="36" Canvas.Left="23" TextWrapping="Wrap" Text="seconds" Canvas.Top="475" Width="166" TextAlignment="Right" Style="{StaticResource SmallTextStyle}" Margin="0"/> <TextBlock x:Name="TimeSeconds" Height="205" Canvas.Left="3" TextWrapping="Wrap" Text="59" Canvas.Top="505" Width="210" FontSize="186.667" RenderTransformOrigin="0.5,0.5" Opacity="0"> <TextBlock.RenderTransform> <CompositeTransform/> </TextBlock.RenderTransform> </TextBlock> <TextBlock x:Name="DateText" Height="39" Canvas.Left="208" TextWrapping="Wrap" Text="2012/12/31" Canvas.Top="258" Width="143" FontSize="29.333"uklarhed =" 0 "/> < /lærred >  , trin 3: deling kode, som tidligere nævnt, kode, som er fælles for begge platforme kan sættes i det fælles projekt.kode, der anvender platform specifikke grænseflader skal være anbragt i en af platformen for specifikke projekter.   selv,&#ifdef, direktiver til også at omfatte platform specifik kode i et fælles dossier, som hex ur - pro - app ikke anvende api - grænseflader, der er platform specifikke, jeg kan sætte alle koder i fælles projekt.,, der skjuler den status, bar,,, mainpage.xaml.cs i det fælles projekt, vi har anvendt  ,&#ifdef direktiv at isolere kode, der svarer til vinduer telefon.den kode, der afgrænses i&#ifdef, huder status bar på vinduer telefon.,, offentlige mainpage() {. initializecomponent(); #, hvis windows_phone_app applicationview. getforcurrentview(). setdesiredboundsmode (applicationviewboundsmode. usecorewindow);&#endif}, viser, at den nuværende tidspunkt, jeg har brugt den, dispatchertimer, klasse til en indledende tik, når det, layoutroot, nettet er ladt.de timer, formål kræver, timer_tick, funktion på alle tik af uret.  , prøv {dispatchertimer timer = nye dispatchertimer(); timer. tik + = timer_tick; timer. interval = nye tidsrum (0, 0 0, 1 timer. start(); timer_tick (nul, nul) /en første tik} fangst /call {},,, timer_tick, funktion, ajourfører de udviste gang i app og samtidig det ajourfører baggrund farve.,, ajourføring baggrund farve, baggrunden farve er sat til en hexadecimal farve, der svarer til det nuværende. ,, hexcolour farve = nye hexcolour (hextime); solidcolorbrush bgbrush = nye solidcolorbrush (farve. fromargb (farve. en farve. r, farve. g, farve. b)); layoutroot. baggrund = bgbrush;,, en genstand for, hexcolour, klasse er igangsat med det nuværende tidspunkt vender tilbage de tilsvarende rgb - værdier.producenten af  , hexcolour, klasse fastsætter en, f, g, b - værdier for de specificerede farver.,, offentlige hexcolour (string - hexcode) (hvis (hexcode = = null) {kaste nyt argumentnullexception ("hexcode");} hvis (!regex. ismatch (hexcode, hex_pattern) {kaste nyt argumentexception ("format skal være� eller&#ff000000 (ingen ekstra whitespace)", "hexcode");} //barbere "#" symbol hexcode = hexcode. trimstart ('#) //- alpha - værdi, der er specificeret, at ingen gennemsigtighed (0xff) hvis (hexcode.length!= length_with_alpha) hexcode = - format ("ff (0}", hexcode); _color = nye color(); _color. a = byte. analysere (hexcode. substring (0, 2), numberstyles. allowhexspecifier); hvis (_color. en < 50) _color. a = 50; _color. r = byte. analysere (hexcode. substring (2), numberstyles. allowhexspecifier); _color. g = byte. analysere (hexcode. substring (4, 2), numberstyles. allowhexspecifier); _color. b = byte. analysere (hexcode. substring (6, 2), numberstyles. allowhexspecifier);), med tilføjelse af tegnefilm og virkninger, har jeg efterlignede den oprindelige animation, der anvendes i den foregående ur app på tuts +, og det er i brug, når det, layoutroot, er ladt.,, storyboard sb = (tegning). indtægter ["intialanimation"] sb.begintime = tidsrum. fromseconds (0, 1), sml. begin(),,, det er alt, hvad vi har brug for at opbygge hex ur prof - app.app 'en anvender 100% fælles kode.du skal bare skabe særskilte app pakker for begge platforme.app ligner helt på vinduer, telefon og anvender de samme xaml kode for dets brugergrænseflade.,,,,, bemærke, at jeg har lagt alle xaml og c&#kode i det fælles projekt, men når jeg anvende nogen vinduer app eller vinduerne telefon app, koden i det fælles projekt er fusioneret internt med platformen for specifikke projekter.,, konklusion, de fleste af koden for vinduerne app og vinduerne telefon app er delt, og mens de bruger grænseflader er adskilt, svarer de nok, at bygge både er mindre arbejde end at bygge to brugergrænseflader fra bunden.,, hvis jeg havde bygget en vinduer telefon version af hex ur prof til vinduer telefon, 7 eller 8, det ville have været meget mere arbejde siden vinduer telefon 7 indeholder ingen winrt apis og vinduer telefon 8 indeholderkun en lille del., med vinduer 10, vil vi se mere konvergens, hvilket betyder, at en adi, den winrt api til flere forskellige platforme, og en høj grad af nøjagtighed mellem brugergrænseflade elementer for hver platform, der ikke forhindre, at entreprenører fra at bruge platform særlige elementer, der skal give det bedst mulige erfaring på hver anordning   føler sig fri. at downloade   tutorielle kilde filer   at anvende som reference.hex - ur prof er også tilgængelige på markedet for vinduer telefon 8.1 og vinduer 8.1.