Migration vers le SDK d’application Windows de l’exemple d’application UWP Photo Editor (C++/WinRT)

Article
05/31/2024

Cette rubrique est une étude de cas sur la prise de l’exemple d’application Photo Editor UWP C++/WinRT et de la migration vers le kit de développement logiciel (SDK) d’application Windows.

Commencez par cloner le répertoire de l’application UWP et ouvrez la solution dans Visual Studio.

Important

Pour connaître les considérations et les stratégies d’approche du processus de migration, et savoir comment configurer votre environnement de développement pour la migration, reportez-vous à Stratégie globale de migration.

Installer des outils pour le SDK d’application Windows

Pour configurer votre ordinateur de développement, consultez Installer des outils pour le SDK d’application Windows.

Important

Vous trouverez des rubriques consacrées aux notes de publication ainsi que la rubrique Canaux de publication du SDK d’application Windows. Des notes de publication sont disponibles pour chaque canal. Pensez à prendre connaissance des limitations et problèmes connus présentés dans ces notes de publication, car ceux-ci peuvent affecter les résultats du suivi de cette étude de cas et/ou l’exécution de l’application migrée.

Créer un projet

Dans Visual Studio, créez un nouveau projet C++/WinRT à partir du modèle de projet «Blank App, Packaged (WinUI 3 in Desktop). Nommez le projet PhotoEditor, décochez la case Placer la solution et le projet dans le même répertoire. Vous pouvez cibler la version la plus récente (et non la préversion) du système d’exploitation client.

Remarque

Nous ferons référence à la version UWP du projet d’exemple (celle que vous avez clonée à partir de son référentiel) en tant que solution/projet source. Nous ferons référence à la version du kit SDK d’application Windows en tant que solution/projet cible.

Ordre dans lequel nous allons migrer le code

MainPage est un élément important et majeur de l’application. Mais si nous commencions par migrer cette vue, nous nous rendrions vite compte que MainPage dépend de la vue DetailPage, puis que DetailPage dépend du modèle Photo Dans le cadre de ce guide, nous adopterons l’approche suivante.

Nous commencerons par copier les fichiers de ressources.
Ensuite, nous migrerons le modèle Photo.
Ensuite, nous migrerons la classe App (parce qu'elle nécessite l'ajout de certains membres dont dépendront DetailPage et MainPage).
Nous commencerons ensuite à migrer les vues, en commençant par DetailPage.
Nous terminerons par la migration de la vue MainPage.

Nous allons copier des fichiers entiers de code source

