Eine Windows App SDK Migration der Beispiel-App für den UWP-Foto-Editor (C++/WinRT)

In diesem Thema wird anhand einer Fallstudie gezeigt, wie die C++/WinRT UWP Foto-Editor-Beispiel-App auf das Windows App SDK migriert wird.

• Beginnen Sie mit cloning des Repositorys der UWP-Beispiel-App und öffnen Sie die Lösung in Visual Studio.

Installieren von Tools für die Windows App SDK

Informationen zum Einrichten Ihres Entwicklungscomputers finden Sie unter Install-Tools für die Windows App SDK.

Neues Projekt erstellen

• Erstellen Sie in Visual Studio ein neues C++/WinRT-Projekt aus der Projektvorlage WinUI Blank App (Paket). Benennen Sie das Projekt PhotoEditor, deaktivieren Sie Lösung und Projekt im selben Verzeichnis platzieren. Sie können auf das neueste Release (keine Vorschau) des Clientbetriebssystems abzielen.

Die Reihenfolge, in der der Code migriert wird

MainPage ist ein wichtiger und prominenter Teil der App. Aber wenn wir mit der Migration beginnen würden, dann würden wir bald feststellen, dass MainPage eine Abhängigkeit von der DetailPage-Ansicht aufweist und DetailPage eine Abhängigkeit von dem Photo-Modell aufweist. Für diese Anleitung werden wir diesen Ansatz verwenden.

• Wir beginnen mit dem Kopieren der Ressourcen-Dateien.
• Anschließend migrieren wir das Photo-Modell.
• Als Nächstes migrieren wir die App-Klasse (da dazu einige Mitglieder hinzugefügt werden müssen, von denen DetailPage und MainPage abhängig sind).
• Anschließend beginnen wir mit der Migration der Ansichten, beginnend mit DetailPage.
• Zum Schluss migrieren wir noch die Ansicht MainPage.

Wir werden ganze Quellcodedateien kopieren.

In dieser Anleitung kopieren wir Quellcode-Dateien mithilfe des Datei-Explorers. Wenn Sie den Dateiinhalt lieber kopieren möchten, dann sehen Sie sich im Anhang: Kopieren des Inhalts des Photo-Modells Abschnitt am Ende dieses Themas ein Beispiel dafür an, wie Sie dies für Photo tun können (und Sie können dann ein ähnliches Verfahren auf andere Typen im Projekt anwenden). Diese Option umfasst jedoch noch viel mehr Schritte.

Kopieren von Objektdateien

1. In Ihrem Klon des Quellprojekts finden Sie im File Explorer den Ordner Windows-appsample-photo-editor>PhotoEditor>Assets. Sie finden acht Objektdateien in diesem Ordner. Wählen Sie diese acht Dateien aus, und kopieren Sie sie in die Zwischenablage.

2. Suchen Sie auch im File Explorer den entsprechenden Ordner im von Ihnen erstellten Zielprojekt. Der Pfad zu diesem Ordner lautet PhotoEditor>PhotoEditor>Assets. Fügen Sie die soeben kopierten Objektdateien in diesen Ordner ein, und akzeptieren Sie die Aufforderung, die sieben Dateien zu ersetzen, die bereits im Ziel vorhanden sind.

3. Erweitern Sie im Ziel-project in Visual Studio in Solution Explorer den Ordner Assets. Fügen Sie diesem Ordner die vorhandene bg1.png Objektdatei hinzu, die Sie gerade eingefügt haben. Sie können den Mauszeiger über die Asset-Dateien bewegen. Für jede Datei wird eine Miniaturvorschau angezeigt, die bestätigt, dass Sie die Ressourcendateien korrekt ersetzt/hinzugefügt haben.

Migration des Foto-Modells

Photo ist eine Laufzeitklasse, die ein Foto darstellt. Es ist ein Modell (im Sinne von Modellen, Ansichten und Ansichtsmodellen).

Kopieren von Photo-Quellcodedateien

