Creare un'app "Hello, World!" App UWP in C++/CX

Articolo
10/07/2023

Importante

Questa esercitazione usa C++/CX. Microsoft ha rilasciato C++/WinRT, una proiezione di linguaggio nuova, interamente standard, moderna di C++ 17 per le API di Windows Runtime (WinRT). Per altre informazioni su questo linguaggio, vedere C++/WinRT.

Con Microsoft Visual Studio, è possibile usare C++/CX per sviluppare un'app da eseguire in Windows con un'interfaccia utente definita in XAML (Extensible Application Markup Language).

Nota

Questa esercitazione usa Visual Studio Community 2019. Se usi una versione diversa di Visual Studio, la visualizzazione potrebbe essere leggermente diversa.

Prima di iniziare

Per completare questa esercitazione, è necessario usare Visual Studio Community oppure una delle versioni di Visual Studio non Community in un computer in cui è in esecuzione Windows. Qui è possibile scaricare tutti gli strumenti necessari.
Per seguire questa procedura, è necessario avere una conoscenza di base di C++/CX, di XAML e dei concetti descritti in Panoramica di XAML.
È necessario usare il layout di finestra predefinito in Visual Studio. Per ripristinare il layout predefinito, nella barra dei menu scegliere Finestra>Reimposta layout finestra.

Confronto tra app desktop e app UWP scritte in C++

Se si ha esperienza nella programmazione per desktop Windows con C++, si noterà probabilmente che alcuni aspetti della scrittura di app per la piattaforma UWP sono molto familiari, mentre per altri è necessario un approfondimento.

Cosa rimane uguale?

È possibile usare STL, CRT (con alcune eccezioni) e qualsiasi altra libreria C++, a condizione che il codice chiami solo funzioni di Windows accessibili dall'ambiente Windows Runtime.
Se si è abituati a finestre di progettazione visive, è comunque possibile usare la finestra di progettazione inclusa in Microsoft Visual Studio oppure il più completo Blend per Visual Studio. Se si è abituati a scrivere manualmente il codice per l'interfaccia utente, è possibile scrivere a mano il codice XAML.
Si tratta sempre di creare app che usano il sistema operativo Windows e i tipi personalizzati.
Si usano ancora il debugger, il profiler e gli altri strumenti di sviluppo di Visual Studio.
Si tratta ancora di creare app che vengono compilate in codice macchina nativo dal compilatore di Visual C++. Le app UWP scritte in C++/CX non vengono eseguite in un ambiente di runtime gestito.

Novità

I principi di progettazione per le app UWP sono molto diversi da quelli per le app desktop. I bordi delle finestre, le etichette, le finestre di dialogo e così via hanno meno importanza. In primo piano c'è il contenuto. Le app UWP migliori incorporano questi principi sin dall'inizio della fase di pianificazione.
Si usa XAML per definire l'intera interfaccia utente. La separazione tra interfaccia utente e logica centrale del programma è molto più chiara in un'app UWP che in un'app MFC o Win32. Altre persone possono lavorare all'aspetto dell'interfaccia utente nel file XAML mentre ci si occupa del comportamento nel file di codice.
Per programmare si usa principalmente una nuova API orientata agli oggetti e facile da esplorare, Windows Runtime, anche se Win32 è ancora disponibile per alcune funzionalità nei dispositivi Windows.
Si usa C++/CX per usare e creare oggetti di Windows Runtime. C++/CX consente la gestione delle eccezioni, i delegati, gli eventi e il conteggio dei riferimenti automatico degli oggetti creati in modo dinamico, come nel linguaggio C++. Quando si usa C++/CX, i dettagli dell'architettura COM e Windows sottostante sono nascosti dal codice dell'app. Per altre informazioni, vedere i Riferimenti per il linguaggio C++/CX.
L'applicazione viene compilata in un pacchetto che contiene anche i metadati relativi ai tipi nell'app, alle risorse usate e alle funzionalità richieste, come accesso a file, accesso a Internet, accesso alla webcam e così via.
In Microsoft Store e in Windows Phone Store viene eseguita una verifica della sicurezza dell'app tramite un processo di certificazione e l'app diventa poi individuabile per milioni di potenziali clienti.

App di Windows Store Hello World scritta in C++/CX