Dans cette procédure pas-à-pas, nous allons copier des fichiers de code source à l'aide de l'Explorateur de fichiers. Si vous préférez copier le contenu des fichiers, reportez-vous à la section Annexe : copie du contenu des fichiers du modèle Photo à la fin de cette rubrique pour obtenir un exemple de la manière dont vous pouvez procéder pour Photo (et vous pouvez ensuite appliquer une procédure similaire à d'autres types dans le projet). Cette option implique toutefois beaucoup plus d'étapes.

Copier des fichiers de ressources

Dans votre clone du projet source, dans l'Explorateur de fichiers, localisez le dossier Windows-appsample-photo-editor>PhotoEditor>Assets. Vous trouverez huit fichiers de ressources dans ce dossier. Sélectionnez ces huit fichiers et copiez-les dans le presse-papiers.
Toujours dans l’explorateur de fichiers, localisez le dossier correspondant dans le projet cible que vous avez créé. Le chemin d’accès à ce dossier est PhotoEditor>PhotoEditor>Assets. Collez dans ce dossier les fichiers de ressources que vous venez de copier et acceptez la requête de remplacement des sept fichiers qui existent déjà dans le dossier de destination.
Dans votre projet cible dans Visual Studio, dans l'Explorateur de solutions, développez le dossier Assets. Ajoutez à ce dossier le fichier de ressources bg1.png existant que vous venez de coller. Vous pouvez passer le pointeur de la souris sur les fichiers d’actifs. Un aperçu s’affiche en miniature pour chacun d’entre eux, confirmant que vous avez remplacé/ajouté les fichiers de ressources correctement.

Migrer le modèle Photo

Photo est une classe d'exécution qui représente une photo. Il s'agit d'un modèle (au sens des modèles, des vues et des modèles de vue).

Copier les fichiers du code source de la photo

Dans votre clone du projet source, dans l'Explorateur de fichiers, localisez le dossier Windows-appsample-photo-editor>PhotoEditor. Dans ce dossier, vous trouverez les trois fichiers de code source Photo.idl, Photo.h et Photo.cpp ; ces fichiers mettent en œuvre la classe d'exécution Photo. Sélectionnez ces trois fichiers et copiez-les dans le presse-papiers.
Dans Visual Studio, cliquez avec le bouton droit de la souris sur le nœud du projet cible, puis cliquez sur Ouvrir le dossier dans l’Explorateur de fichiers. Le dossier du projet cible s’ouvre dans l’Explorateur de fichiers. Collez dans ce dossier les trois fichiers que vous venez de copier.
De retour dans l'Explorateur de solutions, le nœud du projet cible étant sélectionné, assurez-vous que l'option Afficher tous les fichiers est activée. Cliquez avec le bouton droit de la souris sur les trois fichiers que vous venez de coller et cliquez sur Inclure dans le projet. Désactiver l'affichage de tous les fichiers.
Dans le projet source, dans Solution Explorer, Photo.h et .cpp sont imbriqués sous Photo.idl pour indiquer qu'ils sont générés à partir de ce dernier (qu'ils en dépendent). Si cet arrangement vous convient, vous pouvez faire la même chose dans le projet cible en le modifiant manuellement\PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj (vous devez d'abord sauvegarder tout dans Visual Studio). Trouvez les éléments suivants :
```
<ClInclude Include="Photo.h" />
```
Remplacez-la par ceci :
```
<ClInclude Include="Photo.h">
  <DependentUpon>Photo.idl</DependentUpon>
</ClInclude>
```
Répétez cette opération pour Photo.cpp, puis enregistrez et fermez le fichier de projet. Lorsque vous ramenez le focus sur Visual Studio, cliquez sur Reload.

Migrer le code source des photos

Dans Photo.idl, recherchez le nom de l'espace de noms Windows.UI.Xaml (qui est l'espace de noms pour UWP XAML), et changez-le en Microsoft.UI.Xaml (qui est l'espace de noms pour WinUI XAML).

Remarque

La rubrique Mappage des API UWP avec le kit SDK d’application Windows fournit un mappage des API UWP avec leurs équivalents dans le kit SDK d’application Windows. Le changement que nous avons effectué ci-dessus est un exemple de changement de nom d’espace de noms nécessaire au cours du processus de migration.

Dans Photo.cpp, ajoutez #include "Photo.g.cpp" aux directives include existantes, immédiatement après #include "Photo.h". C'est l'une des différences de nom de dossier et de fichier (C++/WinRT) à connaître entre les projets UWP et SDK d'application Windows.
Effectuez la recherche/remplacement suivante (correspondance entre les majuscules et les mots entiers) dans le contenu de tout le code source des fichiers que vous venez de copier et de coller.
- Windows::UI::Xaml =>Microsoft::UI::Xaml
À partir de pch.h dans le projet source, copiez les inclusions suivantes et collez-les dans pch.h dans le projet cible. Il s'agit d'un sous-ensemble des fichiers d'en-tête inclus dans le projet source ; il s'agit uniquement des en-têtes dont nous avons besoin pour prendre en charge le code que nous avons migré jusqu'à présent.
```
#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>
```
Vérifiez à présent que vous pouvez créer la solution cible (mais ne l’exécutez pas encore).

Migrer la classe d’application

Aucun changement n'est nécessaire dans les projets cibles App.idl et App.xaml. Mais nous devons modifier App.xaml.h et l'application.xaml.cpp pour ajouter de nouveaux membres à la classe App. Nous le ferons d'une manière qui nous permettra de construire après chaque section (à l'exception de la dernière section, qui concerne App::OnLaunched).