1. Suchen Sie in Ihrem Klon des Quellprojekts in File Explorer den Ordner Windows-appsample-photo-editor>PhotoEditor. In diesem Ordner finden Sie die drei Quellcodedateien Photo.idl, Photo.h und Photo.cpp. Diese Dateien implementieren gemeinsam die Photo-Laufzeitklasse. Wählen Sie diese drei Dateien aus, und kopieren Sie sie in die Zwischenablage.

2. Klicken Sie in Visual Studio mit der rechten Maustaste auf den Zielprojektknoten, und klicken Sie auf Ordner im Datei-Explorer öffnen. Dadurch wird der Zielordner project in File Explorer geöffnet. Fügen Sie die drei Dateien, die Sie gerade kopiert haben, in diesen Ordner ein.

3. Zurück im Solution Explorer, wenn der Zielknoten des Projekts ausgewählt ist, stellen Sie sicher, dass "Alle Dateien anzeigen" aktiviert ist. Klicken Sie mit der rechten Maustaste auf die drei Dateien, die Sie gerade eingefügt haben, und klicken Sie auf Include In Project. Deaktivieren Sie Alle Dateien anzeigen.

4. In dem Quellprojekt werden in Solution ExplorerPhoto.h und .cpp unter Photo.idl geschachtelt, um anzugeben, dass sie daraus generiert und davon abhängig sind. Wenn Ihnen diese Anordnung gefällt, können Sie dasselbe im Zielprojekt tun, indem Sie \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj manuell bearbeiten (Sie müssen zuerst Alles speichern in Visual Studio). Suchen Sie nach Folgendem:

   <ClInclude Include="Photo.h" />
   

   Und ersetzen Sie es durch:

   <ClInclude Include="Photo.h">
     <DependentUpon>Photo.idl</DependentUpon>
   </ClInclude>
   

   Wiederholen Sie diesen Vorgang für Photo.cpp, und speichern und schließen Sie die project Datei. Wenn Sie den Fokus auf Visual Studio setzen, klicken Sie auf Reload.

Migrieren von Photo-Quellcode

1. Suchen Sie in Photo.idl nach dem Namespacenamen Windows.UI.Xaml (der Namespace für UWP-XAML) und ändern Sie das zu Microsoft.UI.Xaml (der Namespace für WinUI 3 XAML).

2. In Photo.cpp fügen Sie #include "Photo.g.cpp" unmittelbar nach #include "Photo.h" zu den vorhandenen include-Direktiven hinzu. Dies ist einer der unterschiede zwischen Folder und Dateinamenunterschieden (C++/WinRT) die zwischen UWP und Windows App SDK Projekten zu beachten sind.

3. Führen Sie die folgende Suche/Ersetzung (Groß-/Kleinschreibung und ganzes Wort berücksichtigen) im Inhalt des gesamten Quellcodes in den Dateien durch, die Sie gerade kopiert und eingefügt haben.

   • Windows::UI::Xaml =>Microsoft::UI::Xaml

4. Kopieren Sie aus pch.h im Quellprojekt Folgendes, und fügen Sie diese in pch.h im Zielprojekt ein. Dies ist eine Teilmenge der Header-Dateien, die im Quellprojekt enthalten sind; dies sind nur die Header, die wir benötigen, um den bisher migrierten Code zu unterstützen.

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

5. Bestätigen Sie jetzt, dass Sie die Ziellösung erstellen können (Führen Sie sie aber noch nicht aus).

Migrieren der App-Klasse

Im Zielprojekt App.idl und App.xaml sind keine Änderungen erforderlich. Wir müssen jedoch App.xaml.h und App.xaml.cpp bearbeiten, um der App-Klasse einige neue Mitglieder hinzuzufügen. Wir werden dies auf eine Weise tun, die uns nach jedem Abschnitt das Erstellen ermöglicht (mit Ausnahme des letzten Abschnitts, in dem es um App:OnLaunched geht).

Bereitstellen des Hauptfensterobjekts

In diesem Schritt nehmen wir die in Change Windows.UI.Xaml.Window.Current to App.Window erläuterte Änderung vor.