La nostra prima app è un'app "Hello World" che mostra alcune funzionalità di base per interattività, layout e stili. Creeremo un'app dal modello di progetto di app universale di Windows. Se si ha già esperienza con lo sviluppo di app per Windows 8.1 e Windows Phone 8.1, probabilmente si è a conoscenza della necessità di avere tre progetti in Visual Studio, uno per l'app di Windows, uno per l'app del telefono e uno per il codice condiviso. La piattaforma UWP (Universal Windows Platform) di Windows consente di avere un solo progetto eseguibile su tutti i dispositivi, inclusi computer desktop e portatili che eseguono Windows, dispositivi come tablet e cellulari, dispositivi VR e così via.

Inizieremo con le nozioni fondamentali:

Come creare un progetto di Windows universale in Visual Studio.
Informazioni sui progetti e i file creati.
Informazioni sulle estensioni dei componenti Visual C++ (C++/CX) e su quando usarle.

Per prima cosa, creare una soluzione in Visual Studio

Nella barra dei menu di Visual Studio scegli File>Nuovo>Progetto.
Nella finestra di dialogo Crea un nuovo progetto seleziona App vuota (Windows universale - C++/CX). Se questa opzione non è visualizzata, verifica che gli strumenti per lo sviluppo di app di Windows universale siano installati. Per altre informazioni, vedi Effettua la configurazione.

C++/CX project templates in the Create a new project dialog box

Scegli Avanti e quindi immetti un nome per il progetto. Lo chiameremo HelloWorld.
Scegli il pulsante Crea.

Nota

Se questa è la prima volta che si usa Visual Studio, è possibile che venga visualizzata la finestra di dialogo Impostazioni in cui viene richiesto di abilitare Modalità sviluppatore. Si tratta di un'impostazione particolare che permette di abilitare determinate funzionalità, ad esempio l'autorizzazione per eseguire le app direttamente, anziché solo dallo Store. Per altre informazioni, leggere Abilitare il dispositivo per lo sviluppo. Per continuare con questa Guida, seleziona Modalità sviluppatore, fai clic su Sì e chiudi la finestra di dialogo.

Vengono creati i file di progetto.

Prima di continuare, esaminiamo il contenuto della soluzione.

Universal app solution with nodes collapsed

Informazioni sui file di progetto

Per ogni file con estensione xaml in una cartella di progetto esiste un file con estensione xaml.h e xaml.cpp corrispondente nella stessa cartella e un file con estensione g.hpp nella cartella File generati, che si trova sul disco ma non fa parte del progetto. È possibile modificare i file XAML per creare elementi dell'interfaccia utente e connetterli alle origini dati (DataBinding). È possibile modificare i file con estensione h e cpp per aggiungere logica personalizzata per i gestori eventi. I file generati automaticamente rappresentano la trasformazione del markup XAML in C++/CX. Non modificare questi file, ma studiarli per capire meglio il funzionamento del code-behind. Sostanzialmente, il file generato contiene una definizione di classe parziale per un elemento radice XAML. Questa classe è la stessa che è possibile modificare nei file *.xaml.h e cpp. I file generati dichiarano gli elementi figlio dell'interfaccia utente XAML come membri della classe, in modo che sia possibile farvi riferimento nel codice che si scrive. In fase di compilazione, il codice generato e quello scritto in prima persona vengono uniti in una definizione di classe completa e poi compilati.

Esaminiamo prima di tutto i file di progetto.

App.xaml, App.xaml.h, App.xaml.cpp: rappresentano l’oggetto Application, ovvero il punto di ingresso di un'app. App.xaml non contiene markup per l'interfaccia utente specifica delle pagine, ma è possibile aggiungere stili di interfaccia utente e altri elementi da rendere accessibili da qualsiasi pagina. I file code-behind contengono i gestori per gli eventi OnLaunched e OnSuspending. In genere, è possibile aggiungere codice personalizzato in questa posizione per inizializzare l'app all'avvio ed eseguire le operazioni di pulizia quando viene sospesa o terminata.
MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp:contengono il markup XAML e il code-behind per la pagina iniziale predefinita di un'app. Non includono il supporto per la navigazione o controlli predefiniti.
pch.h, pch.cpp: un file di intestazione precompilato e il file che lo include nel progetto. Nel file pch.h è possibile includere qualsiasi intestazione non soggetta a modifiche frequenti e inclusa in altri file nella soluzione.
Package.appxmanifest: un file XML che descrive le funzionalità del dispositivo richieste dall'app, con informazioni sulla versione dell'app e altri metadati. È sufficiente fare doppio clic su questo file per aprirlo in Progettazione manifesto.
HelloWorld_TemporaryKey.pfx: una chiave che consente di distribuire l'app nel computer in uso, da Visual Studio.

Una prima occhiata al codice