Mise à disposition de l'objet fenêtre principale

Dans cette étape, nous allons effectuer la modification expliquée dans Change Windows.UI.Xaml.Window.Current to App.Window.

Dans le projet cible, l'application stocke l'objet fenêtre principale dans son membre de données privé window. Plus tard dans le processus de migration (lorsque nous migrerons l'utilisation de Window.Current dans le projet source), il sera pratique que ce membre de données de la fenêtre soit statique et qu'il soit également disponible par le biais d'une fonction d'accès. Nous procéderons donc à ces changements dans un deuxième temps.

Puisque nous rendons window statique, nous devrons l'initialiser dans App.xaml.cpp au lieu d'utiliser l'initialisateur de membre par défaut que le code utilise actuellement. Voici à quoi ressemblent ces changements dans App.xaml.h et 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'exemple d'application Éditeur de photos utilise la logique de navigation pour passer de la MainPage à la DetailPage. Pour en savoir plus sur les applications de kit SDK d’application Windows qui nécessitent une navigation (et celles qui n’en ont pas besoin), reportez-vous à la section Faut-il implémenter la navigation dans les pages ?.

Ainsi, les membres que nous allons migrer dans les prochaines sections existent tous pour soutenir la navigation dans l'application.

Commençons par migrer le gestionnaire de l'événement OnNavigationFailed. Copiez la déclaration et la définition de cette fonction membre du projet source et collez-les dans le projet cible (dans App.xaml.h et App.xaml.cpp).
Dans le code que vous avez collé dans App.xaml.h, remplacez Windows::UI::Xaml par Microsoft::UI::Xaml.

App::CreateRootFrame

Le projet source contient une fonction d'aide nommée App::CreateRootFrame. Copiez la déclaration et la définition de cette fonction d'aide du projet source et collez-les dans le projet cible (dans App.xaml.h et App.xaml.cpp).
Dans le code que vous avez collé dans App.xaml.h, remplacez Windows::UI::Xaml par Microsoft::UI::Xaml.
Dans le code que vous avez collé dans App.xaml.cpp, remplacez les deux occurrences de Window::Current() par window (qui est le nom du membre data de la classe App que nous avons vu précédemment).

App::OnLaunched

Le projet cible contient déjà une implémentation du gestionnaire d'événement OnLaunched. Son paramètre est une référence constante à un Microsoft::UI::Xaml::LaunchActivatedEventArgs, ce qui est correct pour le SDK d'application Windows (comparez cela au projet source, qui utilise Windows::ApplicationModel::Activation::LaunchActivatedEventArgs, ce qui est correct pour UWP).

Il suffit de fusionner les deux définitions (source et cible) de OnLaunched pour que App::OnLaunched dans App.xaml.cpp dans le projet cible ressemble à la liste ci-dessous. Notez qu'elle utilise window (au lieu de Window::Current(), comme la version UWP).

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

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

     window.Activate();
}

Le code ci-dessus donne à l'application une dépendance sur MainPage, nous ne pourrons donc pas construire à partir de ce point tant que nous n'aurons pas migré DetailPage puis MainPage. Lorsque nous serons en mesure de compiler à nouveau, nous le dirons.

Migrer la vue DetailPage

DetailPage est la classe qui représente la page de l’éditeur de photos, où les effets Win2D sont activés, définis et chaînés ensemble. Vous accédez à la page de l’éditeur de photos en sélectionnant une miniature de photo sur MainPage. DetailPage est une vue (au sens des modèles, des vues et des modèles de vue).

Référencer le package NuGet Win2D

Pour prendre en charge le code dans DetailPage, le projet source dépend de Microsoft.Graphics.Win2D. Nous aurons donc également besoin d’une dépendance sur Win2D dans notre projet cible.

