Migrasi SDK Aplikasi Windows aplikasi sampel Editor Foto UWP (C++/WinRT)

Artikel
04/03/2023

Topik ini adalah studi kasus tentang mengambil aplikasi sampel C++/WinRT UWP Photo Editor, dan memigrasikannya ke SDK Aplikasi Windows.

Mulailah dengan mengkloning repositori aplikasi sampel UWP, dan membuka solusi di Visual Studio.

Penting

Untuk pertimbangan dan strategi untuk mendekati proses migrasi, dan cara menyiapkan lingkungan pengembangan Anda untuk migrasi, lihat Strategi migrasi keseluruhan.

Menginstal alat untuk SDK Aplikasi Windows

Untuk menyiapkan komputer pengembangan Anda, lihat Menginstal alat untuk SDK Aplikasi Windows.

Penting

Anda akan menemukan topik catatan rilis bersama dengan topik saluran rilis SDK Aplikasi Windows. Ada catatan rilis untuk setiap saluran. Pastikan untuk memeriksa batasan dan masalah yang diketahui dalam catatan rilis tersebut, karena hal tersebut dapat memengaruhi hasil berikut bersama dengan studi kasus ini dan/atau menjalankan aplikasi yang dimigrasikan.

Membuat proyek baru

Di Visual Studio, buat proyek C++/WinRT baru dari templat proyek Aplikasi Kosong, Dipaketkan (WinUI 3 di Desktop). Beri nama proyek PhotoEditor, hapus centang Tempatkan solusi dan proyek di direktori yang sama. Anda dapat menargetkan rilis terbaru (bukan pratinjau) dari sistem operasi klien.

Catatan

Kami akan merujuk ke versi UWP dari proyek sampel (yang Anda kloning dari repositorinya) sebagai solusi/proyek sumber. Kami akan menyebut versi SDK Aplikasi Windows sebagai solusi/proyek target.

Urutan di mana kita akan memigrasikan kode

MainPage adalah bagian penting dan menonjol dari aplikasi. Tetapi jika kita harus mulai dengan memigrasikan itu, maka kita akan segera menyadari bahwa MainPage memiliki dependensi pada tampilan DetailPage; dan kemudian DetailPage itu memiliki dependensi pada model Foto. Jadi untuk panduan ini kita akan mengambil pendekatan ini.

Kita akan mulai dengan menyalin file aset.
Kemudian kita akan memigrasikan model Foto .
Selanjutnya kita akan memigrasikan kelas Aplikasi (karena itu membutuhkan beberapa anggota yang menambahkannya bahwa DetailPage dan MainPage akan bergantung pada).
Kemudian kita akan mulai memigrasikan tampilan, dimulai dengan DetailPage terlebih dahulu.
Dan kita akan menyelesaikan dengan memigrasikan tampilan MainPage .

Kami akan menyalin seluruh file kode sumber

Dalam panduan ini kita akan menyalin file kode sumber menggunakan File Explorer. Jika Anda lebih suka menyalin konten file, maka lihat lampiran: menyalin konten bagian file model Foto di akhir topik ini untuk contoh bagaimana Anda dapat melakukannya untuk Foto (dan Anda kemudian dapat menerapkan prosedur serupa ke jenis lain dalam proyek). Opsi itu memang melibatkan lebih banyak langkah.

Menyalin file aset

Di klon proyek sumber Anda, di File Explorer, temukan folder Aset PhotoEditor PhotoEditor>folder-appsample-photo-editor>. Anda akan menemukan delapan file aset di folder tersebut. Pilih delapan file tersebut, dan salin ke clipboard.
Juga di File Explorer, sekarang temukan folder yang sesuai di proyek target yang Anda buat. Jalur ke folder tersebut adalah Aset PhotoEditor PhotoEditor>>. Tempelkan ke folder tersebut file aset yang baru saja Anda salin, dan terima perintah untuk mengganti tujuh file yang sudah ada di tujuan.
Di proyek target Anda di Visual Studio, di Penjelajah Solusi, perluas folder Aset. Tambahkan ke folder tersebut file aset yang sudah ada bg1.png yang baru saja Anda tempelkan. Anda dapat mengarahkan mouse ke atas file aset. Pratinjau gambar mini akan muncul untuk masing-masing, mengonfirmasi bahwa Anda telah mengganti/menambahkan file aset dengan benar.

