Migracja zestawu SDK aplikacji systemu Windows przykładowej aplikacji edytora zdjęć platformy UWP (C++/WinRT)

W tym temacie przedstawiono analizę przypadku wykonywania przykładowej aplikacji C++/WinRT edytora zdjęć platformy UWPi migrowania jej do zestawu SDK aplikacji systemu Windows.

• Zacznij od sklonowania repozytorium przykładowej aplikacji UWPi otwarcia rozwiązania w programie Visual Studio.

Instalowanie narzędzi dla zestawu SDK aplikacji systemu Windows

Aby skonfigurować komputer programistyczny, zobacz Zainstaluj narzędzia dla Windows App SDK.

Tworzenie nowego projektu

• W programie Visual Studio utwórz nowy projekt C++/WinRT z szablonu projektu Blank App, Packaged (WinUI 3 in Desktop). Nadaj projektowi nazwę PhotoEditor, usuń zaznaczenie Umieść rozwiązanie i projekt w tym samym katalogu. Najnowszą wersję systemu operacyjnego klienta (nie wersję zapoznawczą) można ustawić jako docelową.

Kolejność migrowania kodu

MainPage jest ważnym i znaczącym elementem aplikacji. Jeśli jednak zaczniemy od migracji, wkrótce zdajemy sobie sprawę, że MainPage ma zależność od widoku DetailPage; a następnie DetailPage ma zależność od modelu Photo. Dlatego w tym przewodniku zajmiemy się tym podejściem.

• Zaczniemy od skopiowania plików zasobów.
• Następnie zmigrujemy model Photo.
• Następnie zmigrujemy klasę App, ponieważ trzeba do niej dodać elementy członkowskie, od których będą zależeć DetailPage i MainPage.
• Następnie rozpoczniemy migrację widoków, zaczynając od DetailPage najpierw.
• Zakończymy, migrując widok MainPage.

Będziemy kopiować całe pliki kodu źródłowego

W tym przewodniku będziemy kopiować pliki kodu źródłowego przy użyciu Eksploratora plików. Jeśli wolisz skopiować plik zawartości, zobacz Dodatek: kopiowanie zawartości pliki modelu na końcu tego tematu, aby zapoznać się z przykładem tego, jak można to zrobić dla Photo (i można następnie zastosować podobną procedurę do innych typów w projekcie). Ta opcja obejmuje jednak o wiele więcej kroków.

Kopiuj pliki zasobów

1. W klonie projektu źródłowego w eksploratorze plików znajdź folder Windows-appsample-photo-editor>PhotoEditor>Assets. W tym folderze znajdziesz osiem plików zasobów. Wybierz te osiem plików i skopiuj je do schowka.

2. Ponadto w eksploratorze plików znajdź odpowiedni folder w utworzonym projekcie docelowym. Ścieżka do tego folderu to PhotoEditor>PhotoEditor>Assets. Wklej do tego folderu skopiowane pliki elementów zawartości i zaakceptuj monit o zastąpienie siedmiu plików, które już istnieją w miejscu docelowym.

3. W docelowym projekcie w programie Visual Studio, w Eksploratorze rozwiązań , rozwiń folder Zasoby . Dodaj do tego folderu istniejący plik zasobu bg1.png, który właśnie wkleiłeś. Najechać wskaźnikiem myszy na pliki zasobów. Zostanie wyświetlony podgląd miniatur dla każdego z nich z potwierdzeniem, że pliki elementów zawartości zostały zastąpione/dodane poprawnie.

Migrowanie modelu zdjęć

photo to klasa środowiska uruchomieniowego reprezentująca zdjęcie. Jest to model (w sensie modeli, widoków i modeli widoków).

Kopiowanie plików kodu źródłowego zdjęcia

1. W klonie projektu źródłowego w eksploratorze plików znajdź folder Windows-appsample-photo-editor>PhotoEditor. W tym folderze znajdują się trzy pliki kodu źródłowego Photo.idl, Photo.hi Photo.cpp; te pliki razem implementują klasę środowiska uruchomieniowego Photo. Wybierz te trzy pliki i skopiuj je do schowka.

2. W programie Visual Studio kliknij prawym przyciskiem myszy docelowy węzeł projektu, a następnie kliknij Otwórz folder w Eksploratorze plików. Spowoduje to otwarcie docelowego folderu projektu w eksploratorze plików . Wklej do tego folderu trzy skopiowane właśnie pliki.