Se si esamina il codice nei file App.xaml.h e App.xaml.cpp nel progetto condiviso, si noterà che si tratta in gran parte di codice C++ dall'aspetto familiare. Alcuni elementi della sintassi, tuttavia, potrebbero non essere così familiari se non si conoscono le app Windows Runtime o si è lavorato con C++/CLI. Ecco gli elementi della sintassi non standard più comuni in C++/CX:

Classi di riferimento

Praticamente tutte le classi di Windows Runtime, che includono tutti i tipi nell'API Windows (i controlli XAML, le pagine nell'app, la classe App stessa, tutti gli oggetti per dispositivi e rete e tutti i tipi di contenitore) sono dichiarati come ref class. Alcuni tipi di Windows sono dichiarati come value class o value struct. Una classe di riferimento può essere usata da qualsiasi linguaggio. In C++/CX, la durata di questi tipi è governata dal conteggio dei riferimenti automatico (non da garbage collection), quindi questi oggetti non vengono mai eliminati in modo esplicito. È anche possibile creare classi di riferimento personalizzate.

namespace HelloWorld
{
   /// <summary>
   /// An empty page that can be used on its own or navigated to within a Frame.
   /// </summary>
   public ref class MainPage sealed
   {
      public:
      MainPage();
   };
}

Tutti i tipi di Windows Runtime devono essere dichiarati all'interno di uno spazio dei nomi e, diversamente da C++ ISO, per i tipi stessi esiste un modificatore dell'accessibilità. Il modificatore public rende la classe visibile per i componenti Windows Runtime all'esterno dello spazio dei nomi. La parola chiave sealed indica che la classe non può fungere da classe di base. Per quasi tutte le classi di riferimento è stato eseguito il sealing. L'ereditarietà delle classi non è molto usata, perché non interpretabile da JavaScript.

ref new e ^ (hat)

Per dichiarare una variabile di una classe di riferimento, usare l'operatore ^ (hat) e creare un'istanza dell'oggetto con la parola chiave ref new. Successivamente, si può accedere ai metodi dell'istanza dell'oggetto con l'operatore ->, come con un puntatore C++. Per accedere ai metodi statici si usa l'operatore ::, proprio come in C++ ISO.

Nel codice seguente usiamo il nome completo per creare un'istanza di un oggetto e l'operatore -> per chiamare un metodo di istanza.

Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
     ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();

bitmapImage->SetSource(fileStream);

Di solito, in un file cpp aggiungeremmo una direttiva using namespace Windows::UI::Xaml::Media::Imaging e la parola chiave auto. Lo stesso codice sarebbe così simile al seguente:

auto bitmapImage = ref new BitmapImage();
bitmapImage->SetSource(fileStream);

Proprietà

Una classe di riferimento può avere proprietà, che proprio come nei linguaggi gestiti, sono funzioni membro speciali visualizzate come campi per il codice che le usa.

public ref class SaveStateEventArgs sealed
{
   public:
   // Declare the property
   property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
   {
      Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
   }
   ...
};

   ...
   // consume the property like a public field
   void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {    
      if (mruToken != nullptr && !mruToken->IsEmpty())
   {
      e->PageState->Insert("mruToken", mruToken);
   }
}

Delegati

Come nei linguaggi gestiti, un delegato è un tipo di riferimento che incapsula una funzione con una firma specifica. I delegati vengono usati principalmente con eventi e gestori eventi

// Delegate declaration (within namespace scope)
public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);

// Event declaration (class scope)
public ref class NavigationHelper sealed
{
   public:
   event LoadStateEventHandler^ LoadState;
};

// Create the event handler in consuming class
MainPage::MainPage()
{
   auto navigationHelper = ref new Common::NavigationHelper(this);
   navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
}

Aggiunta di contenuto all'app

Aggiungiamo contenuto all'app.

Passaggio 1: Modificare la pagina iniziale

In Esplora soluzioni aprire MainPage.xaml.

Creare i controlli per l’interfaccia utente aggiungendo il codice XAML seguente al controllo Grid radice, subito prima del tag di chiusura. Questo codice contiene un elemento StackPanel con un elemento TextBlock per richiedere il nome dell'utente, un TextBox che accetta il nome dell'utente, un elemento Button e un altro elemento TextBlock.

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
    <TextBlock Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

A questo punto è stata creata un'app di Windows universale molto semplice. Per vedere l'aspetto dell'app UWP, premere F5 per compilare, distribuire ed eseguire l'app in modalità di debug.

Viene prima di tutto visualizzata la schermata iniziale predefinita. La schermata include un'immagine (Assets\SplashScreen.scale-100.png) e un colore di sfondo specificati nel file manifesto dell'app. Per informazioni su come personalizzare la schermata iniziale, vedere Aggiunta di una schermata iniziale.

