Share
Met universele Windows-apps kunt u elk Windows-apparaat in één oplossing targeten. U ontwikkelt één keer, deelt het grootste deel van uw code en implementeert op Windows, Windows Phone of Xbox.
Het doel is om het hergebruik van code te maximaliseren. U kunt code, gebruikersbesturingselementen, stijlen, tekenreeksen en andere items delen tussen de Windows Phone- en Windows 8-projecten in Visual Studio. Dit vermindert de inspanning die nodig is bij het bouwen en onderhouden van een app voor elk type apparaat.
Vanuit het perspectief van een ontwikkelaar, is een universele Windows-app geen enkel binair bestand dat op meerdere platforms wordt uitgevoerd. Het neemt eerder de vorm aan van een Visual Studio-oplossing met meerdere projecten, één project voor elk doelgericht platform naast een gedeeld project met code en bronnen die worden gedeeld tussen platforms. Er kan veel code worden gedeeld tussen de projecten, aangezien Windows Phone 8.1 de meerderheid van de WinRT-API's implementeert die door Windows 8.1 worden geïmplementeerd.
U kunt een Windows Phone-toepassing maken met de Silverlight-runtime (versie 8.0 of 8.1) of de WinRT-runtime (die van universele Windows-apps). Met de WinRT-runtime kunt u één toepassing maken die op Windows, Windows Phone en zelfs Xbox One wordt uitgevoerd.
We gebruiken het XAML-framework om een app voor meerdere platforms te ontwikkelen. In de huidige versie is er een API-convergentie van 90%, maar er is nog steeds een kleine set die nog niet is geconvergeerd. Windows Phone-functies die alleen beschikbaar zijn in het Silverlight-framework zijn:
In deze zelfstudie zal ik een universele Windows-app-sjabloon gebruiken om een Hex Clock-app te maken, een precieze hexadecimale kleurenklok. Het doorloopt het volledige kleurbereik van 24 uur, van # 000000 naar # 235959. Bij elke tik van de klok verandert de achtergrond van de app in de kleur die overeenkomt met de huidige tijd die is geconverteerd naar hexadecimaal. Het gebruikt dezelfde implementatie als Hex Color JS Clock om de hexadecimale code van de huidige tijd te genereren.
Het ontwerp is geïnspireerd op een Windows Phone 7 klok-app-tutorial over Tuts +. Hoewel de klok-app alleen op Windows Phone is gericht, gebruiken we het ontwerp om een vergelijkbare app te maken voor Windows Phone 8.1 en Windows 8.1. De onderstaande schermafbeelding laat zien wat we gaan bouwen.
In deze tutorial zal ik de volgende onderwerpen bespreken die relevant zijn voor het ontwikkelen van universele Windows-apps:
Een universele Windows-app is een verzameling van drie projecten ingesloten in een optionele oplossingsmap. De Windows- en Windows Phone-projecten zijn platformprojecten en zijn verantwoordelijk voor het maken van de toepassingspakketten (.appx), gericht op de respectieve platforms. Deze projecten bevatten activa die specifiek zijn voor het doelplatform.
Het gedeelde project is een container voor code die op beide platforms wordt uitgevoerd. Ze hebben geen binaire uitvoer, maar hun inhoud wordt geïmporteerd door de platformprojecten en gebruikt als onderdeel van het bouwproces om de app-pakketten te genereren (.appx).
De onderstaande schermafbeelding toont de oplossing die Visual Studio maakt wanneer u de projectsjabloon kiest voor een lege app (Universal Apps).
Visual Studio 2013 Update 2 introduceert de nieuwe functie die universele Windows-apps is. Download en installeer deze update voordat u begint met het bouwen van universele Windows-apps.
Wanneer u de oplossing uitvoert, is het project dat wordt uitgevoerd, het project dat is geselecteerd als het opstartproject. Om het opstartproject in te stellen, klikt u met de rechtermuisknop op het projectknooppunt in de Solution Explorer en kies de optie Instellen als opstartproject. U kunt het opstartproject snel van de Foutopsporingsdoel drop-down die nu alle mogelijke projecten in de oplossing opsomt.
Het project dat u kiest, wordt vetgedrukt weergegeven in de Solution Explorer. De beschikbare foutopsporingsdoelen veranderen bij het overschakelen van opstartprojecten.
Wanneer u code in een gedeeld project schrijft, kunt u de projectcontextswitcher in de navigatiebalk gebruiken om het platform te selecteren dat u actief target, dat op zijn beurt de IntelliSense-ervaring aanpast in de code-editor.
Als u een API gebruikt in gedeelde code die niet op beide platforms wordt ondersteund, wordt deze API door een foutmelding geïdentificeerd wanneer u het project bouwt. U hoeft het project niet te bouwen om te bevestigen dat u platformonafhankelijke API's gebruikt.
De volgende schermafbeelding toont een voorbeeld van de waarschuwingspictogrammen en IntelliSense voor een type dat alleen wordt ondersteund in Windows Phone-apps.
In het gedeelde project schrijf je meestal code die voor beide platforms geldt. Voor het isoleren van secties van code die platformspecifiek zijn, gebruikt u de #ifdef richtlijn. De constanten WINDOWS_APP en WINDOWS_PHONE_APP zijn voorgedefinieerd voor u.
Het volgende zijn de conditionele compilatieconstanten die u kunt gebruiken om platformspecifieke code te schrijven:
| C # | WINDOWS_APP | WINDOWS_PHONE_APP |
| C++ | WINAPI_FAMILY_PC_APP | WINAPI_FAMILY_PHONE_APP |
Wanneer u code in het gedeelde project schrijft, gebruikt de Visual Studio-code-editor een context die op het ene of het andere platform is gericht. In C # is de IntelliSense die u ziet terwijl u code schrijft, specifiek voor de context van de code-editor, specifiek voor Windows of Windows Phone.
Als u al een bestaande Windows 8.1-toepassing heeft, kunt u de Voeg Windows Phone 8.1 toe commando om een nieuw Windows Phone 8.1-project en een gedeeld project aan de oplossing toe te voegen. Een vergelijkbare optie is ook beschikbaar als u een Windows Phone 8.1-toepassing hebt en u ondersteuning voor Windows 8.1 wilt toevoegen.
Om ondersteuning voor het ene type apparaat of een ander apparaat toe te voegen, in de Solution Explorer, klik met de rechtermuisknop op het project en kies Voeg Windows Phone 8.1 toe of Windows 8.1 toevoegen.
Hier voegt Visual Studio een nieuw Windows Phone- of Windows-project aan de oplossing toe. Een gedeeld project wordt ook automatisch voor u gemaakt.
De volgende schermafbeelding toont een oplossing na het toevoegen van een Windows Phone-project aan een bestaand Windows-project. Het gedeelde project dat aan de oplossing wordt toegevoegd, is aanvankelijk leeg.
Merk op dat als u een app maakt met behulp van een universele Windows-app-sjabloon, het gedeelde project al de App.xaml het dossier.
U kunt elke code verplaatsen die u tussen apps wilt delen met het gedeelde project. U kunt bijvoorbeeld de verplaatsen Gemeenschappelijk, datamodel, en strings mappen naar het gedeelde project. Je kunt zelfs bewegen App.xaml naar het gedeelde project.
U kunt echter enkele compileerfouten ontvangen over de code die u naar het gedeelde project verplaatst. U kunt deze fouten oplossen door uw nieuwe app-project zodanig te configureren dat deze dezelfde verwijzingsreeks heeft als uw oorspronkelijke project.
De volgende schermafbeelding toont dezelfde assembly-referentie toegevoegd aan beide projecten.
Als uw gedeelde code API's gebruikt die specifiek zijn voor Windows, gebruikt u de #ifdef richtlijn met de WINDOWS_APP constant om dat gedeelte van de code te isoleren. Gebruik de WINDOWS_PHONE_APP constant om secties met code specifiek voor Windows Phone 8.1 te isoleren.
Wanneer u een nieuwe oplossing voor een universele Windows-app maakt, plaatst Visual Studio App.xaml in het gedeelde project. Als u een bestaand project converteert naar een universele Windows-app, kunt u verplaatsen App.xaml naar het gedeelde project handmatig. U moet de build action property van de pagina instellen op ApplicationDefinition na het verplaatsen van het bestand. Hier zijn de stappen die betrokken zijn:
U moet ook beslissen hoe u de eerste pagina van uw app wilt openen. Als u de App.xaml bestand en wil je voor elke app een andere startpagina gebruiken, moet je toevoegen #ifdef richtlijnen zoals hieronder getoond.
Accentsconagua
#if WINDOWS_APP if (! rootFrame.Navigate (typeof (HubPage))) #endif #if WINDOWS_PHONE_APP if (! rootFrame.Navigate (typeof (WindowsPhoneStartPage))) #endif gooi nieuwe uitzondering ("initialisatie mislukt"); Kies eerst een projectsjabloon voor een universele Windows-app in de Nieuw project dialoog venster. De volgende schermafbeelding toont de universele Windows-app-projectsjablonen die momenteel beschikbaar zijn voor C #.
Geef het project een naam. ik zal gebruiken Hex Clock Pro voor mijn project.
Het werk van de gebruikersinterface vindt grotendeels plaats in de platformspecifieke projecten, zodat u een gebruikersinterface kunt maken die er geweldig uitziet op pc, tablets en telefoons, maar die gemeenschappelijke gegevens, bronnen, componenten en zelfs weergaven delen modellen.
In plaats van afzonderlijke gebruikersinterfaces te bouwen voor de Windows Phone 8.1- en Windows 8.1-versies van Hex Clock Pro, definieer ik een gemeenschappelijk ontwerp in het gedeelde project. Ik moet gewoon een paar wijzigingen aanbrengen in de XAML van de klok-app op Tuts + om deze voor beide platforms te laten werken.
Zoals eerder besproken, kan code die gemeenschappelijk is voor beide platforms in het gedeelde project worden geplaatst. Code die platformspecifieke API's gebruikt, moet in een van de platformspecifieke projecten worden geplaatst. Je kunt zelfs gebruiken #ifdef richtlijnen om platformspecifieke code op te nemen in een gedeeld bestand.
Omdat de Hex Clock Pro-app geen API's gebruikt die platformspecifiek zijn, kan ik alle code in het gedeelde project plaatsen.
In MainPage.xaml.cs in het gedeelde project hebben we de #ifdef richtlijn om code specifiek voor Windows Phone te isoleren. De code is ingesloten #ifdef verbergt de statusbalk op Windows Phone.
public MainPage () this.InitializeComponent (); #if WINDOWS_PHONE_APP ApplicationView.GetForCurrentView (). SetDesiredBoundsMode (ApplicationViewBoundsMode.UseCoreWindow); #stop als
Ik heb de DispatcherTimer klasse om een eerste vinkje te geven wanneer het LayoutRoot raster is geladen. De timer object roept het timer_Tick functie op elk vinkje van de klok.
try DispatcherTimer timer = new DispatcherTimer (); timer.Tick + = timer_Tick; timer.Interval = nieuwe TimeSpan (0, 0, 0, 1); timer.Start (); timer_Tick (null, null); // Bel een eerste tik vang
De timer_Tick functie werkt de weergegeven tijd in de app bij en werkt tegelijkertijd de achtergrondkleur bij.
De achtergrondkleur is ingesteld op een hexadecimale kleur die overeenkomt met de huidige tijd.
HexColour-kleur = nieuwe HexColour (hexTime); SolidColorBrush bgBrush = nieuwe SolidColorBrush (Color.FromArgb (kleur.A, kleur.R, kleur.G, kleur.B)); LayoutRoot.Background = bgBrush;
Een object van de HexColour klasse wordt geïnitialiseerd met de huidige tijd, waarbij de bijbehorende RGB-waarden worden geretourneerd. De constructeur van de HexColour class stelt de A, R, G, B waarden in voor de opgegeven kleur.
openbare HexColour (string hexCode) if (hexCode == null) gooi nieuwe ArgumentNullException ("hexCode"); if (! Regex.IsMatch (hexCode, HEX_PATTERN)) gooi nieuwe ArgumentException ("Format moet # 000000 of # FF000000 zijn (geen extra witruimte)", "hexCode"); // scheer uit '#' symbool hexCode = hexCode.TrimStart ('#'); // als geen alpha-waarde is opgegeven, neemt u geen transparantie (0xFF) aan als (hexCode.Length! = LENGTH_WITH_ALPHA) hexCode = String.Format ("FF 0", hexCode); _color = nieuwe kleur (); _color.A = byte.Parse (hexCode.Substring (0, 2), NumberStyles.AllowHexSpecifier); if (_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); Ik heb de aanvankelijke animatie geïmiteerd die in de vorige klokapp op Tuts + werd gebruikt en deze is geïnitialiseerd wanneer de LayoutRoot is geladen.
Storyboard sb = (Storyboard) this.Resources ["IntialAnimation"]; sb.BeginTime = TimeSpan.FromSeconds (0.1); sb.Begin ();
Dit is alles wat we nodig hebben om de Hex Clock Pro-app te bouwen. De app maakt gebruik van 100% gedeelde code. U hoeft alleen afzonderlijke app-pakketten voor beide platforms te genereren. De app lijkt erg op Windows Phone en gebruikt dezelfde XAML-code voor de gebruikersinterface.
Merk op dat ik alle XAML- en C # -code in het gedeelde project heb toegevoegd, maar wanneer ik ofwel de Windows-app of de Windows Phone-app implementeer, wordt de code in het gedeelde project intern samengevoegd met de platformspecifieke projecten.
Het grootste deel van de code voor de Windows-app en de Windows Phone-app wordt gedeeld, en hoewel de gebruikersinterfaces gescheiden zijn, zijn ze vergelijkbaar genoeg om beide te bouwen is minder werk dan het bouwen van twee gebruikersinterfaces.
Als ik een Windows Phone-versie van Hex Clock Pro voor Windows Phone 7 of 8 had gebouwd, zou het veel meer werk zijn geweest sinds Windows Phone 7 geen WinRT-API's bevat en Windows Phone 8 slechts een kleine subset bevat.
Met Windows 10 zullen we meer convergentie zien, wat betekent dat één API - de WinRT API - voor meerdere platforms, en een hoge mate van betrouwbaarheid tussen gebruikersinterface-elementen voor elk platform dat niet verhindert dat ontwikkelaars platformspecifieke elementen gebruiken om te presenteren de best mogelijke ervaring op elk apparaat. Download de bronbestanden van de zelfstudie om te gebruiken als referentie. Hex Clock Pro is ook beschikbaar op de markt voor Windows Phone 8.1 en Windows 8.1.
