Share
Le app universali di Windows ti consentono di indirizzare ogni dispositivo Windows in un'unica soluzione. Si sviluppa una volta, si condivide la maggior parte del codice e si esegue la distribuzione su Windows, Windows Phone o Xbox.
L'obiettivo è massimizzare il riutilizzo del codice. È possibile condividere codice, controlli utente, stili, stringhe e altre risorse tra i progetti Windows Phone e Windows 8 in Visual Studio. Ciò riduce lo sforzo necessario per creare e mantenere un'app per ogni tipo di dispositivo.
Dal punto di vista dello sviluppatore, un'app universale per Windows non è un singolo binario eseguito su piattaforme multiple. Piuttosto, assume la forma di una soluzione di Visual Studio contenente più progetti, un progetto per ciascuna piattaforma mirata oltre a un progetto condiviso contenente codice e risorse condivise tra piattaforme. È possibile condividere molto codice tra i progetti in quanto Windows Phone 8.1 implementa la maggior parte delle API WinRT implementate da Windows 8.1.
È possibile creare un'applicazione Windows Phone utilizzando il runtime Silverlight (versione 8.0 o 8.1) o il runtime WinRT (quello delle app universali di Windows). Il runtime di WinRT consente di creare un'applicazione che verrà eseguita su Windows, Windows Phone e persino su Xbox One.
Stiamo utilizzando il framework XAML per sviluppare un'app per più piattaforme. Nella versione attuale c'è una convergenza API del 90%, ma c'è ancora un piccolo set non ancora convergente. Le funzionalità di Windows Phone disponibili solo nel framework Silverlight sono:
In questo tutorial, utilizzerò un modello di app universale per Windows per creare un'app Hex Clock, un preciso orologio a colori esadecimale. Passa attraverso l'intera gamma di colori di 24 ore, da # 000000 a # 235959. Ad ogni ticchettio dell'orologio, lo sfondo dell'app cambia in colore corrispondente all'ora corrente convertita in esadecimale. Utilizza la stessa implementazione di Hex Color JS Clock per generare il codice esadecimale del tempo corrente.
Il design è stato ispirato da un tutorial di app per l'orologio di Windows Phone 7 su Tuts +. Mentre l'app orologio si rivolge solo a Windows Phone, utilizzeremo il suo design per creare un'app simile per Windows Phone 8.1 e Windows 8.1. Lo screenshot qui sotto mostra ciò che costruiremo.
In questo tutorial, discuterò i seguenti argomenti che sono rilevanti per lo sviluppo di app universali di Windows:
Un'app universale di Windows è una raccolta di tre progetti racchiusi in una cartella della soluzione opzionale. I progetti Windows e Windows Phone sono progetti di piattaforma e sono responsabili della creazione dei pacchetti dell'applicazione (.appx), indirizzati alle rispettive piattaforme. Questi progetti contengono asset specifici per la piattaforma.
Il progetto condiviso è un contenitore per il codice che viene eseguito su entrambe le piattaforme. Non hanno un output binario, ma i loro contenuti vengono importati dai progetti della piattaforma e utilizzati come parte del processo di generazione per generare i pacchetti dell'app (.appx).
Lo screenshot seguente mostra la soluzione che Visual Studio crea quando si sceglie il modello di progetto per un'app vuota (Universal Apps).
Visual Studio 2013 Update 2 introduce la nuova funzionalità che è app di Windows universale. Scarica e installa questo aggiornamento prima di iniziare a creare applicazioni universali di Windows.
Quando si esegue la soluzione, il progetto che viene eseguito è quello selezionato come progetto di avvio. Per impostare il progetto di avvio, fare clic con il tasto destro del mouse sul nodo del progetto nel Esploratore di soluzioni e scegliere l'opzione Imposta come progetto di avvio. È possibile passare rapidamente il progetto di avvio da Obiettivo di debug elenco a discesa che ora elenca tutti i possibili progetti nella soluzione.
Il progetto che scegli è mostrato in grassetto nel Esploratore di soluzioni. Gli obiettivi di debug disponibili cambiano quando si cambiano i progetti di avvio.
Quando scrivi un codice in un progetto condiviso, puoi utilizzare il selettore di contesto del progetto nella barra di navigazione per selezionare la piattaforma a cui stai attivamente mirando, che a sua volta personalizza l'esperienza IntelliSense nell'editor di codice.
Se si utilizza un'API in codice condiviso non supportato su entrambe le piattaforme, un messaggio di errore identificherà questa API quando si crea il progetto. Non è necessario creare il progetto per confermare che si stiano utilizzando API multipiattaforma.
La seguente schermata mostra un esempio delle icone di avviso e IntelliSense per un tipo supportato solo nelle app di Windows Phone.
Nel progetto condiviso, in genere si scrive codice comune a entrambe le piattaforme. Per isolare sezioni di codice specifiche della piattaforma, utilizzare #ifdef direttiva. Le costanti WINDOWS_APP e WINDOWS_PHONE_APP sono predefiniti per te.
Di seguito sono elencate le costanti di compilazione condizionale che è possibile utilizzare per scrivere il codice specifico della piattaforma:
| C # | WINDOWS_APP | WINDOWS_PHONE_APP |
| C++ | WINAPI_FAMILY_PC_APP | WINAPI_FAMILY_PHONE_APP |
Quando si scrive codice nel progetto condiviso, l'editor di codice di Visual Studio utilizza un contesto che si rivolge a una piattaforma o l'altra. In C #, IntelliSense che vedi mentre scrivi codice è specifico per il contesto dell'editor di codice, cioè specifico per Windows o per Windows Phone.
Se hai già un'applicazione Windows 8.1 esistente, puoi utilizzare il Aggiungi Windows Phone 8.1 comando per aggiungere un nuovo progetto Windows Phone 8.1 e un progetto condiviso alla soluzione. Un'opzione simile è disponibile anche se si dispone di un'applicazione Windows Phone 8.1 e si desidera aggiungere il supporto per Windows 8.1.
Per aggiungere supporto per un tipo di dispositivo o un altro, nel Esploratore di soluzioni, tasto destro del mouse sul progetto e scegliere Aggiungi Windows Phone 8.1 o Aggiungi Windows 8.1.
Qui, Visual Studio aggiunge un nuovo progetto Windows Phone o Windows alla soluzione. Anche un progetto condiviso viene creato automaticamente per te.
La seguente schermata mostra una soluzione dopo aver aggiunto un progetto Windows Phone a un progetto Windows esistente. Il progetto condiviso che viene aggiunto alla soluzione è inizialmente vuoto.
Tieni presente che se crei un'app utilizzando un modello di app universale per Windows, il progetto condiviso contiene già il App.xaml file.
È possibile spostare qualsiasi codice che si desidera condividere tra le app nel progetto condiviso. Ad esempio, puoi spostare il file Comune, DataModel, e stringhe cartelle al progetto condiviso. Puoi persino muoverti App.xaml al progetto condiviso.
È tuttavia possibile che si verifichino alcuni errori del compilatore relativi al codice trasferito nel progetto condiviso. Puoi risolvere questi errori configurando il tuo nuovo progetto per avere lo stesso insieme di riferimenti del tuo progetto iniziale.
La seguente schermata mostra lo stesso riferimento di assembly aggiunto a entrambi i progetti.
Se il tuo codice condiviso utilizza API specifiche per Windows, usa il #ifdef direttiva con il WINDOWS_APP costante per isolare quella sezione di codice. Utilizzare il WINDOWS_PHONE_APP costante per isolare sezioni di codice specifiche per Windows Phone 8.1.
Quando crei una nuova soluzione per un'app universale di Windows, Visual Studio inserisce App.xaml nel progetto condiviso. Se si converte un progetto esistente in un'app universale di Windows, è possibile spostarlo App.xaml al progetto condiviso manualmente. Dovrai impostare la proprietà di azione di costruzione della pagina su ApplicationDefinition dopo aver spostato il file. Ecco i passaggi coinvolti:
Devi anche decidere come vuoi aprire la prima pagina della tua app. Se condividi il App.xaml file e desidera utilizzare una pagina iniziale diversa per ogni app, è necessario aggiungere #ifdef direttive come mostrato di seguito.
Accentsconagua
#if WINDOWS_APP if (! rootFrame.Navigate (typeof (HubPage))) #endif #if WINDOWS_PHONE_APP if (! rootFrame.Navigate (typeof (WindowsPhoneStartPage))) #endif throw new Exception ("Impossibile creare la pagina iniziale"); In primo luogo, scegli un modello di progetto per un'applicazione universale di Windows in Nuovo progetto la finestra di dialogo. La seguente schermata mostra i modelli di progetto di app di Windows universali attualmente disponibili per C #.
Dai un nome al progetto. userò Hex Clock Pro per il mio progetto.
Per la maggior parte, il lavoro dell'interfaccia utente avviene nei progetti specifici della piattaforma, consentendo di creare un'interfaccia utente che si adatta perfettamente a PC, tablet e telefoni, ma che condivide dati, risorse, componenti e persino visualizzazioni comuni. Modelli.
Invece di creare interfacce utente separate per Windows Phone 8.1 e Windows 8.1 versioni di Hex Clock Pro, definisco un progetto comune nel progetto condiviso. Devo solo apportare alcune modifiche all'app XAML dell'orologio su Tuts + per farlo funzionare su entrambe le piattaforme.
Come discusso in precedenza, il codice comune a entrambe le piattaforme può essere inserito nel progetto condiviso. Il codice che utilizza le API specifiche della piattaforma deve essere inserito in uno dei progetti specifici della piattaforma. Puoi anche usarlo #ifdef direttive per includere il codice specifico della piattaforma in un file condiviso.
Poiché l'app Hex Clock Pro non utilizza alcuna API specifica della piattaforma, posso inserire tutto il codice nel progetto condiviso.
Nel MainPage.xaml.cs nel progetto condiviso, abbiamo usato il #ifdef direttiva per isolare il codice specifico per Windows Phone. Il codice incluso all'interno #ifdef nasconde la barra di stato su Windows Phone.
public MainPage () this.InitializeComponent (); #if WINDOWS_PHONE_APP ApplicationView.GetForCurrentView (). SetDesiredBoundsMode (ApplicationViewBoundsMode.UseCoreWindow); #finisci se
Ho usato il DispatcherTimer classe per chiamare un segno di spunta iniziale quando il LayoutRoot la griglia è caricata. Il Timer oggetto chiama il timer_Tick funzione su ogni ticchettio dell'orologio.
prova DispatcherTimer timer = new DispatcherTimer (); timer.Tick + = timer_Tick; timer.Interval = new TimeSpan (0, 0, 0, 1); timer.Start (); timer_Tick (null, null); // Chiama un segno di spunta iniziale catch
Il timer_Tick la funzione aggiorna il tempo visualizzato nell'app e, allo stesso tempo, aggiorna il colore dello sfondo.
Il colore di sfondo è impostato su un colore esadecimale che corrisponde all'ora corrente.
Colore esadecimale = nuovo HexColour (hexTime); SolidColorBrush bgBrush = new SolidColorBrush (Color.FromArgb (color.A, color.R, color.G, color.B)); LayoutRoot.Background = bgBrush;
Un oggetto del HexColour la classe viene inizializzata con l'ora corrente, restituendo i valori RGB corrispondenti. Il costruttore del HexColour class imposta i valori A, R, G, B per il colore specificato.
public HexColour (stringa hexCode) if (hexCode == null) lanciare una nuova ArgumentNullException ("hexCode"); if (! Regex.IsMatch (hexCode, HEX_PATTERN)) throw new ArgumentException ("Il formato deve essere # 000000 o # FF000000 (senza spazi bianchi extra)", "hexCode"); // elimina il simbolo '#' hexCode = hexCode.TrimStart ('#'); // se non è specificato alcun valore alfa, non assumere trasparenza (0xFF) if (hexCode.Length! = LENGTH_WITH_ALPHA) hexCode = String.Format ("FF 0", hexCode); _color = new Color (); _color.A = byte.Parse (hexCode.Substring (0, 2), NumberStyles.AllowHexSpecifier); se (_colore.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); Ho imitato l'animazione iniziale utilizzata nell'app precedente orologio su Tuts + e viene inizializzata quando il file LayoutRoot è caricato.
Storyboard sb = (Storyboard) this.Resources ["IntialAnimation"]; sb.BeginTime = TimeSpan.FromSeconds (0.1); sb.Begin ();
Questo è tutto ciò di cui abbiamo bisogno per costruire l'app Hex Clock Pro. L'app utilizza il 100% di codice condiviso. Hai solo bisogno di generare pacchetti di app separati per entrambe le piattaforme. L'app sembra molto simile su Windows Phone e utilizza lo stesso codice XAML per la sua interfaccia utente.
Si noti che ho aggiunto tutti i codici XAML e C # nel progetto condiviso, ma quando distribuisco l'app Windows o l'app Windows Phone, il codice nel progetto condiviso viene unito internamente con i progetti specifici della piattaforma.
La maggior parte del codice per l'app Windows e l'app Windows Phone è condivisa, e mentre le interfacce utente sono separate, sono abbastanza simili da costruirle sia meno lavoro che costruire due interfacce utente da zero.
Se avessi costruito una versione Windows Phone di Hex Clock Pro per Windows Phone 7 o 8, sarebbe stato molto più lavoro dal momento che Windows Phone 7 non contiene API WinRT e Windows Phone 8 contiene solo un piccolo sottoinsieme.
Con Windows 10, vedremo più convergenza, che significa una API, l'API WinRT, per piattaforme multiple, e un alto grado di fedeltà tra gli elementi dell'interfaccia utente per ogni piattaforma che non impedisce agli sviluppatori di utilizzare elementi specifici della piattaforma per presentare la migliore esperienza possibile su ogni dispositivo. Sentiti libero di scaricare i file sorgente del tutorial da usare come riferimento. Hex Clock Pro è anche disponibile sul mercato per Windows Phone 8.1 e Windows 8.1.