Im Zielprojekt speichert App das Hauptfensterobjekt im privaten Datenmitglied window. Später im Migrationsprozess (bei der Migration der Verwendung des Quellprojekts von Window.Current) ist es praktisch, wenn dieses window-Datenmitglied statisch ist und auch über eine Zugriffsfunktion verfügbar gemacht wird. Daher nehmen wir diese Änderungen als Nächstes vor.

• Da wir window als statisch festlegen, müssen wir es in App.xaml.cpp statt über den standardmäßigen Memberinitialisierer initialisieren, den der Code derzeit verwendet. So sehen diese Änderungen in App.xaml.h und App.xaml.cpp aus:

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

Die Photo Editor-Beispiel-App verwendet Navigationslogik, um zwischen MainPage und DetailPage zu navigieren. Weitere Informationen zu Windows App SDK Apps, die Navigation benötigen (und die nicht), finden Sie unter Do muss ich die Seitennavigation implementieren?.

Die Mitglieder, die wir in den nächsten Abschnitten migrieren, sind also alle vorhanden, um die Navigation innerhalb der App zu unterstützen.

1. Beginnen wir mit der Migration des OnNavigationFailed-Ereignishandlers. Kopieren Sie die Deklaration und die Definition dieser Memberfunktion aus dem Quellprojekt und fügen Sie sie in das Zielprojekt ein (in App.xaml.h und App.xaml.cpp).

2. Im eingefügten Code ändern Sie App.xaml.h in Windows::UI::Xaml.

App::CreateRootFrame

1. Das Quellprojekt enthält eine Hilfsfunktion namens App::CreateRootFrame. Kopieren Sie die Deklaration und Definition der Hilfsfunktion aus dem Quellprojekt und fügen Sie sie in das Zielprojekt ein (in App.xaml.h und App.xaml.cpp).

2. Im eingefügten Code ändern Sie App.xaml.h in Windows::UI::Xaml.

3. Ändern Sie im Code, den Sie in App.xaml.cpp eingefügt haben, die beiden Vorkommen von Window::Current() in window (dies ist der Name des Datenelements der zuvor gesehenen App-Klasse).

App::OnLaunched

Das Zielprojekt enthält bereits eine Implementierung des OnLaunched-Ereignishandlers. Der Parameter ist ein Konstantenverweis auf eine Microsoft::UI::Xaml::LaunchActivatedEventArgs, was für die Windows App SDK korrekt ist (im Gegensatz zum Quellprojekt, das Windows::ApplicationModel::Activation::LaunchActivatedEventArgs verwendet, was für UWP korrekt ist).

• Wir müssen nur die beiden Definitionen (Quelle und Ziel) von OnLaunched zusammenführen, damit App::OnLaunched in App.xaml.cpp im Ziel project wie folgt aussieht. Beachten Sie, dass es window verwendet (anstelle von Window::Current(), wie die UWP-Version).

  void App::OnLaunched(LaunchActivatedEventArgs const&)
  {
       window = make<MainWindow>();
  
       Frame rootFrame = CreateRootFrame();
       if (!rootFrame.Content())
       {
           rootFrame.Navigate(xaml_typename<PhotoEditor::MainPage>());
       }
  
       window.Activate();
  }
  

Durch diesen Code hängt App von MainPage ab, sodass die weitere Erstellung erst möglich ist, wenn wir DetailPage und anschließend MainPage migriert haben. Wenn wir wieder bauen können, werden wir es bekannt geben.

Migrieren der DetailPage-Ansicht

DetailPage ist die Klasse, die die Seite des Fotoeditors darstellt, auf der Win2D-Effekte aktiviert, konfiguriert und miteinander verknüpft werden. Sie gelangen zur Foto-Editor-Seite, indem Sie auf MainPage eine Fotominiaturansicht auswählen. DetailPage ist eine Ansicht (im Sinne von Modellen, Ansichten und Ansichtsmodellen).