Dans la solution cible de Visual Studio, cliquez sur Outils>NuGet Package Manager>Gestion des packages NuGet pour la solution...>Parcourir. Assurez-vous que l'option Inclure la pré-version n'est pas cochée, et tapez ou collez Microsoft.Graphics.Win2D dans la boîte de recherche. Sélectionnez l'élément approprié dans les résultats de la recherche, cochez le projet PhotoEditor et cliquez sur Installer pour installer le package.

Copier les fichiers de code source DetailPage

Dans votre clone du projet source, dans l'Explorateur de fichiers, localisez le dossier Windows-appsample-photo-editor>PhotoEditor. Dans ce dossier, vous trouverez les quatre fichiers de code source DetailPage.idl, DetailPage.xaml, DetailPage.h et DetailPage.cpp ; ces fichiers mettent en œuvre la vue DetailPage. Sélectionnez ces quatre fichiers et copiez-les dans le presse-papiers.
Dans Visual Studio, cliquez avec le bouton droit de la souris sur le nœud du projet cible, puis cliquez sur Ouvrir le dossier dans l’Explorateur de fichiers. Le dossier du projet cible s’ouvre dans l’Explorateur de fichiers. Collez dans ce dossier les quatre fichiers que vous venez de copier.
Toujours dans l'Explorateur de fichiers, changez les noms de DetailPage.h et DetailPage.cpp en DetailPage.xaml.h et DetailPage.xaml.cpp, respectivement. C'est l'une des différences de nom de dossier et de fichier (C++/WinRT) à connaître entre les projets UWP et SDK d'application Windows.
De retour dans l'Explorateur de solutions, le nœud du projet cible étant sélectionné, assurez-vous que l'option Afficher tous les fichiers est activée. Cliquez avec le bouton droit de la souris sur les quatre fichiers que vous venez de coller (et de renommer), puis cliquez sur Inclure dans le projet. Désactiver l'affichage de tous les fichiers.
Dans le projet source, dans l'Explorateur de solutions, DetailPage.idl est imbriqué sous DetailPage.xaml. Si cet arrangement vous convient, vous pouvez faire la même chose dans le projet cible en le modifiant manuellement\PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj (vous devez d'abord sauvegarder tout dans Visual Studio). Trouvez les éléments suivants :
```
<Midl Include="DetailPage.idl" />
```
Remplacez-la par ceci :
```
<Midl Include="DetailPage.idl">
  <DependentUpon>DetailPage.xaml</DependentUpon>
</Midl>
```

Enregistrez et fermez le fichier projet. Lorsque vous ramenez le focus sur Visual Studio, cliquez sur Reload.

Migrer le code source DetailPage

Dans DetailPage.idl, recherchez Windows.UI.Xaml, et remplacez-le par Microsoft.UI.Xaml.
Dans DetailPage.xaml.cpp, changez #include "DetailPage.h" en #include "DetailPage.xaml.h".
Immédiatement en dessous, ajoutez #include "DetailPage.g.cpp".
Pour que l'appel à la méthode statique App::Window (que nous allons ajouter) compile, toujours dans DetailPage.xaml.cpp, ajoutez #include "App.xaml.h" immédiatement avant #include "Photo.h".
Effectuez les recherches/remplacements suivants (en tenant compte de la casse et du mot entier) dans le contenu du code source des fichiers que vous venez de copier et coller.
- Dans DetailPage.xaml.h et .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- Dans DetailPage.xaml.h et .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- Dans DetailPage.xaml.cpp, Window::Current() =>App::Window()

À partir de pch.h dans le projet source, copiez les inclusions suivantes et collez-les dans pch.h dans le projet cible.

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

En outre, en haut de pch.h, immédiatement après #pragma once, ajoutez ceci :

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

Nous ne pouvons pas encore construire, mais nous pourrons le faire après avoir migré MainPage (ce qui est la prochaine étape).

Migrer la vue MainPage

La page principale de l’application est celle qui s’affiche en premier lorsque vous lancez l’application. C'est la page qui charge les photos de la bibliothèque d'images et qui affiche une miniature en mosaïque.