Memigrasikan model Foto

Foto adalah kelas runtime yang mewakili foto. Ini adalah model (dalam arti model, tampilan, dan viewmodel).

Salin file kode sumber Foto

Di klon proyek sumber Anda, di File Explorer, temukan folder Windows-appsample-photo-editor>PhotoEditor. Dalam folder tersebut Anda akan menemukan tiga file Photo.idlkode sumber , , Photo.hdan Photo.cpp; file tersebut bersama-sama menerapkan kelas Runtime Foto . Pilih ketiga file tersebut, dan salin ke clipboard.
Di Visual Studio, klik kanan simpul proyek target, dan klik Buka Folder di File Explorer. Ini membuka folder proyek target di File Explorer. Tempelkan ke folder tersebut tiga file yang baru saja Anda salin.
Kembali ke Penjelajah Solusi, dengan simpul proyek target dipilih, pastikan bahwa Tampilkan Semua File diaktifkan. Klik kanan tiga file yang baru saja Anda tempelkan, dan klik Sertakan Dalam Proyek. Alihkan Perlihatkan Semua File nonaktif.
Dalam proyek sumber, dalam Penjelajah Solusi, Photo.h dan .cpp disarangkan di bawah Photo.idl untuk menunjukkan bahwa mereka dihasilkan dari (tergantung pada) itu. Jika Anda menyukai pengaturan tersebut, maka Anda dapat melakukan hal yang sama dalam proyek target dengan mengedit \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj secara manual (Pertama-tama Anda harus Menyimpan Semua di Visual Studio). Temukan yang berikut ini:
```
<ClInclude Include="Photo.h" />
```
Dan ganti dengan ini:
```
<ClInclude Include="Photo.h">
  <DependentUpon>Photo.idl</DependentUpon>
</ClInclude>
```
Ulangi untuk Photo.cpp, dan simpan dan tutup file proyek. Saat Anda mengatur fokus kembali ke Visual Studio, klik Muat Ulang.

Memigrasikan kode sumber Foto

Dalam Photo.idl, cari nama Windows.UI.Xaml namespace layanan (yang merupakan namespace untuk UWP XAML), dan ubah menjadi Microsoft.UI.Xaml (yang merupakan namespace layanan untuk WinUI XAML).

Catatan

Api UWP Pemetaan ke topik SDK Aplikasi Windows menyediakan pemetaan API UWP ke SDK Aplikasi Windows yang setara. Perubahan yang kami lakukan di atas adalah contoh perubahan nama namespace yang diperlukan selama proses migrasi.

Dalam Photo.cpp, tambahkan #include "Photo.g.cpp" ke arahan yang ada termasuk, segera setelah #include "Photo.h". Ini adalah salah satu perbedaan Folder dan nama file (C++/WinRT) yang perlu diperhatikan antara proyek UWP dan SDK Aplikasi Windows.
Buat temuan/penggantian berikut (cocokkan huruf besar/kecil dan seluruh kata) dalam konten semua kode sumber dalam file yang baru saja Anda salin dan tempel.
- Windows::UI::Xaml =>Microsoft::UI::Xaml
Dari pch.h dalam proyek sumber, salin yang berikut ini menyertakan, dan tempelkan ke pch.h dalam proyek target. Ini adalah subset file header yang disertakan dalam proyek sumber; ini hanya header yang kita butuhkan untuk mendukung kode yang telah kita migrasikan sejauh ini.
```
#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>
```
Sekarang konfirmasikan bahwa Anda dapat membangun solusi target (tetapi belum berjalan).

Memigrasikan kelas Aplikasi

Tidak ada perubahan yang diperlukan untuk proyek App.idl target dan App.xaml. Tetapi kita perlu mengedit App.xaml.h dan Aplikasi.xaml.cpp untuk menambahkan beberapa anggota baru ke kelas Aplikasi . Kita akan melakukannya dengan cara yang memungkinkan kita membangun setelah setiap bagian (dengan pengecualian bagian terakhir, yaitu tentang App::OnLaunched).