Verweisen Sie auf das Win2D NuGet-Paket

Zur Unterstützung von Code in DetailPage hat das Projekt eine Abhängigkeit von Microsoft.Graphics.Win2D. Daher benötigen wir auch eine Abhängigkeit von Win2D in unserem Ziel-project.

• Klicken Sie in der Ziellösung in Visual Studio auf Tools>NuGet Package Manager>Manage NuGet Packages for Solution... >Browse. Vergewissern Sie sich, dass Vorabversion einbeziehen deaktiviert ist, und geben Sie Microsoft.Graphics.Win2D in das Suchfeld ein, oder fügen Sie es ein. Wählen Sie das richtige Element in den Suchergebnissen aus, überprüfen Sie PhotoEditor project, und klicken Sie auf Install, um das Paket zu installieren.

Kopieren von DetailPage-Quellcodedateien

1. Suchen Sie in Ihrem Klon des Quellprojekts in File Explorer den Ordner Windows-appsample-photo-editor>PhotoEditor. In diesem Ordner finden Sie die vier Quellcodedateien DetailPage.idl, DetailPage.xaml, DetailPage.h und DetailPage.cpp. Diese Dateien implementieren die DetailPage-Ansicht. Wählen Sie diese vier Dateien aus, und kopieren Sie sie in die Zwischenablage.

2. Klicken Sie in Visual Studio mit der rechten Maustaste auf den Zielprojektknoten, und klicken Sie auf Ordner im Datei-Explorer öffnen. Dadurch wird der Zielordner project in File Explorer geöffnet. Fügen Sie die vier Dateien, die Sie gerade kopiert haben, in diesen Ordner ein.

3. Ändern Sie im Datei-Explorer die Namen von DetailPage.h und DetailPage.cpp jeweils in DetailPage.xaml.h und DetailPage.xaml.cpp. Dies ist einer der unterschiede zwischen Folder und Dateinamenunterschieden (C++/WinRT) die zwischen UWP und Windows App SDK Projekten zu beachten sind.

4. Zurück im Solution Explorer, wenn der Zielknoten des Projekts ausgewählt ist, stellen Sie sicher, dass "Alle Dateien anzeigen" aktiviert ist. Klicken Sie mit der rechten Maustaste auf die vier Dateien, die Sie gerade eingefügt haben (und umbenannt haben), und klicken Sie auf Include In Project. Deaktivieren Sie Alle Dateien anzeigen.

5. Im Quellprojekt ist in Solution ExplorerDetailPage.idl unter DetailPage.xaml verschachtelt. Wenn Ihnen diese Anordnung gefällt, können Sie dasselbe im Zielprojekt tun, indem Sie \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj manuell bearbeiten (Sie müssen zuerst Alles speichern in Visual Studio). Suchen Sie nach Folgendem:

   <Midl Include="DetailPage.idl" />
   

   Und ersetzen Sie es durch:

   <Midl Include="DetailPage.idl">
     <DependentUpon>DetailPage.xaml</DependentUpon>
   </Midl>
   

Speichern und schließen Sie die project Datei. Wenn Sie den Fokus auf Visual Studio setzen, klicken Sie auf Reload.

Migrieren des DetailPage-Quellcodes

1. Suchen Sie in DetailPage.idl nach Windows.UI.Xaml und ändern Sie dies in Microsoft.UI.Xaml.

2. Ändern Sie in DetailPage.xaml.cpp den Eintrag #include "DetailPage.h" in #include "DetailPage.xaml.h".

3. Fügen Sie direkt darunter #include "DetailPage.g.cpp" hinzu.

4. Um den Aufruf der statischen Methode App::Window (die wir gleich hinzufügen werden) kompilieren zu können, fügen Sie in DetailPage.xaml.cpp, #include "App.xaml.h" unmittelbar vor #include "Photo.h" hinzu.