Copier les fichiers de code source MainPage

Comme pour DetailPage, copiez maintenant MainPage.idl, MainPage.xaml,MainPage.h et MainPage.cpp.
Renommez les fichiers .h et .cpp en .xaml.h et .xaml.cpp, respectivement.
Incluez les quatre fichiers dans le projet cible comme précédemment.
Dans le projet source, dans l'Explorateur de solutions, MainPage.idl est imbriqué sous MainPage.xaml. Si vous aimez cet arrangement, vous pouvez faire la même chose dans le projet cible en modifiant manuellement \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj. Trouvez les éléments suivants :
```
<Midl Include="MainPage.idl" />
```
Puis, remplacez-la par :
```
<Midl Include="MainPage.idl">
  <DependentUpon>MainPage.xaml</DependentUpon>
</Midl>
```

Migrer le code source MainPage

Dans MainPage.idl, recherchez Windows.UI.Xaml et remplacez les deux occurrences par Microsoft.UI.Xaml.
Dans MainPage.xaml.cpp, changez #include "MainPage.h" en #include "MainPage.xaml.h".
Immédiatement en dessous, ajoutez #include "MainPage.g.cpp".
Pour que l'appel à la méthode statique App::Window (que nous allons ajouter) compile, toujours dans MainPage.xaml.cpp, ajoutez #include "App.xaml.h" immédiatement avant #include "Photo.h".

Pour l’étape suivante, nous allons effectuer les changements expliqués dans ContentDialog, et Popup.

Donc, toujours dans MainPage.xaml.cpp, dans la méthode MainPage::GetItemsAsync, immédiatement après la ligne ContentDialog unsupportedFilesDialog{};, ajoutez cette ligne de code.
```
unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
```
Effectuez les recherches/remplacements suivants (en tenant compte de la casse et du mot entier) dans le contenu du code source des fichiers que vous venez de copier et coller.
- Dans MainPage.xaml.h et .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- Dans MainPage.xaml.h et .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- Dans MainPage.xaml.cpp, Window::Current() =>App::Window()

À partir de pch.h dans le projet source, copiez les inclusions suivantes et collez-les dans pch.h dans le projet cible.

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

Confirmez que vous pouvez créer la solution cible (mais ne l’exécutez pas encore).

Mettre à jour MainWindow

Dans MainWindow.xaml, supprimez le StackPanel et son contenu, puisque nous n'avons pas besoin d'interface utilisateur dans mainWindow. Il ne reste plus que l'élément vide Window.
Dans MainWindow.idl, supprimez l'espace réservé Int32 MyProperty;, en ne laissant que le constructeur.
Dans MainWindow.xaml.h et MainWindow.xaml.cpp, supprimez les déclarations et les définitions de l'espace réservé MyProperty et myButton_Click, en ne conservant que le constructeur.

Changements de migration nécessaires pour la différence de modèle de threading

Les deux modifications de cette section sont nécessaires en raison d'une différence de modèle de threading entre l'UWP et le SDK d'application Windows, comme décrit dans ASTA to STA threading model. Vous trouverez ci-dessous une brève description des causes de ces problèmes, ainsi qu'une méthode pour les résoudre.

MainPage

MainPage charge les fichiers images de votre dossier Pictures, appelle StorageItemContentProperties.GetImagePropertiesAsync pour obtenir les propriétés du fichier image, crée un objet de modèle Photo pour chaque fichier image (en enregistrant ces mêmes propriétés dans un membre de données) et ajoute cet objet Photo à une collection. La collection d'objets photo est liée à une GridView dans l'interface utilisateur. Au nom de cette GridView, MainPage gère l'événement ContainerContentChanging et, pour la phase 1, ce gestionnaire fait appel à une coroutine qui appelle StorageFile.GetThumbnailAsync. Cet appel à GetThumbnailAsync entraîne le pompage de messages (il ne retourne pas immédiatement et ne fait pas tout son travail de manière asynchrone), ce qui provoque une réentrance. Le résultat est que la collection d'éléments de la GridView est modifiée pendant la mise en page, ce qui provoque un plantage.