Membuat objek jendela utama tersedia

Dalam langkah ini kita akan membuat perubahan yang dijelaskan dalam Mengubah Windows.UI.Xaml.Window.Current ke App.Window.

Dalam proyek target, App menyimpan objek jendela utama di jendela anggota data privatnya. Kemudian dalam proses migrasi (ketika kita memigrasikan penggunaan proyek sumber Window.Current), akan lebih mudah jika anggota data jendela tersebut statis; dan juga tersedia melalui fungsi aksesor. Jadi kita akan membuat perubahan berikutnya.

Karena kita membuat jendela statis, kita harus menginisialisasinya alih-alih App.xaml.cpp melalui inisialisasi anggota default yang saat ini digunakan kode. Berikut adalah tampilan perubahan tersebut di App.xaml.h dan 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 };
...

Aplikasi::OnNavigationFailed

Aplikasi sampel Editor Foto menggunakan logika navigasi untuk menavigasi antara MainPage dan DetailPage. Untuk informasi selengkapnya tentang aplikasi SDK Aplikasi Windows yang memerlukan navigasi (dan yang tidak), lihat Apakah saya perlu menerapkan navigasi halaman?.

Jadi anggota yang akan kita migrasikan di beberapa bagian berikutnya semuanya ada untuk mendukung navigasi dalam aplikasi.

Mari kita mulai dengan memigrasikan penanganan aktivitas OnNavigationFailed . Salin deklarasi dan definisi fungsi anggota tersebut dari proyek sumber, dan tempelkan ke proyek target (dalam App.xaml.h dan App.xaml.cpp).
Dalam kode yang Anda tempelkan ke , App.xaml.hubah Windows::UI::Xaml ke Microsoft::UI::Xaml.

App::CreateRootFrame

Proyek sumber berisi fungsi pembantu bernama App::CreateRootFrame. Salin deklarasi dan definisi fungsi pembantu tersebut dari proyek sumber, dan tempelkan ke proyek target (dalam App.xaml.h dan App.xaml.cpp).
Dalam kode yang Anda tempelkan ke , App.xaml.hubah Windows::UI::Xaml ke Microsoft::UI::Xaml.
Dalam kode yang Anda tempelkan ke App.xaml.cpp, ubah dua kemunculan Window::Current() menjadi window (yang merupakan nama anggota data kelas Aplikasi yang kami lihat sebelumnya).

Aplikasi::OnLaunched

Proyek target sudah berisi implementasi penanganan aktivitas OnLaunched . Parameternya adalah referensi konstan ke Microsoft::UI::Xaml::LaunchActivatedEventArgs, yang benar untuk SDK Aplikasi Windows (berbeda dengan proyek sumber, yang menggunakan Windows::ApplicationModel::Activation::LaunchActivatedEventArgs, yang benar untuk UWP).

Kita hanya perlu menggabungkan dua definisi (sumber dan target) OnLaunched sehingga App::OnLaunched dalam App.xaml.cpp proyek target terlihat seperti daftar di bawah ini. Perhatikan bahwa ia menggunakan (alih-alih window Window::Current(), seperti versi UWP).

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

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

     window.Activate();
}

Kode di atas memberi Aplikasi dependensi pada MainPage, jadi kami tidak akan dapat membangun dari titik ini sampai kami memigrasikan DetailPage dan kemudian MainPage. Ketika kita dapat membangun lagi, kita akan mengatakan demikian.

Memigrasikan tampilan DetailPage

DetailPage adalah kelas yang mewakili halaman editor foto, di mana efek Win2D dialihkan, diatur, dan ditautkan bersama-sama. Anda bisa masuk ke halaman editor foto dengan memilih gambar mini foto di MainPage. DetailPage adalah tampilan (dalam arti model, tampilan, dan viewmodel).

Mereferensikan paket Win2D NuGet

Untuk mendukung kode di DetailPage, proyek sumber memiliki dependensi pada Microsoft.Graphics.Win2D. Jadi kita juga akan membutuhkan dependensi pada Win2D dalam proyek target kita.