5. Führen Sie die folgende Suche/Ersetzungen (Groß-/Kleinschreibung und ganzes Wort berücksichtigen) im Inhalt des Quellcodes in den Dateien durch, die Sie gerade kopiert und eingefügt haben.

   • In DetailPage.xaml.h und .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
   • In DetailPage.xaml.h und .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
   • In DetailPage.xaml.cpp, Window::Current() =>App::Window()

6. Kopieren Sie aus pch.h im Quellprojekt Folgendes, und fügen Sie diese in pch.h im Zielprojekt ein.

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

7. Fügen Sie außerdem oben in pch.h unmittelbar nach #pragma once Folgendes hinzu:

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

Wir können mit dem Erstellen noch nicht beginnen, das können wir jedoch nach der Migration von MainPage (was als Nächstes kommt).

Migrieren der MainPage-Ansicht

Die Hauptseite der App ist die Ansicht, die beim Ausführen der App zuerst angezeigt wird. Es ist die Seite, die die Fotos aus der Bildbibliothek lädt und eine gekachelte Miniaturansicht anzeigt.

Kopieren von MainPage-Quellcodedateien

1. Kopieren Sie ähnlich wie bei DetailPage nun MainPage.idl, MainPage.xaml, MainPage.h und MainPage.cpp.

2. Benennen Sie die .h- und .cpp-Dateien jeweils in .xaml.h und .xaml.cpp um.

3. Schließen Sie alle vier Dateien in das Ziel project wie zuvor ein.

4. Im Quellprojekt ist in Solution ExplorerMainPage.idl unter MainPage.xaml verschachtelt. Wenn Ihnen diese Anordnung gefällt, können Sie dasselbe im Ziel project tun, indem Sie manuell \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj bearbeiten. Suchen Sie nach Folgendem:

   <Midl Include="MainPage.idl" />
   

   Und ersetzen Sie sie durch:

   <Midl Include="MainPage.idl">
     <DependentUpon>MainPage.xaml</DependentUpon>
   </Midl>
   

Migrieren von MainPage-Quellcode

1. Suchen Sie in MainPage.idl nach Windows.UI.Xaml, und ändern Sie beide Vorkommen in Microsoft.UI.Xaml.

2. Ändern Sie in MainPage.xaml.cpp den Eintrag #include "MainPage.h" in #include "MainPage.xaml.h".

3. Fügen Sie direkt darunter #include "MainPage.g.cpp" hinzu.

4. Um den Aufruf der statischen Methode App::Window (die wir gleich hinzufügen werden) kompilieren zu können, fügen Sie in MainPage.xaml.cpp, #include "App.xaml.h" unmittelbar vor #include "Photo.h" hinzu.

Im nächsten Schritt nehmen wir die in ContentDialog und Popup erläuterte Änderung vor.

5. Fügen Sie also in MainPage.xaml.cpp in der MainPage::GetItemsAsync-Methode unmittelbar nach der Zeile ContentDialog unsupportedFilesDialog{}; diese Codezeile hinzu.

   unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
   

6. Führen Sie die folgende Suche/Ersetzungen (Groß-/Kleinschreibung und ganzes Wort berücksichtigen) im Inhalt des Quellcodes in den Dateien durch, die Sie gerade kopiert und eingefügt haben.

   • In MainPage.xaml.h und .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
   • In MainPage.xaml.h und .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
   • In MainPage.xaml.cpp, Window::Current() =>App::Window()

7. Kopieren Sie aus pch.h im Quellprojekt Folgendes, und fügen Sie diese in pch.h im Zielprojekt ein.

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

Vergewissern Sie sich, dass Sie die Ziellösung erstellen können (Führen Sie sie aber noch nicht aus).

MainWindow aktualisieren

1. Löschen Sie in MainWindow.xaml den StackPanel und dessen Inhalt, da wir in MainWindow keine Benutzeroberfläche benötigen. Dadurch bleibt nur das leere Window-Element übrig.

2. Löschen Sie in MainWindow.idl den Platzhalter Int32 MyProperty;, und belassen Sie nur den Konstruktor.

3. Löschen Sie in MainWindow.xaml.h und MainWindow.xaml.cpp die Deklarationen und Definitionen des Platzhalters MyProperty und myButton_Click, und belassen Sie nur der Konstruktor.