Si nous commentons l'appel à StorageItemContentProperties::GetImagePropertiesAsync, nous n'avons pas de plantage. Mais la vraie solution est de faire en sorte que l'appel à StorageFile.GetThumbnailAsync soit explicitement asynchrone en attendant de manière coopérative wil::resume_foreground immédiatement avant d'appeler GetThumbnailAsync. Cela fonctionne parce que wil::resume_foreground planifie le code qui le suit comme une tâche sur la DispatcherQueue.

Voici le code à modifier :

// 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);
        }
        ...
    }
}

Photo

La propriété Photo::ImageTitle est liée aux données de l'interface utilisateur, qui fait donc appel à la fonction d'accès à cette propriété chaque fois qu'elle a besoin de sa valeur. Mais lorsque nous essayons d'accéder à ImageProperties.Title à partir de cette fonction d'accès sur le threading de l'interface utilisateur, nous obtenons une violation d'accès.

Nous pouvons donc accéder à ce titre une seule fois, à partir du constructeur de Photo, et le stocker dans le membre de données m_imageName s'il n'est pas vide. Ensuite, dans la fonction d'accès Photo::ImageTitle, il suffit d'accéder au membre de données m_imageName.

Voici le code à modifier :

// 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;
}
...

Il s'agit là des dernières modifications à apporter pour migrer l'application d'exemple de l'éditeur de photos. Dans la section Test de l'application migrée, nous confirmerons que nous avons correctement suivi les étapes.

Problèmes connus

Problème lié au type d'application (ne concerne que la préversion 3)

Si vous avez suivi cette étude de cas en utilisant le modèle de projet de la version 1.0 Preview 3 de VSIX for SDK d'application Windows, vous devrez apporter une petite correction à PhotoEditor.vcxproj. Voici comment procéder.

Dans Visual Studio, dans l'Explorateur de solutions, cliquez avec le bouton droit de la souris sur le nœud du projet, puis cliquez sur Décharger le projet. Maintenant, PhotoEditor.vcxproj est ouvert à l'édition. En tant que premier enfant de Project, ajoutez un élément PropertyGroup comme suit :

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

Enregistrez et fermez PhotoEditor.vcxproj. Cliquez avec le bouton droit de la souris sur le nœud du projet et cliquez sur Recharger le projet. Recompilez maintenant le projet.

Tester l’application migrée

Créez à présent le projet et exécutez l’application pour la tester. Sélectionnez une image, définissez un niveau de zoom, choisissez des effets et configurez-les.

Annexe : copie du contenu des fichiers du modèle photo

Comme nous l'avons vu précédemment, vous avez la possibilité de copier les fichiers de code source eux-mêmes ou le contenu des fichiers de code source. Nous avons déjà montré comment copier les fichiers de code source eux-mêmes. Cette section donne donc un exemple de copie du contenu d'un fichier.

Dans le projet source de Visual Studio, localisez le dossier PhotoEditor (Universal Windows) >Models. Ce dossier contient les fichiers Photo.idl, Photo.h et Photo.cpp qui, ensemble, mettent en œuvre la classe d'exécution Photo.

Ajoutez l'IDL et générez des stubs

Dans votre projet cible dans Visual Studio, ajoutez un nouvel élément Midl File (.idl) au projet. Nommez le nouvel élément Photo.idl. Supprimez le contenu par défaut de Photo.idl.

À partir du projet source dans Visual Studio, copiez le contenu de Models>Photo.idl et collez-le dans le fichier Photo.idl que vous venez d'ajouter à votre projet cible. Dans le code que vous avez collé, recherchez Windows.UI.Xaml et remplacez-le par Microsoft.UI.Xaml.

Enregistrez le fichier.

Important

Nous sommes sur le point de construire votre solution cible. La construction n'ira pas jusqu'à son terme à ce stade, mais elle sera suffisamment avancée pour nous permettre d'effectuer le travail nécessaire.