Quando la schermata iniziale scompare, viene visualizzata l'app. Mostra la pagina principale dell'app.

UWP app screen, with controls

L'app non esegue molte funzioni per il momento, ma è stata comunque creata la app per piattaforma UWP (Universal Windows Platform).

Per arrestare il debug e chiudere l'app, tornare a Visual Studio e premere MAIUSC+F5.

Per altre informazioni, vedere Eseguire app dello Store da Visual Studio.

Nell'app è possibile digitare nel controllo TextBox, ma facendo clic sul pulsante Button non viene eseguita alcuna operazione. Nei passaggi successivi si creerà un gestore eventi per l'evento Click del pulsante, che mostrerà un messaggio di saluto personalizzato.

Passaggio 2: Creare un gestore eventi

In MainPage.xaml, nella visualizzazione XAML o Progettazione selezionare l'elemento Button "Say Hello" aggiunto in precedenza a StackPanel.
Aprire la Finestra Proprietà premendo F4 e quindi scegliere il pulsante Eventi ().
Trovare l'evento Click. Nella casella di testo digitare il nome della funzione che gestisce l'evento Click. Per questo esempio, digitare "Button_Click".
Premere INVIO. Il metodo del gestore eventi viene creato in MainPage.xaml.cpp e aperto, in modo che sia possibile aggiungere il codice che viene eseguito quando si verifica l'evento.

Nello stesso tempo, in MainPage.xaml, il codice XAML per l’elemento Button viene aggiornato per dichiarare il gestore eventi Click, in questo modo:

<Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>

Sarebbe stato possibile anche aggiungerlo manualmente al codice XAML, operazione utile se la finestra di progettazione non viene caricata. Per immettere il codice manualmente, digitare "Click" e aspettare che IntelliSense visualizzi l'opzione per aggiungere un nuovo gestore eventi. In questo modo, Visual Studio crea lo stub e la dichiarazione del metodo necessari.

La finestra di progettazione non viene caricata se durante il rendering si verifica un'eccezione non gestita. Il rendering prevede l'esecuzione di una versione in fase di progettazione della pagina. Può essere utile disabilitare l'esecuzione del codice utente. A questo scopo, modificare l'impostazione nella finestra di dialogo Strumenti, Opzioni. In Finestra di progettazione XAML deselezionare Esegui il codice del progetto nella finestra di progettazione XAML (se supportata).

In MainPage.xaml.cpp aggiungere il codice seguente al gestore eventi Button_Click appena creato. Questo codice recupera il nome utente dal controllo nameInputTextBox e lo usa per creare un saluto. Il risultato viene visualizzato nel controllo greetingOutputTextBlock.

void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}

Impostare il progetto come progetto di avvio e quindi premere F5 per compilare ed eseguire l'app. Quando si digita un nome nella casella di testo e si fa clic sul pulsante, l'app visualizza un saluto personalizzato.

App screen with message display

Passaggio 3: Applicare uno stile alla pagina iniziale

Scelta di un tema

È possibile personalizzare facilmente l'aspetto dell'app. Per impostazione predefinita, l'app usa risorse con un tema chiaro. Le risorse di sistema includono anche un tema chiaro. Proviamo a vedere che aspetto ha.

Per passare al tema scuro

Aprire App.xaml.

Nel tag Application di apertura modificare la proprietà RequestedTheme e impostare il valore corrispondente su Dark:

RequestedTheme="Dark"

Ecco il tag Application completo con il tema scuro:

<Application
x:Class="HelloWorld.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorld"
RequestedTheme="Dark">

Premere F5 per compilare ed eseguire l'app. Notare che l'app ora usa il tema scuro.

Quale tema è meglio usare? Quello che si preferisce. Ecco il nostro suggerimento: per le app che visualizzano principalmente immagini o video consigliamo di usare il tema scuro, riservando invece il tema chiaro alle app che contengono molto testo. Se si usa una combinazione colori personalizzata, scegliere il tema che meglio si addice all'aspetto dell'app. Nella parte rimanente di questa esercitazione, negli screenshot viene usato il tema chiaro.

Nota Il tema viene applicato all'avvio dell'app e non può essere modificato mentre l'app è in esecuzione.

Uso degli stili di sistema

In questo momento, il testo nell'app di Windows è molto piccolo e difficile da leggere. Risolviamo il problema applicando uno stile di sistema.

Per cambiare lo stile di un elemento