3. Ponownie w eksploratorze rozwiązań z wybranym węzłem projektu docelowego upewnij się, że pokaż wszystkie pliki jest włączony. Kliknij prawym przyciskiem myszy trzy wklejone pliki, a następnie kliknij Include In Project. Przełącz Pokaż wszystkie pliki wyłączone.

4. W projekcie źródłowym w Ekspoloratorze rozwiązań , Photo.h i .cpp są zagnieżdżone w Photo.idl, aby wskazać, że są z niego wygenerowane (zależne od niego). Jeśli chcesz to zrobić, możesz wykonać tę samą czynność w projekcie docelowym, ręcznie edytując \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj (najpierw musisz Zapisz wszystkie w programie Visual Studio). Znajdź następujące elementy:

   <ClInclude Include="Photo.h" />
   

   Zastąp go następującymi elementami:

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

   Powtórz to dla Photo.cppi zapisz i zamknij plik projektu. Po ustawieniu fokusu z powrotem na program Visual Studio kliknij przycisk Załaduj ponownie.

Migrowanie kodu źródłowego zdjęcia

1. W Photo.idlwyszukaj nazwę przestrzeni nazw Windows.UI.Xaml (czyli przestrzeni nazw dla języka XAML platformy UWP) i zmień wartość na Microsoft.UI.Xaml (czyli przestrzeni nazw dla języka WinUI XAML).

2. W Photo.cppdodaj #include "Photo.g.cpp" do istniejących dyrektyw inkluzyjnych bezpośrednio po #include "Photo.h". Jest to jedna z różnic między folderami i nazwami plików (C++/WinRT), o których należy pamiętać między projektami platformy UWP i zestawu SDK aplikacji systemu Windows.

3. Zastosuj następujące polecenie znajdź/zamień (z uwzględnieniem wielkości liter i całego wyrazu) w zawartości całego kodu źródłowego plików, które właśnie skopiowałeś i wkleiłeś.

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

4. Z pch.h w projekcie źródłowym skopiuj następujące elementy i wklej je do pch.h w projekcie docelowym. Jest to podzbiór plików nagłówków zawartych w projekcie źródłowym; są to tylko nagłówki, których potrzebujemy do obsługi kodu, który przenieśliśmy do tej pory.

   #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. Teraz upewnij się, że możesz skompilować rozwiązanie docelowe (ale nie zostało jeszcze uruchomione).

Migrowanie klasy App

Żadne zmiany nie są konieczne dla App.idl i App.xamlprojektu docelowego. Musimy jednak edytować App.xaml.h i app.xaml.cpp, aby dodać nowe elementy członkowskie do klasy App. Zrobimy to w taki sposób, aby umożliwić nam budowanie po każdej sekcji (z wyjątkiem ostatniej sekcji, czyli o App::OnLaunched).

Udostępnianie obiektu głównego okna

W tym kroku wprowadzimy zmianę, która zostanie wyjaśniona w Zmień windows.UI.Xaml.Window.Current na App.Window.

W projekcie docelowym App przechowuje główny obiekt okna w swoim prywatnym elemencie danych członkowskich window. W dalszej części procesu migracji (podczas migracji projektu źródłowego użyjemy okna .Current), będzie to wygodne, jeśli to okno element członkowski danych jest statyczny; i jest również udostępniany za pośrednictwem funkcji dostępu. Teraz wprowadzimy te zmiany.

• Ponieważ ustawiamy okno jako statyczne, musimy zainicjować je w App.xaml.cpp zamiast za pomocą domyślnego inicjatora członkowskiego, którego kod używa obecnie. Poniżej przedstawiono, jak te zmiany wyglądają w App.xaml.h i 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

Przykładowa aplikacja Photo Editor korzysta z logiki nawigacji, aby przełączać się między MainPage i DetailPage. Aby uzyskać więcej informacji na temat aplikacji Windows App SDK, które wymagają nawigacji oraz tych, które jej nie wymagają, zobacz Czy muszę zaimplementować nawigację stron?.

Zatem członkowie, których będziemy przenoszeni w kilku kolejnych sekcjach, istnieją, aby obsługiwać nawigację w aplikacji.

