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

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).

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. Per scaricare, vedi Ottieni gli strumenti.
• 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 superfici di progettazione visiva, è 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 i tipi del sistema operativo Windows e i tuoi tipi personalizzati.

• Si usano ancora il debugger, il profiler e gli altri strumenti di sviluppo di Visual Studio.

• Stai ancora creando 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.

Cosa c'è di nuovo?

• 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. Il contenuto viene prima. 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 automatico dei riferimenti degli oggetti creati dinamicamente. Quando si usa C++/CX, i dettagli dell'architettura COM e Windows sottostante sono nascosti al codice dell'app. Per altre informazioni, vedere Guida di riferimento del 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.

• Nella Microsoft Store l'app viene verificata come sicura da un processo di certificazione e resa individuabile a milioni di potenziali clienti.

app Hello World Store 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. Piattaforma UWP (Universal Windows Platform) consente di usare un singolo progetto per il codice e XAML dell'app ed eseguire l'app su computer desktop, portatili e tablet Windows.

Inizieremo con le nozioni fondamentali:

• Come creare un progetto di Windows universale in Visual Studio.

• Come comprendere i progetti e i file creati.

• Come comprendere le estensioni dei componenti Visual C++ (C++/CX) e quando usarle.

Per prima cosa, creare una soluzione in Visual Studio

1. Nella barra dei menu di Visual Studio scegli File>Nuovo>Progetto....

2. 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.

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

4. Scegli il pulsante Crea.

I file di progetto sono stati creati.

Prima di continuare, esaminiamo il contenuto della soluzione.

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 e .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 il tuo codice 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 include 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 header non soggetto a modifiche frequenti e incluso 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 Manifest Designer.
• 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 dichiarate come ref class. Alcuni tipi di Windows sono dichiarati come value class o value struct. Una ref class è utilizzabile 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 ai componenti Windows Runtime esterni allo spazio dei nomi. La parola chiave sealed indica che la classe non può fungere da classe di base. Quasi tutte le classi ref sono sealed; l'ereditarietà delle classi non è molto usata, perché JavaScript non la supporta.

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 completamente qualificato 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, in modo che lo stesso codice apparirebbe così:

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

Proprietà

Una ref class 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. Essi 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 dei contenuti all'app.

Passaggio 1: Modificare la pagina iniziale

1. In Esplora soluzioni, apri MainPage.xaml.

2. Creare i controlli per l’interfaccia utente aggiungendo il codice XAML seguente alla 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>
   

3. 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 manifest 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.

L'app non esegue molte funzioni per il momento, ma congratulazioni, hai creato la tua prima app per piattaforma UWP (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 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 di eventi

1. In MainPage.xaml, nella visualizzazione XAML o Progettazione, selezionare l'elemento Button "Say Hello" in StackPanel aggiunto in precedenza.

2. Aprire la Finestra Proprietà premendo F4 e quindi scegliere il pulsante Eventi ().

3. Trovare l'evento Click. Nella casella di testo digitare il nome della funzione che gestisce l'evento Click. Per questo esempio, digitare "Button_Click".

   

4. 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 il designer non viene caricato. Se lo si immette 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).

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

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

6. 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.

Passaggio 3: Applicare uno stile alla pagina iniziale

Scegliere 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

1. Apri App.xaml.

2. 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">
   

3. Premere F5 per compilare ed eseguire l'app. Nota che usa il tema scuro.

   

Quale tema è meglio usare? Quello che vuoi. 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

1. Nel progetto Windows, apri MainPage.xaml.

2. Nella visualizzazione XAML o Progettazione selezionare l'elemento TextBlock "What's your name?" aggiunto in precedenza.

3. Nella finestra Proprietà (F4) scegliere il pulsante Proprietà () in alto a destra.

4. Espandere il gruppo Testo e impostare le dimensioni del carattere su 18 pixel.

5. Espandere il gruppo Varie e trovare la proprietà Stile.

6. Fare clic sull'indicatore di proprietà (la casella verde a destra della proprietà Style) 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}"/>

7. 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>

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

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

1. Nell'editor XAML aggiungere questo blocco di codice XAML dopo il tag di apertura dell'elemento radice 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>

2. Esegui il debug dell'app sul 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).
3. Eseguire il debug dell'app nell'emulatore di dispositivo mobile. Notare che l'interfaccia utente usa le proprietà che hai definito in narrowState e viene visualizzata correttamente sullo schermo piccolo.

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 al minimo 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, si definiscono 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 l'Orientation dell'elemento inputPanel da Horizontal a Vertical.
• Aggiungere un margine superiore di 4 DIP all'elemento inputButton.

Riepilogo

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

Passaggi successivi

Per convertire un progetto di app Windows Runtime precedente in Windows 10 o Windows 11, iniziare con un nuovo progetto universale Windows per ottenere la struttura di sistema del progetto e i file manifesto più recenti, copiare i file di codice nella struttura di directory del progetto, aggiungere gli elementi al progetto e riscrivere il codice XAML usando VisualStateManager in base alle indicazioni contenute in questo argomento. Per altre informazioni, vedere Porting di un progetto Windows Runtime 8 a un progetto UWP (piattaforma UWP (Universal Windows Platform)) e Porting a piattaforma UWP (Universal Windows Platform) (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.