Migrationsänderungen, die aufgrund von Unterschieden im Threading-Modell erforderlich sind

Die beiden Änderungen in diesem Abschnitt sind aufgrund eines Threadmodellunterschieds zwischen UWP und dem Windows App SDK erforderlich, wie in ASTA zu STA Threadingmodell beschrieben. Hier finden Sie kurze Beschreibungen der Ursachen der Probleme und dann eine Möglichkeit, die einzelnen Probleme zu beheben.

Hauptseite

MainPage lädt Bilddateien aus Dem Ordner Pictures, ruft StorageItemContentProperties.GetImagePropertiesAsync auf, um die Eigenschaften der Bilddatei abzurufen, erstellt ein PhotoModellobjekt für jede Bilddatei (Speichern derselben Eigenschaften in einem Datenelement), und fügt dieses objekt Photo zu einer Auflistung hinzu. Die Sammlung von Photo-Objekten ist datengebunden an eine GridView-Ansicht in der Benutzeroberfläche. Im Namen dieses GridView behandelt MainPage das Ereignis ContainerContentChanging, und für Phase 1 ruft der Handler eine Coroutine auf, die StorageFile.GetThumbnailAsync aufruft. Dieser Aufruf von GetThumbnailAsync führt dazu, dass Nachrichten verarbeitet werden (es wird nicht sofort beendet und führt alle Aufgaben asynchron aus), und dies verursacht Wiedereintritt. Das Ergebnis ist, dass die Items-Sammlung von GridView geändert wird, während das Layout ausgeführt wird, und das führt zu einem Absturz.

Wenn wir den Aufruf von StorageItemContentProperties::GetImagePropertiesAsync auskommentieren, kommt es zu keinem Absturz. Die eigentliche Lösung besteht jedoch darin, den StorageFile.GetThumbnailAsync-Aufruf explizit asynchron zu machen, indem man kooperativ auf wil::resume_foreground wartet, unmittelbar bevor GetThumbnailAsync aufgerufen wird. Dies funktioniert, weil wil::resume_foreground den darauffolgenden Code als Aufgabe im DispatcherQueue einplant.

Dies ist der zu ändernde Code:

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

Die Photo::ImageTitle-Eigenschaft ist datengebunden an die Benutzeroberfläche, sodass die Benutzeroberfläche die Accessorfunktion für diese Eigenschaft aufruft, wenn sie deren Wert benötigt. Wenn wir jedoch versuchen, auf ImageProperties.Title aus dieser Zugriffsfunktion im UI-Thread zuzugreifen, tritt eine Zugriffsverletzung auf.

Stattdessen können wir einmal vom Konstruktor von Photo auf den Title zugreifen und ihn im m_imageName-Datenmitglied speichern, wenn er nicht leer ist. Dann müssen wir in der Photo::ImageTitle-Zugriffs-Funktion nur auf das m_imageName-Datenelement zugreifen.

Dies ist der zu ändernde Code:

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

Dies sind die letzten Änderungen, die wir vornehmen müssen, um die Photo-Editor-Beispiel-App zu migrieren. Im Abschnitt Testen der migrierten App bestätigen wir, dass wir die Schritte ordnungsgemäß ausgeführt haben.

Bekannte Probleme

Problem des App-Typs (betrifft nur Vorschau 3)

Wenn Sie in dieser Fallstudie die Projektvorlage aus dem VSIX für Windows App SDK version 1.0 Preview 3 verwendet haben, müssen Sie eine kleine Korrektur an PhotoEditor.vcxproj vornehmen. Hier erfahren Sie, wie Sie das machen können.

Klicken Sie in Visual Studio in Solution Explorer mit der rechten Maustaste auf den project Knoten, und klicken Sie auf Unload Project. Jetzt ist PhotoEditor.vcxproj zur Bearbeitung geöffnet. Fügen Sie als erstes untergeordnetes Element von Project ein PropertyGroupElement wie folgt hinzu:

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