1. Zacznijmy od migracji programu obsługi zdarzeń OnNavigationFailed. Skopiuj deklarację i definicję tej funkcji składowej z projektu źródłowego i wklej ją do projektu docelowego (w App.xaml.h i App.xaml.cpp).

2. W kodzie wklejonym do App.xaml.hzmień Windows::UI::Xaml na Microsoft::UI::Xaml.

App::CreateRootFrame

1. Projekt źródłowy zawiera funkcję pomocnika o nazwie App::CreateRootFrame. Skopiuj deklarację i definicję tej funkcji pomocniczej z projektu źródłowego i wklej ją do projektu docelowego (w App.xaml.h i App.xaml.cpp).

2. W kodzie wklejonym do App.xaml.hzmień Windows::UI::Xaml na Microsoft::UI::Xaml.

3. W kodzie wklejonym w App.xaml.cppzmień dwa wystąpienia Window::Current() na window (czyli nazwę pola danych klasy App, którą widzieliśmy wcześniej).

App::OnLaunched

Projekt docelowy zawiera już implementację programu obsługi zdarzeń onLaunched. Jego parametr jest stałym odwołaniem do Microsoft::UI::Xaml::LaunchActivatedEventArgs, które jest poprawne dla Windows App SDK, w przeciwieństwie do projektu źródłowego, który używa Windows::ApplicationModel::Activation::LaunchActivatedEventArgs, który jest poprawny dla platformy UWP.

• Wystarczy scalić dwie definicje (źródłową i docelową) OnLaunched, aby App::OnLaunched w App.xaml.cpp w projekcie docelowym wyglądało jak poniższe zestawienie. Należy pamiętać, że używa window (zamiast Window::Current(), podobnie jak wersja platformy UWP).

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

Powyższy kod powoduje, że App zależy od MainPage, dlatego nie będziemy mogli skompilować na tym etapie, dopóki nie zmigrujemy DetailPage, a następnie MainPage. Kiedy będziemy mogli ponownie zbudować, poinformujemy o tym.

Migrowanie widoku DetailPage

DetailPage jest klasą reprezentującą stronę edytora zdjęć, gdzie efekty Win2D są przełączane, ustawiane i łączone. Aby przejść do strony edytora zdjęć, wybierz miniaturę zdjęcia na MainPage. DetailPage jest widokiem (w sensie modeli, widoków i widokomodeli).

Odwołaj się do pakietu Win2D NuGet

Aby obsługiwać kod w DetailPage, projekt źródłowy ma zależność od Microsoft.Graphics.Win2D. Dlatego potrzebujemy również zależności od win2D w naszym projekcie docelowym.

• W rozwiązaniu docelowym w programie Visual Studio, kliknij Narzędzia>Menedżer pakietów NuGet>Zarządzaj pakietami NuGet dla rozwiązania...>Przeglądaj. Upewnij się, że Dołącz wersję wstępną jest niezaznaczone i wpisz lub wklej Microsoft.Graphics.Win2D w polu wyszukiwania. Wybierz prawidłowy element w wynikach wyszukiwania, sprawdź projekt PhotoEditor, a następnie kliknij przycisk Zainstaluj, aby zainstalować pakiet.

Kopiowanie plików kodu źródłowego strony DetailPage

1. W klonie projektu źródłowego w eksploratorze plików znajdź folder Windows-appsample-photo-editor>PhotoEditor. W tym folderze znajdują się cztery pliki kodu źródłowego DetailPage.idl, DetailPage.xaml, DetailPage.hi DetailPage.cpp; te pliki razem implementują widok DetailPage. Zaznacz te cztery pliki i skopiuj je do schowka.

2. W programie Visual Studio kliknij prawym przyciskiem myszy docelowy węzeł projektu, a następnie kliknij Otwórz folder w Eksploratorze plików. Spowoduje to otwarcie docelowego folderu projektu w eksploratorze plików . Wklej do tego folderu cztery skopiowane pliki.

3. Nadal w eksploratorze plików zmień nazwy DetailPage.h i DetailPage.cpp odpowiednio na DetailPage.xaml.h i DetailPage.xaml.cpp. Jest to jedna z różnic między folderami i nazwami plików (C++/WinRT), o których należy pamiętać między projektami platformy UWP i zestawu SDK aplikacji systemu Windows.

