Migrazione a Windows App SDK dell'app di esempio Photo Editor UWP (C++/WinRT)

Articolo
04/03/2024

Questo argomento è un case study dell'acquisizione dell'app di esempio Photo Editor UWP di C++/WinRT e della sua migrazione a Windows App SDK.

Iniziare clonando il repositori dell'app di esempio UWP e aprendo la soluzione in Visual Studio.

Importante

Per considerazioni e strategie per affrontare il processo di migrazione e su come configurare l'ambiente di sviluppo per la migrazione, vedere Strategia di migrazione globale.

Installare gli strumenti per Windows App SDK

Per configurare il computer di sviluppo, consultare Installare gli strumenti per Windows App SDK.

Importante

Sono disponibili argomenti sulle note di rilascio insieme all'argomento Canali di rilascio di Windows App SDK. Sono disponibili note sulla versione per ogni canale. Assicurarsi di controllare eventuali limitazioni e problemi noti nelle note di rilascio, perché potrebbero influire sui risultati del seguito di questo case study e/o dell'esecuzione dell'app migrata.

Crea un nuovo progetto

In Visual Studio, creare un nuovo progetto C++/WinRT dal modello di progetto App vuota in pacchetto (WinUI 3 in Desktop). Assegnare al progetto il nome PhotoEditor, deselezionare Inserisci soluzione e progetto nella stessa directory. Puoi specificare come destinazione la versione più recente (non l'anteprima) del sistema operativo client.

Nota

Si farà riferimento alla versione UWP del progetto di esempio (quella clonata dal suo repository) come soluzione/progetto di origine. Si farà riferimento alla versione Windows App SDK come soluzione progetto di destinazione.

Ordine in cui verrà eseguita la migrazione del codice

MainPage è un elemento importante e significativo dell'app. Ma se iniziassimo con la migrazione di quella versione, ci accorgeremmo presto che MainPage ha una dipendenza dalla vista DetailPage; e che DetailPage ha una dipendenza dal modello Photo. Per questa procedura dettagliata verrà quindi adottato questo approccio.

Si inizierà copiando i file di asset.
Si eseguirà quindi la migrazione del modello Photo.
Successivamente eseguiremo la migrazione della classe App (perché richiede un'aggiunta di alcuni membri da cui dipenderanno DetailPage e MainPage).
Si inizierà quindi a eseguire la migrazione delle visualizzazioni, a partire prima da DetailPage.
E alla fine si eseguirà la migrazione della visualizzazione MainPage .

Verranno copiati interi file del codice sorgente

In questa procedura dettagliata si copierà sui file di codice sorgente usando Esplora file. Se si preferisce copiare i contenuti del file, vedere la sezione Appendice copiare i contenuti del file del modello Photo alla fine di questo argomento per un esempio di come puoi farlo per Photo (e quindi applicare una procedura simile ad altri tipi nel progetto). Questa opzione comporta però molti più passaggi.

Copiare i file di asset

Nel clone del progetto di origine, in Esplora file, trovare la cartella Windows-appsample-photo-editor>PhotoEditor>Assets. In questa cartella sono disponibili otto file di asset. Selezionare questi otto file e copiarli negli Appunti.
Sempre in Esplora file, trovare la cartella corrispondente nel progetto di destinazione creato. Il percorso della cartella è PhotoEditor>PhotoEditor>Assets. Incollare nella cartella i file di asset appena copiati e accettare la richiesta di sostituire i sette file già esistenti nella destinazione.
Nel progetto di destinazione in Visual Studio, in Esplora soluzioni, espandere la cartella Assets. Aggiungere alla cartella il file di asset esistente bg1.png appena incollato. È possibile posizionare il puntatore del mouse sui file di asset. Verrà visualizzata un'anteprima per ognuna, confermando di aver sostituito o aggiunto correttamente i file di asset.

Eseguire la migrazione del modello Photo

Photo è una classe di runtime che rappresenta una foto. Si tratta di un modello (nel senso di modelli, visualizzazioni e modelli di visualizzazione).

Copiare i file di codice sorgente Photo

Nel clone del progetto di origine, in Esplora file, trovare la cartella Windows-appsample-photo-editor>PhotoEditor. Nelle cartella ci saranno i tre file di codice sorgente Photo.idl, Photo.he Photo.cpp; questi file implementano insieme la classe di runtime Photo. Selezionare questi tre file e copiarli negli Appunti.
In Visual Studio, fare clic con il pulsante destro del mouse sul nodo del progetto e fare clic su Apri cartella in Esplora file. Verrà aperta la cartella del progetto di destinazione in Esplora file. Incollare nella cartella i tre file appena copiati.
Mentre il nodo del progetto è selezionato, in Esplora soluzioni, assicurarsi che Mostra tutti i file sia attivato. Fare clic con il pulsante destro del mouse sui file copiati e fare clic su Includi nel progetto. Disattivare Mostra tutti i file.
Nel progetto di origine, in Esplora soluzione, Photo.h e .cpp sono nidificati in Photo.idl per indicare che ne sono generati (dipendenti). Se si preferisce questa disposizione, è possibile eseguire la stessa operazione nel progetto di destinazione modificando manualmente \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj (è prima necessario selezionare Salva tutto in Visual Studio). Trovare quanto segue:
```
<ClInclude Include="Photo.h" />
```
E sostituirlo con questo:
```
<ClInclude Include="Photo.h">
  <DependentUpon>Photo.idl</DependentUpon>
</ClInclude>
```
Ripetere questa operazione per Photo.cpp, quindi salvare e chiudere il file di progetto. Quando si imposta lo stato attivo su Visual Studio, fare clic su Ricarica.

Eseguire la migrazione del codice sorgente di Photo

In Photo.idl, cercare il nome dello spazio dei nomi Windows.UI.Xaml (lo spazio dei nomi per XAML UWP) e modificarlo in Microsoft.UI.Xaml (lo spazio dei nomi per XAML WinUI).

Nota

L'argomento Mapping delle API UWP a Windows App SDK fornisce un mapping delle API UWP ai relativi equivalenti Windows App SDK. La modifica apportata in precedenza è un esempio di modifica del nome dello spazio dei nomi necessaria durante il processo di migrazione.

In Photo.cpp, aggiungere #include "Photo.g.cpp" alle direttive include esistenti, immediatamente dopo #include "Photo.h". Si tratta di una delle differenze tra nome di cartella e di file (C++/WinRT) da tenere presente tra i progetti UWP e Windows App SDK.
Eseguire la seguente ricerca/sostituzione (distinzione maiuscole/minuscole e parola intera) nel contenuto di tutto il codice sorgente nei file appena copiati e incollati.
- Windows::UI::Xaml =>Microsoft::UI::Xaml
Da pch.h nel progetto di origine, copiare gli include seguenti e incollarli pch.h nel progetto di destinazione. Si tratta di un subset dei file di intestazione inclusi nel progetto di origine; sono solo le intestazioni necessarie per supportare il codice di cui finora è stata eseguita la migrazione.
```
#include <winrt/Microsoft.UI.Xaml.Media.Imaging.h>
#include <winrt/Windows.Storage.h>
#include <winrt/Windows.Storage.FileProperties.h>
#include <winrt/Windows.Storage.Streams.h>
```
A questo punto, verificare che sia possibile compilare la soluzione di destinazione (ma non eseguirla ancora).

Migrazione della classe App

Non sono necessarie modifiche per App.idl e App.xaml del progetto di destinazione. È tuttavia necessario modificare App.xaml.h e App.xaml.cpp per aggiungere alcuni nuovi membri alla classe App . Questa operazione verrà eseguita in modo da consentire la compilazione dopo ogni sezione (ad eccezione dell'ultima, che riguarda App::OnLaunched).

Rendere disponibile l'oggetto finestra principale

In questo passaggio verrà apportata la modifica illustrata in Modificare Windows.UI.Xaml.Window.Current in App.Window.

Nel progetto di destinazione, App memorizza l'oggetto finestra principale nella finestra del membro dati privato. Più avanti nel processo di migrazione (quando si esegue la migrazione dell'uso del progetto di origine di Window.Current), sarà utile se quel membro dati della finestra è statico e se viene reso disponibile anche tramite una funzione di accesso. Queste modifiche verranno quindi apportate successivamente.

Poiché stiamo rendendo statica la finestra, sarà necessario inizializzarla in App.xaml.cpp invece che tramite l'inizializzatore di membro predefinito attualmente in uso da parte del codice. Ecco l'aspetto di queste modifiche in App.xaml.h e App.xaml.cpp.

// App.xaml.h
...
struct App : AppT<App>
{
     ...
     static winrt::Microsoft::UI::Xaml::Window Window(){ return window; };

private:
     static winrt::Microsoft::UI::Xaml::Window window;
};
...

// App.xaml.cpp
...
winrt::Microsoft::UI::Xaml::Window App::window{ nullptr };
...

App::OnNavigationFailed

L'app di esempio Photo Editor utilizza la logica di spostamento per spostarsi tra MainPage e DetailPage. Per altre informazioni sulle app Windows App SDK che necessitano di spostamento (e su quello che non ne hanno bisogno), vedere Devo implementare lo spostamento nella pagina?

I membri di cui verrà eseguita la migrazione nelle prossime sezioni esistono tutti per supportare lo spostamento all'interno dell'app.

Per iniziare, eseguire la migrazione del gestore eventi OnNavigationFailed . Copiare la dichiarazione e la definizione della funzione membro dal progetto di origine e incollarla nel progetto di destinazione (in App.xaml.h e App.xaml.cpp).
Nel codice incollato in App.xaml.h, modificare Windows::UI::Xaml in Microsoft::UI::Xaml.

App::CreateRootFrame

Il progetto di origine contiene una funzione helper denominata App::CreateRootFrame. Copiare la dichiarazione e la definizione della funzione helper dal progetto di origine e incollarla nel progetto di destinazione (in App.xaml.h e App.xaml.cpp).
Nel codice incollato in App.xaml.h, modificare Windows::UI::Xaml in Microsoft::UI::Xaml.
Nel codice incollato in App.xaml.cpp, modificare le due occorrenze di Window::Current() in window (il nome del membro dati della classe App visto in precedenza).

App::OnLaunched

Il progetto di destinazione contiene già un'implementazione del gestore eventi OnLaunched. Il suo parametro è un riferimento costante a un Microsoft::UI::Xaml::LaunchActivatedEventArgs, corretto per Windows App SDK (a differenza del progetto di origine, che usa Windows::ApplicationModel::Activation::LaunchActivatedEventArgs, corretto per la piattaforma UWP).

È sufficiente unire le due definizioni (origine e destinazione) di OnLaunched in modo che App::OnLaunched in App.xaml.cpp nel progetto di destinazione sia simile al listato seguente. Tenere presente che usa window (invece di Window::Current(), come la versione UWP).

void App::OnLaunched(LaunchActivatedEventArgs const&)
{
     window = make<MainWindow>();

     Frame rootFrame = CreateRootFrame();
     if (!rootFrame.Content())
     {
         rootFrame.Navigate(xaml_typename<PhotoEditor::MainPage>());
     }

     window.Activate();
}

Il codice precedente fornisce ad App una dipendenza da MainPage, quindi non sarà possibile compilare da questo punto fino a quando non sarà stata eseguita la migrazione di DetailPage e poi di MainPage. Quando saremo in grado di compilare di nuovo, lo diremo.

Migrazione della visualizzazione DetailPage

DetailPage è la classe che rappresenta la pagina dell'editor di foto, in cui gli effetti Win2D vengono attivati, impostati e concatenati. Si arriva alla pagina dell'editor di foto selezionando un'anteprima della foto in MainPage. DetailPage è una visualizzazione (nel senso di modelli, visualizzazioni e modelli di visualizzazione).

Fare riferimento al pacchetto NuGet Win2D

Per supportare il codice in DetailPage, il progetto di origine ha una dipendenza da Microsoft.Graphics.Win2D. Sarà quindi necessaria una dipendenza da Win2D anche nel progetto di destinazione.

Nella soluzione di destinazione in Visual Studio, fare clic su Strumenti>Gestione pacchetti NuGet>Gestisci pacchetti NuGet per la soluzione...>Sfoglia. Verificare che Includi versione preliminare sia deselezionato, quindi digitare o incollare Microsoft.Graphics.Win2D nella casella di ricerca. Selezionare l'elemento corretto nei risultati della ricerca, controllare il progetto PhotoEditor e fare clic su Installa per installare il pacchetto.

Copiare i file del codice sorgente DetailPage

Nel clone del progetto di origine, in Esplora file, trovare la cartella Windows-appsample-photo-editor>PhotoEditor. Nella cartella sono disponibili i quattro file di codice sorgente DetailPage.idl, DetailPage.xaml, DetailPage.h e DetailPage.cpp; questi file implementano insieme la visualizzazione DetailPage. Selezionare questi quattro file e copiarli negli Appunti.
In Visual Studio, fare clic con il pulsante destro del mouse sul nodo del progetto e fare clic su Apri cartella in Esplora file. Verrà aperta la cartella del progetto di destinazione in Esplora file. Incollare nella cartella i quattro file appena copiati.
Sempre in Esplora file, modificare rispettivamente i nomi di DetailPage.h e DetailPage.cpp in DetailPage.xaml.h e in DetailPage.xaml.cpp. Si tratta di una delle differenze tra nome di cartella e di file (C++/WinRT) da tenere presente tra i progetti UWP e Windows App SDK.
Mentre il nodo del progetto è selezionato, in Esplora soluzioni, assicurarsi che Mostra tutti i file sia attivato. Fare clic con il pulsante destro del mouse sui quattro file appena incollati (e rinominati) e fare clic su Includi nel progetto. Disattivare Mostra tutti i file.
Nel progetto di origine, in Esplora soluzioni, DetailPage.idl è nidificato in DetailPage.xaml. Se si preferisce questa disposizione, è possibile eseguire la stessa operazione nel progetto di destinazione modificando manualmente \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj (è prima necessario selezionare Salva tutto in Visual Studio). Trovare quanto segue:
```
<Midl Include="DetailPage.idl" />
```
E sostituirlo con questo:
```
<Midl Include="DetailPage.idl">
  <DependentUpon>DetailPage.xaml</DependentUpon>
</Midl>
```

Salva e chiudi il file di progetto. Quando si imposta lo stato attivo su Visual Studio, fare clic su Ricarica.

Migrazione del codice sorgente DetailPage

In DetailPage.idl, cercare Windows.UI.Xaml e modificarlo in Microsoft.UI.Xaml.
In DetailPage.xaml.cpp, modificare #include "DetailPage.h" in #include "DetailPage.xaml.h".
Immediatamente sotto, aggiungere #include "DetailPage.g.cpp".
Per la chiamata al metodo statico App::Window (che stiamo per aggiungere) per la compilazione, sempre in DetailPage.xaml.cpp, aggiungere #include "App.xaml.h" immediatamente prima di #include "Photo.h".
Eseguire la ricerca/sostituzione seguente (distinzione maiuscole/minuscole e parola intera) nel contenuto del codice sorgente nei file appena copiati e incollati.
- In DetailPage.xaml.h e .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- In DetailPage.xaml.h e .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- In DetailPage.xaml.cpp, Window::Current() =>App::Window()

Da pch.h nel progetto di origine, copiare gli include seguenti e incollarli pch.h nel progetto di destinazione.

#include <winrt/Windows.Graphics.Effects.h>
#include <winrt/Microsoft.Graphics.Canvas.Effects.h>
#include <winrt/Microsoft.Graphics.Canvas.UI.Xaml.h>
#include <winrt/Microsoft.UI.Composition.h>
#include <winrt/Microsoft.UI.Xaml.Input.h>
#include <winrt/Windows.Graphics.Imaging.h>
#include <winrt/Windows.Storage.Pickers.h>

Inoltre, nella parte superiore di pch.h, subito dopo #pragma once, aggiungere questo:

// This is required because we are using std::min and std::max, otherwise 
// we have a collision with min and max macros being defined elsewhere.
#define NOMINMAX

Non è ancora possibile eseguire la compilazione, ma lo sarà dopo avere eseguito la migrazione di MainPage (l'operazione successiva).

Migrazione della visualizzazione MainPage

La pagina principale dell'app rappresenta la visualizzazione che compare per prima quando si esegue l'app. È la pagina che carica le foto dalla Raccolta di immagini e visualizza una visualizzazione di anteprima affiancata.

Copiare i file del codice sorgente MainPage

Analogamente a quanto fatto con DetailPage, copiare ora MainPage.idl, MainPage.xaml, MainPage.h e MainPage.cpp.
Rinominare i file .h e .cpp in .xaml.h e in .xaml.cpp, rispettivamente.
Includere tutti e quattro i file nel progetto di destinazione. come prima.
Nel progetto di destinazione, in Esplora soluzioni, MainPage.idl è nidificato in MainPage.xaml. Se si preferisce questa disposizione, è possibile eseguire la stessa operazione nel progetto di destinazione modificando manualmente \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj. Trovare quanto segue:
```
<Midl Include="MainPage.idl" />
```
Sostituire tale riga con:
```
<Midl Include="MainPage.idl">
  <DependentUpon>MainPage.xaml</DependentUpon>
</Midl>
```

Migrazione del codice sorgente MainPage

In MainPage.idl, cercare Windows.UI.Xaml e modificare entrambe le occorrenze in Microsoft.UI.Xaml.
In MainPage.xaml.cpp, modificare #include "MainPage.h" in #include "MainPage.xaml.h".
Immediatamente sotto, aggiungere #include "MainPage.g.cpp".
Per la chiamata al metodo statico App::Window (che stiamo per aggiungere) per la compilazione, sempre in MainPage.xaml.cpp, aggiungere #include "App.xaml.h" immediatamente prima di #include "Photo.h".

Per il passaggio successivo, verrà apportata la modifica illustrata in ContentDialog e Popup.

Quindi, sempre in MainPage.xaml.cpp, nel metodo MainPage::GetItemsAsync , subito dopo la riga ContentDialog unsupportedFilesDialog{};, aggiungere questa riga di codice.
```
unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
```
Eseguire la ricerca/sostituzione seguente (distinzione maiuscole/minuscole e parola intera) nel contenuto del codice sorgente nei file appena copiati e incollati.
- In MainPage.xaml.h e .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- In MainPage.xaml.h e .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- In MainPage.xaml.cpp, Window::Current() =>App::Window()

Da pch.h nel progetto di origine, copiare gli include seguenti e incollarli pch.h nel progetto di destinazione.

#include <winrt/Microsoft.UI.Xaml.Hosting.h>
#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>
#include <winrt/Windows.Storage.Search.h>

A questo punto, verificare che sia possibile compilare la soluzione di destinazione (ma non eseguirla ancora).

Aggiornamento di MainWindow

In MainWindow.xamleliminare StackPanel e il relativo contenuto, perché non è necessaria alcuna interfaccia utente in MainWindow. In questo modo viene lasciato solo l'elemento Window vuoto.
In MainWindow.idl, eliminare il segnaposto Int32 MyProperty;, lasciando solo il costruttore.
In MainWindow.xaml.h e MainWindow.xaml.cpp, eliminare le dichiarazioni e le definizioni del segnaposto MyProperty e myButton_Click, lasciando solo il costruttore.

Modifiche alla migrazione necessarie per la differenza del modello di threading

Le due modifiche in questa sezione sono necessarie a causa di una differenza di modello di threading tra UWP e Windows App SDK, come descritto in Modello di threading da ASTA a STA. Di seguito sono riportate brevi descrizioni delle cause dei problemi e quindi un modo per risolverli.

MainPage

MainPage carica i file di immagine dalla cartella Immagini, chiama StorageItemContentProperties.GetImagePropertiesAsync per ottenere le proprietà del file di immagine, crea un oggetto modello Photo per ogni file di immagine (salvando le stesse proprietà in un membro dati) e aggiunge l'oggetto Photo a una raccolta. La raccolta degli oggetti Photo è associata a dati di un GridView nell'interfaccia utente. Per conto della GridView, MainPage gestisce l'evento ContainerContentChanging e per la fase 1 il gestore chiama una coroutine che chiama a sua volta StorageFile.GetThumbnailAsync. Questa chiamata a GetThumbnailAsync comporta il pumping dei messaggi (non viene restituita immediatamente ed esegue tutte le operazioni asincrone) e ciò causa la reentrancy. Il risultato è che la GridView ha la raccolta di Elementi cambiata mentre si sta applicando il layout, provocando un arresto anomalo.

Se si commenta la chiamata a StorageItemContentProperties::GetImagePropertiesAsync, l'arresto anomalo non avviene. Ma la vera correzione consiste nel rendere la chiamata StorageFile.GetThumbnailAsync esplicitamente asincrona attendendo cooperativamente wil::resume_foreground subito prima di chiamare GetThumbnailAsync. Ciò funziona perché wil::resume_foreground pianifica il codice che lo segue per essere un'attività in DispatcherQueue.

Ecco il codice da modificare:

// MainPage.xaml.cpp
IAsyncAction MainPage::OnContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    ...
    if (args.Phase() == 1)
    {
        ...
        try
        {
            co_await wil::resume_foreground(this->DispatcherQueue());
            auto thumbnail = co_await impleType->GetImageThumbnailAsync(this->DispatcherQueue());
            image.Source(thumbnail);
        }
        ...
    }
}

Foto

La proprietà Photo::ImageTitle è associata ai dati dell'interfaccia utente, quindi l'interfaccia utente chiama la funzione di accesso per quella proprietà ogni volta che ha bisogno del suo valore. Tuttavia, quando si tenta di accedere a ImageProperties.Title da quella funzione di accesso nel thread dell'interfaccia utente, si verifica una violazione di accesso.

In alternativa è sufficiente accedere a quel Titolo una sola volta, dal costruttore di Photo e memorizzarlo nel membro dati m_imageName se non è vuoto. Quindi, nella funzione di accesso Photo::ImageTitle basta accedere solo al membro dati m_imageName.

Ecco il codice da modificare:

// Photo.h
...
Photo(Photo(Windows::Storage::FileProperties::ImageProperties const& props,
    ...
    ) : ...
{
    if (m_imageProperties.Title() != L"")
    {
        m_imageName = m_imageProperties.Title();
    }
}
...
hstring ImageTitle() const
{
    return m_imageName;
}
...

Queste sono le ultime modifiche che è necessario apportare per eseguire la migrazione dell'app di esempio Photo Editor. Nella sezione Testare l'app migrata si verificherà che siano stati eseguiti correttamente i passaggi.

Problemi noti

Problema del tipo di app (influisce solo sull'anteprima 3)

Se è stato seguito questo case study usando il modello di progetto da VSIX per Windows App SDK versione 1.0 Anteprima 3, sarà necessario apportare una piccola correzione a PhotoEditor.vcxproj. Ecco come farlo.

In Visual Studio, in Esplora soluzioni, fare clic con il tasto destro del mouse sul nodo del progetto e fare clic su Scarica progetto. Ora PhotoEditor.vcxproj è aperto per la modifica. Come primo elemento figlio del Progetto, aggiungere un elemento PropertyGroup simile al seguente:

<Project ... >
    <PropertyGroup>
        <EnableWin32Codegen>true</EnableWin32Codegen>
    </PropertyGroup>
    <Import ... />
...

Salvare e chiudere PhotoEditor.vcxproj. Fare clic con il pulsante destro del mouse sul nodo del progetto e fare clic su Ricarica progetto. A questo punto, ricompilare il progetto.

Testare l'app migrata

A questo punto, compilare il progetto ed eseguire l'app per testarla. Selezionare un'immagine, impostare un livello di zoom, scegliere gli effetti e configurarli.

Appendice: copia dei contenuti dei file del modello Photo

Come accennato in precedenza, esiste la possibilità di copiare i file del codice sorgente o i relativi contentuti. È già stato illustrato come copiare i file del codice sorgente. In questa sezione viene quindi illustrato un esempio di copia dei contenuti del file.

Nel progetto di origine in Visual Studio, trovare la cartella PhotoEditor (Universal Windows)>Modelli. La cartella contiene i file Photo.idl, Photo.h e Photo.cpp, che insieme implementano la classe di runtime Photo.

Aggiungere IDL e generare stub

Nel progetto di destinazione in Visual Studio, aggiungere un nuovo elemento Midl File (.idl) al progetto. Denominare il nuovo elemento Photo.idl. Eliminare i contenuti predefiniti di Photo.idl.

Dal progetto di origine in Visual Studio, copiare i contenuto di Modelli>Photo.idl e incollarli nel file Photo.idl appena aggiunto al progetto di destinazione. Nel codice incollato, cercare Windows.UI.Xaml e modificarlo in Microsoft.UI.Xaml.

Salva il file.

Importante

Si sta per eseguire una compilazione della soluzione di destinazione. La compilazione non verrà eseguita fino al completamento a questo punto, ma sarà sufficiente per eseguire operazioni necessarie per noi.

Compilare la soluzione di destinazione. Anche se non sarà completa, la compilazione è necessaria ora perché genererà i file del codice sorgente (stub) necessari per iniziare a implementare il modello Photo.

In Visual Studio, fare clic con il pulsante destro del mouse sul nodo del progetto e fare clic su Apri cartella in Esplora file. Verrà aperta la cartella del progetto di destinazione in Esplora file. Qui, passare alla cartella Generated Files\sources (in modo che ci si trovi in \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources). Copiare i file stub Photo.h e .cpp e incollarli nella cartella del progetto, che ora è di due livelli di cartella in \PhotoEditor\PhotoEditor\PhotoEditor.

Mentre il nodo del progetto è selezionato, in Esplora soluzioni, assicurarsi che Mostra tutti i file sia attivato. Fare clic con il pulsante destro del mouse sui file stub incollati (Photo.h e .cpp) e fare clic su Include nel progetto. Disattivare Mostra tutti i file.

Verrà innanzitutto visualizzato static_assert nella parte superiore di Photo.h e .cpp, che sarà necessario rimuovere.

Verificare che sia nuovamente possibile la compilazione (ma non ancora l'esecuzione).

Migrazione del codice negli stub

Copiare i contenuti di Photo.h e .cpp dal progetto di origine a quello di destinazione.

Da qui, i passaggi rimanenti per eseguire la migrazione del codice copiato sono uguali a quelli indicati nella sezione Migrazione del codice sorgente di Photo .

Condividi tramite

Migrazione a Windows App SDK dell'app di esempio Photo Editor UWP (C++/WinRT)

Installare gli strumenti per Windows App SDK

Crea un nuovo progetto

Ordine in cui verrà eseguita la migrazione del codice

Verranno copiati interi file del codice sorgente

Copiare i file di asset

Eseguire la migrazione del modello Photo

Copiare i file di codice sorgente Photo

Eseguire la migrazione del codice sorgente di Photo

Migrazione della classe App

Rendere disponibile l'oggetto finestra principale

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

Migrazione della visualizzazione DetailPage

Fare riferimento al pacchetto NuGet Win2D

Copiare i file del codice sorgente DetailPage

Migrazione del codice sorgente DetailPage

Migrazione della visualizzazione MainPage

Copiare i file del codice sorgente MainPage

Migrazione del codice sorgente MainPage

Aggiornamento di MainWindow

Modifiche alla migrazione necessarie per la differenza del modello di threading

MainPage

Foto

Problemi noti

Problema del tipo di app (influisce solo sull'anteprima 3)

Testare l'app migrata

Appendice: copia dei contenuti dei file del modello Photo

Aggiungere IDL e generare stub

Migrazione del codice negli stub

Risorse aggiuntive

Condividi tramite

Migrazione a Windows App SDK dell'app di esempio Photo Editor UWP (C++/WinRT)

Installare gli strumenti per Windows App SDK

Crea un nuovo progetto

Ordine in cui verrà eseguita la migrazione del codice

Verranno copiati interi file del codice sorgente

Copiare i file di asset

Eseguire la migrazione del modello Photo

Copiare i file di codice sorgente Photo

Eseguire la migrazione del codice sorgente di Photo

Migrazione della classe App

Rendere disponibile l'oggetto finestra principale

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

Migrazione della visualizzazione DetailPage

Fare riferimento al pacchetto NuGet Win2D

Copiare i file del codice sorgente DetailPage

Migrazione del codice sorgente DetailPage

Migrazione della visualizzazione MainPage

Copiare i file del codice sorgente MainPage

Migrazione del codice sorgente MainPage

Aggiornamento di MainWindow

Modifiche alla migrazione necessarie per la differenza del modello di threading

MainPage

Foto

Problemi noti

Problema del tipo di app (influisce solo sull'anteprima 3)

Testare l'app migrata

Appendice: copia dei contenuti dei file del modello Photo

Aggiungere IDL e generare stub

Migrazione del codice negli stub

Argomenti correlati

Risorse aggiuntive