Dalam solusi target di Visual Studio, klik Alat>Pengelola>Paket NuGet Kelola Paket NuGet untuk Solusi...>Telusuri. Pastikan bahwa Sertakan prarilis tidak dicentang, dan ketik atau tempel Microsoft.Graphics.Win2D ke dalam kotak pencarian. Pilih item yang benar dalam hasil pencarian, periksa proyek PhotoEditor , dan klik Instal untuk menginstal paket.

Salin file kode sumber DetailPage

Di klon proyek sumber Anda, di File Explorer, temukan folder Windows-appsample-photo-editor>PhotoEditor. Di folder tersebut Anda akan menemukan empat file DetailPage.idlkode sumber , , DetailPage.xaml, DetailPage.h, dan DetailPage.cpp; file tersebut bersama-sama menerapkan tampilan DetailPage . Pilih keempat file tersebut, dan salin ke clipboard.
Di Visual Studio, klik kanan simpul proyek target, dan klik Buka Folder di File Explorer. Ini membuka folder proyek target di File Explorer. Tempelkan ke folder tersebut empat file yang baru saja Anda salin.
Masih di File Explorer, ubah nama dan DetailPage.h DetailPage.cpp ke DetailPage.xaml.h dan DetailPage.xaml.cpp, masing-masing. Ini adalah salah satu perbedaan Folder dan nama file (C++/WinRT) yang perlu diperhatikan antara proyek UWP dan SDK Aplikasi Windows.
Kembali ke Penjelajah Solusi, dengan simpul proyek target dipilih, pastikan bahwa Tampilkan Semua File diaktifkan. Klik kanan empat file yang baru saja Anda tempelkan (dan ganti nama), dan klik Sertakan Dalam Proyek. Alihkan Perlihatkan Semua File nonaktif.
Dalam proyek sumber, di Penjelajah Solusi, DetailPage.idl disarangkan di bawah DetailPage.xaml. Jika Anda menyukai pengaturan tersebut, maka Anda dapat melakukan hal yang sama dalam proyek target dengan mengedit \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj secara manual (Pertama-tama Anda harus Menyimpan Semua di Visual Studio). Temukan yang berikut ini:
```
<Midl Include="DetailPage.idl" />
```
Dan ganti dengan ini:
```
<Midl Include="DetailPage.idl">
  <DependentUpon>DetailPage.xaml</DependentUpon>
</Midl>
```

Simpan dan tutup file proyek. Saat Anda mengatur fokus kembali ke Visual Studio, klik Muat Ulang.

Memigrasikan kode sumber DetailPage

Di DetailPage.idl, cari Windows.UI.Xaml, dan ubah menjadi Microsoft.UI.Xaml.
Di DetailPage.xaml.cpp, ubah #include "DetailPage.h" ke #include "DetailPage.xaml.h".
Tepat di bawahnya, tambahkan #include "DetailPage.g.cpp".
Untuk panggilan ke metode Aplikasi statis ::Window (yang akan kita tambahkan) untuk dikompilasi, masih dalam DetailPage.xaml.cpp, tambahkan #include "App.xaml.h" segera sebelum #include "Photo.h".
Buat temuan/pengganti berikut (cocokkan huruf besar/kecil dan seluruh kata) dalam konten kode sumber dalam file yang baru saja Anda salin dan tempel.
- Di DetailPage.xaml.h dan .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- Di DetailPage.xaml.h dan .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- Dalam DetailPage.xaml.cpp, Window::Current() =>App::Window()

Dari pch.h dalam proyek sumber, salin yang berikut ini menyertakan, dan tempelkan ke pch.h dalam proyek target.

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

Selain itu, di bagian pch.hatas , segera setelah #pragma once, tambahkan ini:

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

Kami belum dapat membangun, tetapi kami akan dapat setelah memigrasikan MainPage (yang selanjutnya).

Memigrasikan tampilan MainPage

Halaman utama aplikasi mewakili tampilan yang Anda lihat terlebih dahulu saat menjalankan aplikasi. Ini adalah halaman yang memuat foto dari Pustaka Gambar, dan menampilkan tampilan gambar mini ubin.

Menyalin file kode sumber MainPage