4. Ponownie w Eksploratorze rozwiązań , z wybranym węzłem projektu docelowego, upewnij się, że opcja Pokaż wszystkie pliki jest włączona. Kliknij prawym przyciskiem myszy cztery pliki, które właśnie wkleiłeś (i zmieniłeś ich nazwy), a następnie kliknij Uwzględnij w projekcie. Przełącz Pokaż wszystkie pliki wyłączone.

5. W projekcie źródłowym, w Eksploratorze rozwiązań , DetailPage.idl jest zagnieżdżony pod DetailPage.xaml. Jeśli chcesz to zrobić, możesz wykonać tę samą czynność w projekcie docelowym, ręcznie edytując \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj (najpierw musisz Zapisz wszystkie w programie Visual Studio). Znajdź to, co następuje:

   <Midl Include="DetailPage.idl" />
   

   Zastąp go następującymi elementami:

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

Zapisz i zamknij plik projektu. Po ustawieniu fokusu z powrotem na program Visual Studio kliknij przycisk Załaduj ponownie.

Migrowanie kodu źródłowego strony DetailPage

1. W DetailPage.idlwyszukaj Windows.UI.Xamli zmień na Microsoft.UI.Xaml.

2. W DetailPage.xaml.cppzmień #include "DetailPage.h" na #include "DetailPage.xaml.h".

3. Bezpośrednio poniżej dodaj #include "DetailPage.g.cpp".

4. Aby wywołanie metody statycznej App::Window (którą wkrótce dodamy) mogło się skompilować, będąc nadal w DetailPage.xaml.cpp, dodaj #include "App.xaml.h" bezpośrednio przed #include "Photo.h".

5. Wprowadź następujące operacje znajdowania/zastępowania (dopasowanie wielkości liter i całe wyrazy) w zawartości kodu źródłowego w właśnie skopiowanych i wklejonych plikach.

   • W DetailPage.xaml.h i .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
   • W DetailPage.xaml.h i .xaml.cppWindows::UI::Xaml =>Microsoft::UI::Xaml
   • W DetailPage.xaml.cppWindow::Current() =>App::Window()

6. Z pch.h w projekcie źródłowym skopiuj następujące elementy i wklej je do pch.h w projekcie docelowym.

   #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. Ponadto w górnej części pch.h, natychmiast po #pragma oncedodaj następujące elementy:

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

Nie możemy jeszcze zbudować, ale będziemy mogli po migracji MainPage (co jest kolejnym krokiem).

Migrowanie widoku MainPage

Strona główna aplikacji reprezentuje widok wyświetlany jako pierwszy podczas uruchamiania aplikacji. Jest to strona, która ładuje zdjęcia z biblioteki obrazów i wyświetla widok miniatur kafelków.

Kopiowanie plików kodu źródłowego programu MainPage

1. Podobnie jak w przypadku DetailPage, skopiuj teraz MainPage.idl, MainPage.xaml, MainPage.hi MainPage.cpp.

2. Zmień odpowiednio nazwy plików .h i .cpp na .xaml.h i .xaml.cpp.

3. Uwzględnij wszystkie cztery pliki w projekcie docelowym, tak jak poprzednio.

4. W projekcie źródłowym, w Eksploratorze rozwiązań ,, MainPage.idl jest zagnieżdżone w MainPage.xaml. Jeśli chcesz to zrobić, możesz wykonać to samo w projekcie docelowym, ręcznie edytując \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj. Znajdź następujące elementy:

   <Midl Include="MainPage.idl" />
   

   i zastąp go:

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

Migrowanie kodu źródłowego programu MainPage

1. W MainPage.idlwyszukaj Windows.UI.Xamli zmień oba wystąpienia na Microsoft.UI.Xaml.

2. W MainPage.xaml.cppzmień #include "MainPage.h" na #include "MainPage.xaml.h".

3. Bezpośrednio poniżej dodaj #include "MainPage.g.cpp".

4. Aby wywołanie metody statycznej App::Window (którą wkrótce dodamy) było możliwe do skompilowania, będąc nadal w MainPage.xaml.cpp, dodaj #include "App.xaml.h" bezpośrednio przed #include "Photo.h".

W następnym kroku wprowadzimy zmianę, która jest objaśniana w ContentDialog i Popup.