Générez maintenant la solution cible. Même si elle n'est pas terminée, la génération est nécessaire maintenant parce qu'elle génère les fichiers de code source (stubs) dont nous avons besoin pour Démarrer la mise en œuvre du modèle Photo.

Dans Visual Studio, cliquez avec le bouton droit de la souris sur le nœud du projet cible, puis cliquez sur Ouvrir le dossier dans l’Explorateur de fichiers. Le dossier du projet cible s’ouvre dans l’Explorateur de fichiers. Naviguez ensuite dans le dossier Generated Files\sources (vous serez donc dans \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources). Copiez les fichiers stub Photo.h et .cpp et collez-les dans le dossier du projet, qui se trouve maintenant deux niveaux plus haut dans \PhotoEditor\PhotoEditor\PhotoEditor.

De retour dans l'Explorateur de solutions, le nœud du projet cible étant sélectionné, assurez-vous que l'option Afficher tous les fichiers est activée. Cliquez avec le bouton droit de la souris sur les fichiers stub que vous venez de coller (Photo.h et .cpp), puis cliquez sur Inclure dans le projet. Désactiver l'affichage de tous les fichiers.

Vous verrez un static_assert en haut du contenu de Photo.h et .cpp, que vous devrez supprimer.

Confirmez que vous pouvez à nouveau compiler (mais n'exécutez pas encore).

Migrer le code dans les stubs

Copiez le contenu de Photo.h et .cpp du projet source dans le projet cible.

À partir de là, les étapes restantes pour migrer le code que vous avez copié sont les mêmes que celles indiquées dans la section Migrer le code source Photo.

Partage via

Migration vers le SDK d’application Windows de l’exemple d’application UWP Photo Editor (C++/WinRT)

Installer des outils pour le SDK d’application Windows

Créer un projet

Ordre dans lequel nous allons migrer le code

Nous allons copier des fichiers entiers de code source

Copier des fichiers de ressources

Migrer le modèle Photo

Copier les fichiers du code source de la photo

Migrer le code source des photos

Migrer la classe d’application

Mise à disposition de l'objet fenêtre principale

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

Migrer la vue DetailPage

Référencer le package NuGet Win2D

Copier les fichiers de code source DetailPage

Migrer le code source DetailPage

Migrer la vue MainPage

Copier les fichiers de code source MainPage

Migrer le code source MainPage

Mettre à jour MainWindow

Changements de migration nécessaires pour la différence de modèle de threading

MainPage

Photo

Problèmes connus

Problème lié au type d'application (ne concerne que la préversion 3)

Tester l’application migrée

Annexe : copie du contenu des fichiers du modèle photo

Ajoutez l'IDL et générez des stubs

Migrer le code dans les stubs

Ressources supplémentaires

Partage via

Migration vers le SDK d’application Windows de l’exemple d’application UWP Photo Editor (C++/WinRT)

Installer des outils pour le SDK d’application Windows

Créer un projet

Ordre dans lequel nous allons migrer le code

Nous allons copier des fichiers entiers de code source

Copier des fichiers de ressources

Migrer le modèle Photo

Copier les fichiers du code source de la photo

Migrer le code source des photos

Migrer la classe d’application

Mise à disposition de l'objet fenêtre principale

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

Migrer la vue DetailPage

Référencer le package NuGet Win2D

Copier les fichiers de code source DetailPage

Migrer le code source DetailPage

Migrer la vue MainPage

Copier les fichiers de code source MainPage

Migrer le code source MainPage

Mettre à jour MainWindow

Changements de migration nécessaires pour la différence de modèle de threading

MainPage

Photo

Problèmes connus

Problème lié au type d'application (ne concerne que la préversion 3)

Tester l’application migrée

Annexe : copie du contenu des fichiers du modèle photo

Ajoutez l'IDL et générez des stubs

Migrer le code dans les stubs

Rubriques connexes

Ressources supplémentaires