Mirip dengan apa yang Anda lakukan dengan DetailPage, sekarang salin MainPage.idl, , MainPage.xamlMainPage.h, dan MainPage.cpp.
Ganti nama .h file dan .cpp menjadi .xaml.h dan .xaml.cpp, masing-masing.
Sertakan keempat file dalam proyek target seperti sebelumnya.
Dalam proyek sumber, di Penjelajah Solusi, MainPage.idl disarangkan di bawah MainPage.xaml. Jika Anda menyukai pengaturan itu, maka Anda dapat melakukan hal yang sama dalam proyek target dengan mengedit \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxprojsecara manual . Temukan yang berikut ini:
```
<Midl Include="MainPage.idl" />
```
Dan ganti dengan:
```
<Midl Include="MainPage.idl">
  <DependentUpon>MainPage.xaml</DependentUpon>
</Midl>
```

Memigrasikan kode sumber MainPage

Di MainPage.idl, cari Windows.UI.Xaml, dan ubah kedua kemunculan menjadi Microsoft.UI.Xaml.
Di MainPage.xaml.cpp, ubah #include "MainPage.h" ke #include "MainPage.xaml.h".
Tepat di bawahnya, tambahkan #include "MainPage.g.cpp".
Untuk panggilan ke metode Aplikasi statis ::Window (yang akan kita tambahkan) untuk dikompilasi, masih dalam MainPage.xaml.cpp, tambahkan #include "App.xaml.h" segera sebelum #include "Photo.h".

Untuk langkah berikutnya, kita akan membuat perubahan yang dijelaskan di ContentDialog, dan Popup.

Jadi, masih dalam MainPage.xaml.cpp, dalam metode MainPage::GetItemsAsync , segera setelah baris ContentDialog unsupportedFilesDialog{};, tambahkan baris kode ini.
```
unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
```
Buat temuan/pengganti berikut (cocokkan huruf besar/kecil dan seluruh kata) dalam konten kode sumber dalam file yang baru saja Anda salin dan tempel.
- Di MainPage.xaml.h dan .xaml.cpp, Windows::UI::Composition =>Microsoft::UI::Composition
- Di MainPage.xaml.h dan .xaml.cpp, Windows::UI::Xaml =>Microsoft::UI::Xaml
- Dalam MainPage.xaml.cpp, Window::Current() =>App::Window()

Dari pch.h dalam proyek sumber, salin yang berikut ini menyertakan, dan tempelkan ke pch.h dalam proyek target.

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

Konfirmasikan bahwa Anda dapat membangun solusi target (tetapi belum berjalan).

Memperbarui MainWindow

Di MainWindow.xaml, hapus StackPanel dan kontennya, karena kami tidak memerlukan UI apa pun di MainWindow. Yang hanya menyisakan elemen Window kosong.
Di MainWindow.idl, hapus tempat penampung Int32 MyProperty;, hanya menyisakan konstruktor.
Di MainWindow.xaml.h dan MainWindow.xaml.cpp, hapus deklarasi dan definisi tempat penampung MyProperty dan myButton_Click, hanya menyisakan konstruktor.

Perubahan migrasi diperlukan untuk perbedaan model utas

Dua perubahan di bagian ini diperlukan karena perbedaan model utas antara UWP dan SDK Aplikasi Windows, seperti yang dijelaskan dalam model utas ASTA ke STA. Berikut adalah deskripsi singkat tentang penyebab masalah, lalu cara untuk menyelesaikan masing-masing.

MainPage

MainPage memuat file gambar dari folder Gambar Anda, memanggil StorageItemContentProperties.GetImagePropertiesAsync untuk mendapatkan properti file gambar, membuat objek Model foto untuk setiap file gambar (menyimpan properti yang sama dalam anggota data), dan menambahkan objek Foto tersebut ke koleksi. Kumpulan objek Foto terikat data ke GridView di UI. Atas nama GridView tersebut, MainPage menangani peristiwa ContainerContentChanging, dan untuk fase 1, handler memanggil ke koroutine yang memanggil StorageFile.GetThumbnailAsync. Panggilan ke GetThumbnailAsync ini mengakibatkan pesan dipompa (tidak segera kembali, dan melakukan semua asinkron pekerjaannya), dan yang menyebabkan masuknya kembali. Hasilnya adalah bahwa GridView mengubah koleksi Item saat tata letak sedang berlangsung, dan itu menyebabkan crash.