5. Tak więc, nadal w MainPage.xaml.cpp, w metodzie MainPage::GetItemsAsync, bezpośrednio po wierszu ContentDialog unsupportedFilesDialog{};, dodaj ten wiersz kodu.

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

6. Wprowadź następujące operacje znajdź i zamień (uwzględnij wielkość liter i cały wyraz) w zawartości kodu źródłowego plików, które właśnie skopiowano i wklejono.

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

7. Z pch.h w projekcie źródłowym skopiuj następujące elementy i wklej je do pch.h w projekcie docelowym.

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

Upewnij się, że możesz skompilować rozwiązanie docelowe, ale jeszcze nie uruchamiaj.

Aktualizowanie systemu MainWindow

1. W MainWindow.xamlusuń StackPanel i jego zawartość, ponieważ nie potrzebujemy żadnego interfejsu użytkownika w MainWindow. Pozostawia to tylko pusty element Window.

2. W MainWindow.idlusuń element zastępczy Int32 MyProperty;, pozostawiając tylko konstruktor.

3. W MainWindow.xaml.h i MainWindow.xaml.cppusuń deklaracje i definicje symbolu zastępczego MyProperty i myButton_Click, pozostawiając tylko konstruktor.

Zmiany migracyjne potrzebne z powodu różnic w modelu wątkowania.

Dwie zmiany w tej sekcji są niezbędne ze względu na różnicę modelu wątkowego między platformą UWP i zestawem SDK aplikacji systemu Windows, zgodnie z opisem w ASTA do modelu wątkowania STA. Poniżej przedstawiono krótkie opisy przyczyn problemów, a następnie sposób ich rozwiązania.

Strona główna

MainPage ładuje pliki obrazów z folderu Pictures, wywołuje StorageItemContentProperties.GetImagePropertiesAsync, aby uzyskać właściwości pliku obrazu, tworzy obiekt modelu Photo dla każdego pliku obrazu (zapisywanie tych samych właściwości w elemencie danych) i dodaje obiekt Photo do kolekcji. Kolekcja obiektów Photo jest powiązana z GridView w interfejsie użytkownika. W imieniu tego GridView, program MainPage obsługuje zdarzenie ContainerContentChanging, a w fazie 1 ten obsługujący wywołuje coroutine, która z kolei wywołuje StorageFile.GetThumbnailAsync. To wywołanie polecenia GetThumbnailAsync powoduje pompowanie komunikatów (nie zwraca się natychmiast i wszystkich asynchronicznej pracy) i powoduje ponowne wywołanie. Rezultatem jest to, że GridView ma swoją kolekcję Items zmienioną podczas układu, co powoduje awarię.

Jeśli oznaczymy jako komentarz wywołanie metody StorageItemContentProperties::GetImagePropertiesAsync, nie otrzymamy awarii. Jednak prawdziwą poprawką jest uczynienie wywołania StorageFile.GetThumbnailAsync wyraźnie asynchronicznym poprzez koordynowane oczekiwanie na wil::resume_foreground bezpośrednio przed wywołaniem GetThumbnailAsync. Działa to, ponieważ wil::resume_foreground planuje, aby kod, który następuje, stał się zadaniem w DispatcherQueue.

Oto kod do zmiany:

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

Fotka

Właściwość Photo::ImageTitle jest powiązana z danymi interfejsu użytkownika, dlatego interfejs użytkownika korzysta z funkcji dostępowe tej właściwości, gdy potrzebuje jej wartości. Ale gdy próbujemy uzyskać dostęp do ImageProperties.Title z tej funkcji dostępowej w wątku interfejsu użytkownika, uzyskujemy błąd naruszenia dostępu.

Zamiast tego możemy jednokrotnie uzyskać dostęp do tego Title z konstruktora Photoi zapisać go jako członek danych m_imageName, o ile nie jest pusty. Następnie w funkcji dostępu Photo::ImageTitle musimy uzyskać dostęp tylko do członka danych m_imageName.

Oto kod do zmiany:

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

Są to ostatnie zmiany, które należy wprowadzić, aby przeprowadzić migrację przykładowej aplikacji Edytora zdjęć. W sekcji Przetestuj zmigrowaną aplikację potwierdzimy, że prawidłowo wykonaliśmy kroki.