Nel progetto Windows aprire MainPage.xaml.
Nella visualizzazione XAML o Progettazione selezionare l'elemento TextBlock "What's your name?" aggiunto in precedenza.
Nella finestra Proprietà (F4) scegliere il pulsante Proprietà () in alto a destra.
Espandere il gruppo Testo e impostare le dimensioni del carattere su 18 pixel.
Espandere il gruppo Varie e trovare la proprietà Stile.
Fare clic sull'indicatore di proprietà (la casella verde a destra della proprietà Stile) e quindi scegliere Risorsa di sistema>BaseTextBlockStyle dal menu.

BaseTextBlockStyle è una risorsa definita in ResourceDictionary in <root>Programmi\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.

Nell'area di progettazione XAML l'aspetto del testo cambia. Nell’editor XAML viene aggiornato il codice XAML per l'elemento TextBlock:

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

Ripetere la procedura per impostare le dimensioni dei caratteri e assegnare BaseTextBlockStyle all'elemento greetingOutputTextBlock.

Suggerimento Anche se il controllo TextBlock non contiene testo, quando si sposta il puntatore del mouse sull'area di progettazione XAML, viene visualizzato un contorno blu che indica la posizione del controllo per consentirne la selezione.

Il codice XAML dovrebbe essere simile al seguente:

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
</StackPanel>

Premere F5 per compilare ed eseguire l'app. Ora ha questo aspetto:

App screen with larger text

Passaggio 4: Adattare l'interfaccia utente a diverse dimensioni della finestra

Ora adatteremo l'interfaccia utente a dimensioni dello schermo diverse in modo che risulti perfetta nei dispositivi mobili. A questo scopo, aggiungere VisualStateManager e impostare le proprietà applicate per stati di visualizzazione diversi.

Per regolare il layout dell'interfaccia utente

Nell'editor XAML aggiungere questo blocco di codice XAML dopo il tag di apertura dell'elemento Grid.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="narrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Eseguire il debug dell'app nel computer locale. Notare che l'interfaccia utente è identica a prima, a meno che la finestra non sia più stretta di 641 DIP (Device-Independent Pixel).
Eseguire il debug dell'app nell'emulatore di dispositivo mobile. Notare che l'interfaccia utente usa le proprietà definite in narrowState e viene visualizzata correttamente sullo schermo piccolo.

Mobile app screen with styled text

Se nelle versioni precedenti di XAML è stato usato VisualStateManager, si noterà che qui XAML usa una sintassi semplificata.

L'oggetto VisualState denominato wideState ha AdaptiveTrigger con la proprietà MinWindowWidth impostata su 641. Ciò significa che lo stato deve essere applicato solo quando la larghezza della finestra non è inferiore a quella minima di 641 DIP. Non viene definito alcun oggetto Setter per questo stato, vengono quindi usate le proprietà di layout definite nel codice XAML per il contenuto della pagina.

Il secondo oggetto VisualState, narrowState, ha AdaptiveTrigger con la proprietà MinWindowWidth impostata su 0. Questo stato viene applicato quando la larghezza della finestra è maggiore di 0, ma minore di 641 DIP. (A 641 DIP, viene applicato wideState). In questo stato, definire alcuni oggetti Setter per cambiare le proprietà di layout dei controlli dell’interfaccia utente:

Ridurre il margine sinistro dell'elemento contentPanel da 120 a 20.
Cambiare la proprietà Orientation dell'elemento inputPanel da Horizontal a Vertical.
Aggiungere un margine superiore di 4 DIP all'elemento inputButton.

Riepilogo

Complimenti per aver completato la prima esercitazione. Si è visto come aggiungere contenuto alle app universali di Windows, come aggiungere interattività e come modificarne l'aspetto.

Passaggi successivi

Se si ha un progetto per app universale di Windows per Windows 8.1 e/o Windows Phone 8.1 è possibile convertirlo in Windows 10 o Windows 11. Non esiste un processo automatico per questa operazione, che però può essere eseguita manualmente. Iniziare da un nuovo progetto Windows universale per ottenere i file della struttura di sistema del progetto e di manifesto più recenti, copiare i file di codice nella struttura di directory del progetto, aggiungere gli elementi al progetto e riscrivere il codice XAML con VisualStateManager, in base alle indicazioni fornite in questo argomento. Per altre informazioni, vedere Conversione di un progetto di Windows Runtime 8 in progetto UWP (Universal Windows Platform) e Conversione nella piattaforma UWP (C++).

Per integrare il codice C++ esistente con un’app UWP, ad esempio per creare una nuova interfaccia utente UWP per un'applicazione esistente, vedere Procedura: Usare il codice C++ esistente in un progetto Windows universale.