Jika kita mengomentari panggilan ke StorageItemContentProperties::GetImagePropertiesAsync, maka kita tidak mendapatkan crash. Tetapi perbaikan sebenarnya adalah membuat panggilan StorageFile.GetThumbnailAsync secara eksplisit asinkron dengan secara kooperatif menunggu wil::resume_foreground segera sebelum memanggil GetThumbnailAsync. Ini berfungsi karena wil::resume_foreground menjadwalkan kode yang mengikutinya untuk menjadi tugas pada DispatcherQueue.

Berikut adalah kode yang akan diubah:

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

Properti Foto::ImageTitle terikat data ke UI, sehingga UI memanggil ke fungsi aksesor untuk properti tersebut setiap kali membutuhkan nilainya. Tetapi ketika kita mencoba mengakses ImageProperties.Title dari fungsi aksesor itu pada utas UI, kita mendapatkan pelanggaran akses.

Jadi sebagai gantinya, kita hanya dapat mengakses Judul itu satu kali, dari konstruktor Foto, dan menyimpannya di anggota data m_imageName jika tidak kosong. Kemudian dalam fungsi aksesor Photo::ImageTitle kita hanya perlu mengakses anggota data m_imageName .

Berikut adalah kode yang akan diubah:

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

Itulah perubahan terakhir yang perlu kita lakukan untuk memigrasikan aplikasi sampel Editor Foto. Di bagian Uji aplikasi yang dimigrasikan, kami akan mengonfirmasi bahwa kami telah mengikuti langkah-langkah dengan benar.

Masalah umum

Masalah jenis aplikasi (hanya memengaruhi Pratinjau 3)

Jika Anda mengikuti studi kasus ini menggunakan templat proyek dari VSIX untuk SDK Aplikasi Windows versi 1.0 Pratinjau 3, maka Anda harus membuat koreksi kecil ke PhotoEditor.vcxproj. Berikut adalah cara untuk melakukan itu.

Di Visual Studio, di Penjelajah Solusi, klik kanan simpul proyek, dan klik Bongkar Proyek. Sekarang PhotoEditor.vcxproj terbuka untuk pengeditan. Sebagai turunan pertama Project, tambahkan elemen PropertyGroup seperti ini:

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

Simpan dan tutup PhotoEditor.vcxproj. Klik kanan simpul proyek, dan klik Muat Ulang Proyek. Sekarang bangun kembali proyek.

Menguji aplikasi yang dimigrasikan

Sekarang buat proyek, dan jalankan aplikasi untuk mengujinya. Pilih gambar, atur tingkat pembesaran tampilan, pilih efek, dan konfigurasikan.

Lampiran: menyalin konten file model Foto

Seperti yang kita bahas sebelumnya, Anda memiliki opsi untuk menyalin file kode sumber itu sendiri, atau konten file kode sumber. Kami telah menunjukkan cara menyalin file kode sumber itu sendiri. Jadi bagian ini memberikan contoh penyalinan konten file.

Dalam proyek sumber di Visual Studio, temukan folder PhotoEditor (Universal Windows)>Models. Folder tersebut berisi file Photo.idl, , dan Photo.cpp, yang bersama-sama mengimplementasikan kelas runtime FotoPhoto.h.

Tambahkan IDL, dan hasilkan stub

Di proyek target Anda di Visual Studio, tambahkan item Midl File (.idl) baru ke proyek. Beri nama item Photo.idlbaru . Hapus konten Photo.idldefault .

Dari proyek sumber di Visual Studio, salin konten ModelPhoto.idl>, dan tempelkan ke file Photo.idl yang baru saja Anda tambahkan ke proyek target Anda. Dalam kode yang Anda tempelkan, cari Windows.UI.Xaml, dan ubah menjadi Microsoft.UI.Xaml.

Simpan file.

Penting

Kami akan melakukan build solusi target Anda. Build tidak akan berjalan hingga selesai pada saat ini, tetapi akan menjadi cukup jauh untuk melakukan pekerjaan yang diperlukan bagi kita.