Speichern und schließen Sie PhotoEditor.vcxproj. Klicken Sie mit der rechten Maustaste auf den Projektknoten, und klicken Sie auf Projekt neu laden. Erstellen Sie nun das Projekt neu.

Testen der migrierten App

Erstellen Sie nun das Projekt, und führen Sie die App aus, um die App zu testen. Wählen Sie ein Bild aus, legen Sie einen Zoomfaktor fest, wählen Sie Effekte aus und konfigurieren Sie sie.

Anhang: Kopieren des Inhalts der Photo-Modelldateien

Wie bereits erwähnt, haben Sie die Möglichkeit, die Quellcodedateien selbst oder den Inhalt der Quellcodedateien zu kopieren. Wir haben bereits gezeigt, wie Sie die Quellcodedateien selbst kopieren. Dieser Abschnitt enthält ein Beispiel für das Kopieren von Dateiinhalten.

Suchen Sie im Quell-project in Visual Studio den Ordner PhotoEditor (Universal Windows)>Models. Dieser Ordner enthält die Dateien Photo.idl, Photo.h und Photo.cpp, die gemeinsam die Photo-Laufzeitklasse implementieren.

Hinzufügen der IDL und Generieren von Stubs

Fügen Sie in Ihrem Ziel-project in Visual Studio dem project ein neues Midl File (.idl)Element hinzu. Benennen Sie das neue Element Photo.idl. Löschen Sie den Standardinhalt von Photo.idl.

Kopieren Sie aus dem Projekt in Visual Studio den Inhalt von Models>Photo.idl, und fügen Sie ihn in die Datei Photo.idl ein, die Sie gerade zu Ihrem Zielprojekt hinzugefügt haben. Suchen Sie in dem eingefügten Code nach Windows.UI.Xaml und ändern Sie dies in Microsoft.UI.Xaml.

Speichern Sie die Datei .

Erstellen Sie nun die Ziellösung. Auch wenn es nicht vollständig abgeschlossen wird, ist das Erstellen jetzt erforderlich, da es die Quellcodedateien (Stubs) generiert, die wir benötigen, um die Implementierung des Photo-Modells zu starten.

Klicken Sie in Visual Studio mit der rechten Maustaste auf den Zielprojektknoten, und klicken Sie auf Ordner im Datei-Explorer öffnen. Dadurch wird der Zielordner project in File Explorer geöffnet. Navigieren Sie dort zum Generated Files\sources-Ordner (sodass Sie sich in \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources befinden). Kopieren Sie die Stubdateien Photo.h und .cpp und fügen Sie sie in den Projektordner ein, der sich nun zwei Ordnerebenen höher in \PhotoEditor\PhotoEditor\PhotoEditor befindet.

Zurück im Solution Explorer, wenn der Zielknoten des Projekts ausgewählt ist, stellen Sie sicher, dass "Alle Dateien anzeigen" aktiviert ist. Klicken Sie mit der rechten Maustaste auf die soeben eingefügten Stubdateien (Photo.h und .cpp), und klicken Sie auf Include In Project. Deaktivieren Sie Alle Dateien anzeigen.

Am Anfang des Inhalts von static_assert und Photo.h wird eine .cpp angezeigt, die Sie löschen müssen.

Vergewissern Sie sich, dass Sie den Buildvorgang erneut ausführen können. (Führen Sie ihn aber noch nicht aus.)

Migrieren von Code in die Stubs

Kopieren Sie den Inhalt von Photo.h und .cpp aus dem Quellprojekt in das Zielprojekt.

Von hier aus sind die gleichen Schritte zur Migration des kopierten Codes erforderlich wie im Abschnitt Migrieren von Photo-Quellcode angegeben.

Zugehörige Themen

• Windows App SDK und unterstützte Windows-Versionen
• UWP Photo Editor-Beispielanwendung
• Allgemeine Migrationsstrategie
• Zuordnung von UWP-APIs zur Windows App SDK
• WinUI-Migration