Znane problemy

Problem z typem aplikacji (dotyczy tylko wersji zapoznawczej 3)

Jeśli śledziłeś to badanie przypadku, używając szablonu projektu z zestawu VSIX dla Windows App SDK w wersji 1.0 Preview 3, to musisz wprowadzić niewielką poprawkę do PhotoEditor.vcxproj. Oto jak to zrobić.

W programie Visual Studio w Eksploratorze rozwiązań kliknij prawym przyciskiem myszy na węźle projektu, a następnie kliknij Wyładuj projekt. Teraz PhotoEditor.vcxproj jest otwarty do edycji. Jako pierwszy element podrzędny projektu , dodaj element PropertyGroup w następujący sposób:

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

Zapisz i zamknij PhotoEditor.vcxproj. Kliknij prawym przyciskiem myszy węzeł projektu, a następnie kliknij Załaduj ponownie projekt. Teraz ponownie skompiluj projekt.

Testowanie zmigrowanej aplikacji

Teraz skompiluj projekt i uruchom aplikację, aby ją przetestować. Wybierz obraz, ustaw poziom powiększenia, wybierz efekty i skonfiguruj je.

Dodatek: kopiowanie zawartości plików modelu Photo

Jak omówiono wcześniej, masz możliwość skopiowania samych plików kodu źródłowego lub zawartości plików kodu źródłowego . Pokazaliśmy już, jak skopiować same pliki kodu źródłowego . W tej sekcji przedstawiono przykład kopiowania zawartości pliku .

W projekcie źródłowym w programie Visual Studio znajdź folder PhotoEditor (universal Windows)>Models. Ten folder zawiera pliki Photo.idl, Photo.hi Photo.cpp, które razem implementują klasę środowiska uruchomieniowego Photo.

Dodawanie kodu IDL i generowanie wycinków

W projekcie docelowym w programie Visual Studio dodaj nowy element Midl File (idl) do projektu. Nazwij nowy element Photo.idl. Usuń domyślną zawartość Photo.idl.

Z projektu źródłowego w programie Visual Studio skopiuj zawartość Models>Photo.idli wklej ją do pliku Photo.idl, który właśnie został dodany do projektu docelowego. W wklejonym kodzie wyszukaj Windows.UI.Xamli zmień go na Microsoft.UI.Xaml.

Zapisz plik.

Teraz skompiluj rozwiązanie docelowe. Mimo że nie zostanie ukończone, budowanie jest teraz konieczne, ponieważ wygeneruje pliki kodu źródłowego (wycinki), które są potrzebne do rozpoczęcia implementacji modelu Photo.

W programie Visual Studio kliknij prawym przyciskiem myszy docelowy węzeł projektu, a następnie kliknij Otwórz folder w Eksploratorze plików. Spowoduje to otwarcie docelowego folderu projektu w eksploratorze plików . W tym miejscu przejdź do folderu Generated Files\sources (więc będziesz w \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources). Skopiuj pliki wycinkowe Photo.h i .cpp, a następnie wklej je do folderu projektu, który ma teraz dwa poziomy folderów w \PhotoEditor\PhotoEditor\PhotoEditor.

Wracając do Eksploratora rozwiązań, z wybranym docelowym węzłem projektu, upewnij się, że opcja Pokaż wszystkie pliki jest włączona. Kliknij prawym przyciskiem myszy na wklejone pliki wycinkowe (Photo.h i .cpp), a następnie kliknij Dołącz do projektu. Przełącz Pokaż wszystkie pliki wyłączone.

W górnej części zawartości Photo.h i .cppzobaczysz static_assert, które należy usunąć.

Upewnij się, że możesz ponownie skompilować (ale jeszcze nie uruchamiaj).

Przenieś kod do stubów

Skopiuj zawartość Photo.h i .cpp z projektu źródłowego do projektu docelowego.

W tym miejscu pozostałe kroki migracji skopiowanego kodu są takie same jak w sekcji Migrate Photo kodu źródłowego.

Tematy pokrewne

• zestaw SDK aplikacji systemu Windows i obsługiwane wersje systemu Windows
• przykładowa aplikacja edytora zdjęć platformy UWP
• ogólna strategia migracji
• Mapowanie interfejsów API UWP na Windows Apps SDK
• migracja WinUI