Sekarang bangun solusi target. Meskipun tidak akan selesai, bangunan diperlukan sekarang karena akan menghasilkan file kode sumber (stub) yang kita butuhkan untuk mulai menerapkan model Foto .

Di Visual Studio, klik kanan simpul proyek target, dan klik Buka Folder di File Explorer. Ini membuka folder proyek target di File Explorer. Di sana, navigasikan ke Generated Files\sources folder (sehingga Anda akan berada di \PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources). Salin file Photo.h stub dan .cpp, dan tempelkan ke folder proyek, yang sekarang naik dua tingkat folder di \PhotoEditor\PhotoEditor\PhotoEditor.

Kembali ke Penjelajah Solusi, dengan simpul proyek target dipilih, pastikan bahwa Tampilkan Semua File diaktifkan. Klik kanan file stub yang baru saja Anda tempelkan (Photo.h dan .cpp), dan klik Sertakan Dalam Proyek. Alihkan Perlihatkan Semua File nonaktif.

Anda akan melihat static_assert di bagian atas konten Photo.h dan .cpp, yang perlu Anda hapus.

Konfirmasikan bahwa Anda dapat membangun lagi (tetapi belum berjalan).

Memigrasikan kode ke dalam stub

Salin konten Photo.h dan .cpp dari proyek sumber ke dalam proyek target.

Dari sini, langkah-langkah yang tersisa untuk memigrasikan kode yang Anda salin sama dengan yang diberikan di bagian Kode sumber Foto Migrasi.

Bagikan melalui

Migrasi SDK Aplikasi Windows aplikasi sampel Editor Foto UWP (C++/WinRT)

Menginstal alat untuk SDK Aplikasi Windows

Membuat proyek baru

Urutan di mana kita akan memigrasikan kode

Kami akan menyalin seluruh file kode sumber

Menyalin file aset

Memigrasikan model Foto

Salin file kode sumber Foto

Memigrasikan kode sumber Foto

Memigrasikan kelas Aplikasi

Membuat objek jendela utama tersedia

Aplikasi::OnNavigationFailed

App::CreateRootFrame

Aplikasi::OnLaunched

Memigrasikan tampilan DetailPage

Mereferensikan paket Win2D NuGet

Salin file kode sumber DetailPage

Memigrasikan kode sumber DetailPage

Memigrasikan tampilan MainPage

Menyalin file kode sumber MainPage

Memigrasikan kode sumber MainPage

Memperbarui MainWindow

Perubahan migrasi diperlukan untuk perbedaan model utas

MainPage

Foto

Masalah umum

Masalah jenis aplikasi (hanya memengaruhi Pratinjau 3)

Menguji aplikasi yang dimigrasikan

Lampiran: menyalin konten file model Foto

Tambahkan IDL, dan hasilkan stub

Memigrasikan kode ke dalam stub

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Migrasi SDK Aplikasi Windows aplikasi sampel Editor Foto UWP (C++/WinRT)

Menginstal alat untuk SDK Aplikasi Windows

Membuat proyek baru

Urutan di mana kita akan memigrasikan kode

Kami akan menyalin seluruh file kode sumber

Menyalin file aset

Memigrasikan model Foto

Salin file kode sumber Foto

Memigrasikan kode sumber Foto

Memigrasikan kelas Aplikasi

Membuat objek jendela utama tersedia

Aplikasi::OnNavigationFailed

App::CreateRootFrame

Aplikasi::OnLaunched

Memigrasikan tampilan DetailPage

Mereferensikan paket Win2D NuGet

Salin file kode sumber DetailPage

Memigrasikan kode sumber DetailPage

Memigrasikan tampilan MainPage

Menyalin file kode sumber MainPage

Memigrasikan kode sumber MainPage

Memperbarui MainWindow

Perubahan migrasi diperlukan untuk perbedaan model utas

MainPage

Foto

Masalah umum

Masalah jenis aplikasi (hanya memengaruhi Pratinjau 3)

Menguji aplikasi yang dimigrasikan

Lampiran: menyalin konten file model Foto

Tambahkan IDL, dan hasilkan stub

Memigrasikan kode ke dalam stub

Topik terkait

Saran dan Komentar

Sumber Daya Tambahan: