UWP Photo Editor サンプルアプリの Windows App SDK への移行 (C++/WinRT)

[アーティクル]
04/03/2023

このトピックは、C++/WinRT UWP Photo Editor サンプルアプリを取得し、それを Windows App SDK に移行するというケーススタディです。

まず、UWP サンプルアプリのリポジトリを複製し、Visual Studio でソリューションを開きます。

重要

移行プロセスに取り組む際の考慮事項と戦略や、移行用の開発環境を設定する方法については、「全体的な移行戦略」を参照してください。

Windows App SDK 用のツールをインストールする

開発コンピューターをセットアップするには、「Windows App SDK 用のツールをインストールする」を参照してください。

重要

リリースノートのトピックと、「Windows App SDK のリリースチャネル」のトピックをご覧ください。各チャネルのリリースノートがあります。これらのリリースノートに記載されている制限事項と既知の問題を必ず確認してください。このケーススタディを実行したり、移行したアプリを実行したりした結果に影響を与える可能性があるためです。

新しいプロジェクトを作成する

Visual Studio で、Blank App、Packaged (デスクトップの WinUI 3) プロジェクトテンプレートから新しい C++/WinRT プロジェクトを作成します。プロジェクトに PhotoEditor という名前を付け、[ソリューションとプロジェクトを同じディレクトリに配置する] チェックボックスをオフにします。クライアントオペレーティングシステムの最新リリース (プレビューではないもの) をターゲットにすることができます。

注意

サンプルプロジェクトの UWP バージョン (リポジトリから複製したもの) を "ソース" ソリューション/プロジェクトと呼びます。 Windows App SDK バージョンを "ターゲット" ソリューション/プロジェクトと呼びます。

コードを移行する順序

MainPage は、アプリの重要な目立つ部分です。ただし、その移行から始めようとすると、MainPage が DetailPage ビューに依存しており、その DetailPage は Photo モデルへの依存関係があることがすぐにわかります。そのため、今回のチュートリアルでは、このアプローチを採用します。

まず、アセットファイルをコピーします。
次に、Photo モデルを移行します。
次に、App クラスを移行します (DetailPage と MainPage が依存するメンバーをこちらに追加する必要があるため)。
次に、ビューの移行を開始します。最初に DetailPage から始めます。
最後に、MainPage ビューを移行します。

ソースコードファイル全体をコピーします。

このチュートリアルでは、エクスプローラーを使用してソースコードファイルをコピーします。ファイルの "内容" をコピーする場合は、このトピックの最後にある「付録: Photo モデルのファイルの内容をコピーする」セクションを参照して、Photo に関する手順の例を確認してください (その後、プロジェクト内の他のタイプに同様の手順を適用できます)。ただし、このオプションにはさらに多くの手順が含まれます。

アセットファイルをコピーする

エクスプローラーで、ソースプロジェクトの複製内のフォルダー Windows-appsample-photo-editor>PhotoEditor>Assets を見つけます。そのフォルダーには 8 つのアセットファイルがあります。その 8 つのファイルを選択し、クリップボードにコピーします。
また、エクスプローラーで、作成したターゲットプロジェクト内の対応するフォルダーを見つけます。そのフォルダーのパスは PhotoEditor>PhotoEditor>Assets です。コピーしたアセットファイルをそのフォルダーに貼り付け、コピー先に既に存在する 7 つのファイルを置き換えるというプロンプトを受け入れます。
Visual Studio のソリューションエクスプローラーで、ターゲットプロジェクトの Assets フォルダーを展開します。貼り付けた既存の bg1.png アセットファイルをそのフォルダーに追加します。アセットファイルの上にマウスポインターを置きます。それぞれにサムネイルプレビューが表示されるため、アセットファイルが正しく置き換えられたか、または追加されたことを確認します。

Photo モデルを移行する

Photo は、写真を表すランタイムクラスです。これはモデルです (モデル、ビュー、およびビューモデルの意味において)。

Photo ソースコードファイルをコピーする

エクスプローラーで、ソースプロジェクトの複製内のフォルダー Windows-appsample-photo-editor>PhotoEditor を見つけます。そのフォルダーには、3 つのソースコードファイル (Photo.idl、Photo.h、Photo.cpp) があります。これらのファイルが合わさって Photo ランタイムクラスを実装します。これらの 3 つのファイルを選択し、クリップボードにコピーします。
Visual Studio でターゲットプロジェクトノードを右クリックし、[エクスプローラーでフォルダーを開く] をクリックします。これにより、エクスプローラーでターゲットプロジェクトフォルダーが開きます。コピーした 3 つのファイルをそのフォルダーに貼り付けます。
ソリューションエクスプローラーに戻り、ターゲットプロジェクトノードを選択して、[すべてのファイルを表示] がオンになっていることを確認します。貼り付けた 3 つのファイルを右クリックし、[プロジェクトに含める] をクリックします。 [すべてのファイルを表示] をオフに切り替えます。
ソリューションエクスプローラーでは、ソースプロジェクト内で、Photo.h と .cpp が Photo.idl の下に入れ子になっており、そこから生成されたものである (依存関係がある) ことを示しています。その配置が気に入ったら、手動で \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj を編集することで、ターゲットプロジェクトで同じことを行うことができます (まず Visual Studio ですべて保存する必要があります)。次の文字列を検索します。
```
<ClInclude Include="Photo.h" />
```
それをこちらに置き換えます。
```
<ClInclude Include="Photo.h">
  <DependentUpon>Photo.idl</DependentUpon>
</ClInclude>
```
Photo.cpp についても同じ手順を繰り返し、プロジェクトファイルを保存して閉じます。フォーカスを Visual Studio に戻したら、[再読み込み] をクリックします。

Photo ソースコードを移行する

Photo.idl で、名前空間名 Windows.UI.Xaml (UWP XAML の名前空間) を検索し、Microsoft.UI.Xaml (WinUI XAML の名前空間) に変更します。

注意

「UWP API を Windows App SDK にマッピングする」トピックでは、UWP API から同等の Windows App SDK へのマッピングを行います。上記で行った変更は、移行プロセス中に必要な名前空間名の変更の例です。

Photo.cpp の既存の include ディレクティブに #include "Photo.g.cpp" を追加します (#include "Photo.h" の直後)。これは、UWP と Windows App SDK のプロジェクトの間でのフォルダー名とファイル名の違い (C++/WinRT) として知っておくべきことの 1 つです。
コピーして貼り付けたファイルのすべてのソースコードの内容で、次の検索/置換 (大文字と小文字を区別し、完全に一致する単語) を行います。
- Windows::UI::Xaml =>Microsoft::UI::Xaml
ソースプロジェクトの pch.h から次の include をコピーして、ターゲットプロジェクトの pch.h に貼り付けます。これは、ソースプロジェクトに含まれているヘッダーファイルのサブセットであり、これまでに移行したコードをサポートするために必要なヘッダーにすぎません。
```
#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>
```
次に、ターゲットソリューションをビルドできることを確認します (ただし、まだ実行しないでください)。

App クラスを移行する

ターゲットプロジェクトの App.idl と App.xaml を変更する必要はありません。ただし、App クラスに新しいメンバーを追加するために、App.xaml.h と App.xaml.cpp を編集する必要があります。各セクション (App::OnLaunched に関する最後のセクションを除く) の後にビルドできるような方法で行います。

メインウィンドウオブジェクトを使用可能にする

この手順では、「Windows.UI.Xaml.Window.Current を App.Window に変更する」で説明されている変更を行います。

ターゲットプロジェクトでは、App はメインウィンドウオブジェクトをプライベートデータメンバー window に格納します。移行プロセスの後半 (ソースプロジェクトでの Window.Current の使用の移行) では、その window データメンバーが static で、アクセサー機能からも使用可能になると便利です。そのため、次にこの変更を行います。

window を static にするため、コードで現在使用されている既定のメンバー初期化子を使用するのではなく、App.xaml.cpp で初期化する必要があります。これらの変更が、App.xaml.h と 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

Photo Editor サンプルアプリは、ナビゲーションロジックを使用して MainPage と DetailPage の間を移動します。ナビゲーションが必要 (および不要) な Windows App SDK アプリの詳細については、「ページナビゲーションを実装する必要がありますか?」を参照してください。

そのため、次のいくつかのセクションで移行するメンバーはすべて、アプリ内のナビゲーションをサポートするために存在します。

まず、OnNavigationFailed イベントハンドラーを移行しましょう。ソースプロジェクトからそのメンバー関数の宣言と定義をコピーし、ターゲットプロジェクト (App.xaml.h および App.xaml.cpp) に貼り付けます。
App.xaml.h に貼り付けたコードで、Windows::UI::Xaml を Microsoft::UI::Xaml に変更します。

App::CreateRootFrame

ソースプロジェクトには、App::CreateRootFrame というヘルパー関数が含まれています。ソースプロジェクトからそのヘルパー関数の宣言と定義をコピーし、ターゲットプロジェクト (App.xaml.h および App.xaml.cpp) に貼り付けます。
App.xaml.h に貼り付けたコードで、Windows::UI::Xaml を Microsoft::UI::Xaml に変更します。
App.xaml.cpp に貼り付けたコードで、Window::Current() の 2 つの出現箇所を window に変更します (以前取り上げた、App クラスのデータメンバーの名前です)。

App::OnLaunched

ターゲットプロジェクトには、OnLaunched イベントハンドラーの実装がすでに含まれています。そのパラメーターは、Microsoft::UI::Xaml::LaunchActivatedEventArgs への定数参照であり、Windows App SDK に適しています (Windows::ApplicationModel::Activation::LaunchActivatedEventArgs を使用するソースプロジェクトとは対照的で、これは UWP に適しています)。

ターゲットプロジェクトの App.xaml.cpp の App::OnLaunched が次のリストのようになるように、OnLaunched の 2 つの定義 (ソースとターゲット) をマージする必要があります。 (UWP バージョンのように Window::Current() の代わりに) window を使用することに注意してください。
```
void App::OnLaunched(LaunchActivatedEventArgs const&)
{
     window = make<MainWindow>();

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

     window.Activate();
}
```

上記のコードは App に MainPage への依存関係を与えることになるため、DetailPage とさらに MainPage を移行するまで、この時点からビルドすることはできません。再びビルドできるようになったら、お知らせします。

DetailPage ビューを移行する

DetailPage は、Win2D 効果の切り替え、設定、連結が行われるフォトエディターページを表すクラスです。 MainPage で写真のサムネイルを選択すると、フォトエディターページが表示されます。 DetailPage はビューです (モデル、ビュー、およびビューモデルの意味において)。

Win2D NuGet パッケージを参照する

DetailPage のコードをサポートするために、ソースプロジェクトには Microsoft.Graphics.Win2D への依存関係があります。そのため、ターゲットプロジェクトでは Win2D への依存関係も必要になります。

Visual Studio のターゲットソリューションで、[ツール]>[NuGet パッケージマネージャー]>[ソリューションの NuGet パッケージの管理...]>[参照] の順にクリックします。 [プレリリースを含める] チェックボックスがオフになっていることを確認し、Microsoft.Graphics.Win2D を検索ボックスに入力するか、貼り付けます。検索結果で適切な項目を選択し、PhotoEditor プロジェクトを確認し、[インストール] をクリックしてパッケージをインストールします。

DetailPage ソースコードファイルをコピーする

エクスプローラーで、ソースプロジェクトの複製内のフォルダー Windows-appsample-photo-editor>PhotoEditor を見つけます。そのフォルダーには、4 つのソースコードファイル (DetailPage.idl、DetailPage.xaml、DetailPage.h、DetailPage.cpp) があります。これらのファイルが合わさって DetailPage ビューを実装します。この 4 つのファイルを選択し、クリップボードにコピーします。
Visual Studio でターゲットプロジェクトノードを右クリックし、[エクスプローラーでフォルダーを開く] をクリックします。これにより、エクスプローラーでターゲットプロジェクトフォルダーが開きます。コピーした 4 つのファイルをそのフォルダーに貼り付けます。
引き続きエクスプローラーで、DetailPage.h と DetailPage.cpp の名前をそれぞれ DetailPage.xaml.h と DetailPage.xaml.cpp に変更します。これは、UWP と Windows App SDK のプロジェクトの間でのフォルダー名とファイル名の違い (C++/WinRT) として知っておくべきことの 1 つです。
ソリューションエクスプローラーに戻り、ターゲットプロジェクトノードを選択して、[すべてのファイルを表示] がオンになっていることを確認します。貼り付けた (名前を変更した) 4 つのファイルを右クリックして、[プロジェクトに含める] をクリックします。 [すべてのファイルを表示] をオフに切り替えます。
ソリューションエクスプローラーでは、ソースプロジェクト内で DetailPage.idl が DetailPage.xaml の下に入れ子になっています。その配置が気に入ったら、手動で \PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj を編集することで、ターゲットプロジェクトで同じことを行うことができます (まず Visual Studio ですべて保存する必要があります)。次の文字列を検索します。
```
<Midl Include="DetailPage.idl" />
```
それをこちらに置き換えます。
```
<Midl Include="DetailPage.idl">
  <DependentUpon>DetailPage.xaml</DependentUpon>
</Midl>
```

プロジェクトファイルを保存して閉じます。フォーカスを Visual Studio に戻したら、[再読み込み] をクリックします。

DetailPage ソースコードを移行する

DetailPage.idl で、Windows.UI.Xaml を検索し、それを Microsoft.UI.Xaml に変更します。
DetailPage.xaml.cpp で、#include "DetailPage.h" を #include "DetailPage.xaml.h" に変更します。
そのすぐ下に、#include "DetailPage.g.cpp" を追加します。
引き続き DetailPage.xaml.cpp で、静的な App::Window メソッド (これから追加予定) を呼び出してコンパイルする場合、#include "Photo.h" の直前に #include "App.xaml.h" を追加します。
コピーして貼り付けたファイルのソースコードの内容で、次の検索/置換 (大文字と小文字を区別し、完全に一致する単語) を行います。
- DetailPage.xaml.h と .xaml.cpp では、Windows::UI::Composition = >Microsoft::UI::Composition
- DetailPage.xaml.h と .xaml.cpp では、Windows::UI::Xaml = >Microsoft::UI::Xaml
- DetailPage.xaml.cpp では、Window::Current() =>App::Window()

ソースプロジェクトの pch.h から次の include をコピーして、ターゲットプロジェクトの pch.h に貼り付けます。

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

また、pch.h の上部で #pragma once の直後に、こちらを追加します。

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

まだビルドできませんが、MainPage (次) を移行した後にビルドできます。

MainPage ビューを移行する

アプリのメインページは、アプリを実行したときに最初に表示されるビューを表しています。これは、画像ライブラリから写真を読み込み、サムネイルビューを並べて表示するページです。

MainPage ソースコードファイルをコピーする

DetailPage で行ったことと同様に、MainPage.idl、MainPage.xaml、MainPage.h、MainPage.cpp をコピーします。
.h および .cpp ファイルの名前をそれぞれ .xaml.h および .xaml.cpp に変更します。
前と同様に、4 つのファイルすべてをターゲットプロジェクトに含めます。
ソリューションエクスプローラーでは、ソースプロジェクト内で MainPage.idl が MainPage.xaml の下に入れ子になっています。その配置が気に入った場合は、\PhotoEditor\PhotoEditor\PhotoEditor\PhotoEditor.vcxproj を手動で編集することにより、ターゲットプロジェクトで同じことを行うことができます。次の文字列を検索します。
```
<Midl Include="MainPage.idl" />
```
これを、次のコード行に置き換えます。
```
<Midl Include="MainPage.idl">
  <DependentUpon>MainPage.xaml</DependentUpon>
</Midl>
```

MainPage のソースコードを移行する

MainPage.idl で、Windows.UI.Xaml を検索し、両方の出現箇所を Microsoft.UI.Xaml に変更します。
MainPage.xaml.cpp で、#include "MainPage.h" を #include "MainPage.xaml.h" に変更します。
そのすぐ下に、#include "MainPage.g.cpp" を追加します。
引き続き MainPage.xaml.cpp で、静的な App::Window メソッド (これから追加予定) を呼び出してコンパイルする場合、#include "Photo.h" の直前に #include "App.xaml.h" を追加します。

次の手順では、ContentDialog と Popup で説明されている変更を行います。

そのため、引き続き MainPage.xaml.cpp の MainPage::GetItemsAsync メソッドで、行 ContentDialog unsupportedFilesDialog{}; の直後に、このコード行を追加します。
```
unsupportedFilesDialog.XamlRoot(this->Content().XamlRoot());
```
コピーして貼り付けたファイルのソースコードの内容で、次の検索/置換 (大文字と小文字を区別し、完全に一致する単語) を行います。
- MainPage.xaml.h と .xaml.cpp では、Windows::UI::Composition = >Microsoft::UI::Composition
- MainPage.xaml.h と .xaml.cpp では、Windows::UI::Xaml = >Microsoft::UI::Xaml
- MainPage.xaml.cpp では、Window::Current() =>App::Window()
ソースプロジェクトの pch.h から次の include をコピーして、ターゲットプロジェクトの pch.h に貼り付けます。
```
#include <winrt/Microsoft.UI.Xaml.Hosting.h>
#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>
#include <winrt/Windows.Storage.Search.h>
```

ターゲットソリューションをビルドできることを確認します (ただし、まだ実行しないでください)。

MainWindow を更新する

MainWindow.xaml では、MainWindow に UI が必要ないため、StackPanel とその内容を削除します。これにより、空の Window 要素のみが残ります。
MainWindow.idl で、プレースホルダー Int32 MyProperty; を削除し、コンストラクターのみを残します。
MainWindow.xaml.h と MainWindow.xaml.cpp で、プレースホルダー MyProperty と myButton_Click の宣言と定義を削除し、コンストラクターのみを残します。

スレッドモデルの違いに必要な移行の変更

「ASTA から STA へのスレッドモデル」で説明されているように、UWP と Windows App SDK のスレッドモデルが異なるため、このセクションで 2 つの変更が必要です。ここでは、問題の原因の簡単な説明と、それぞれを解決する方法について説明します。

MainPage

MainPage は、Pictures フォルダーから画像ファイルを読み込み、StorageItemContentProperties.GetImagePropertiesAsync を呼び出して画像ファイルのプロパティを取得し、画像ファイルごとに Photo モデルオブジェクトを作成して (同じプロパティをデータメンバーに保存し）、その Photo オブジェクトをコレクションに追加します。 Photo オブジェクトのコレクションは、UI の GridView にデータバインドされています。その GridView に代わって、MainPage が ContainerContentChanging イベントを処理し、フェーズ 1 では、ハンドラーがコルーチンを呼び出し、それが StorageFile.GetThumbnailAsync を呼び出します。この GetThumbnailAsync の呼び出しにより、メッセージが生成され (すぐには制御を戻さず、"すべて" の作業が非同期で実行されます)、再入可能になります。その結果、レイアウトを行っている最中に GridView の Items コレクションが変更され、クラッシュが発生します。

StorageItemContentProperties::GetImagePropertiesAsync の呼び出しをコメントアウトすると、クラッシュは発生しません。ただし、実際の修正は、StorageFile.GetThumbnailAsync 呼び出しを明示的に非同期にすることです。このためには、GetThumbnailAsync を呼び出す直前に wil::resume_foreground を協調的に待機します。これが機能するのは、wil::resume_foreground が、それに続くコードを DispatcherQueue のタスクとしてスケジュールするためです。

変更するコードはこちらです。

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

Photo::ImageTitle プロパティは UI にデータバインドされているため、その UI は、値が必要なときはいつでも、そのプロパティのアクセサー関数を呼び出します。ただし、UI スレッドでそのアクセサー関数から ImageProperties.Title にアクセスしようとすると、アクセス違反が発生します。

そのため、代わりに、Photo のコンストラクターからその Title に一度アクセスして、空でない場合は m_imageName データメンバーに格納できます。次に、Photo::ImageTitle アクセサー関数で、m_imageName データメンバーにアクセスするだけです。

変更するコードはこちらです。

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

これは、Photo Editor サンプルアプリを移行するために必要な最後の変更です。「移行されたアプリをテストする」セクションで、手順が正しく実行されたことを確認します。

既知の問題

アプリの種類に関する問題 (Preview 3 にのみ影響)

VSIX for Windows App SDK バージョン 1.0 Preview 3 のプロジェクトテンプレートを使用してこのケーススタディを実行した場合は、PhotoEditor.vcxproj に若干の修正を行う必要があります。その実行方法を次に示します。

Visual Studio のソリューションエクスプローラーで、プロジェクトノードを右クリックし、[プロジェクトのアンロード] をクリックします。これで PhotoEditor.vcxproj を編集できるようになりました。 Project の最初の子として、次のような PropertyGroup 要素を追加します。

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

PhotoEditor.vcxproj を保存して閉じます。プロジェクトノードを右クリックし、[プロジェクトの再読み込み] をクリックします。次に、プロジェクトをリビルドします。

移行したアプリをテストする

次に、プロジェクトをビルドし、アプリを実行してテストします。画像を選択して、ズームレベルを設定し、効果を選択して構成します。

付録：Photo モデルのファイルの内容をコピーする

前述のとおり、ソースコード ファイル自体、またはソースコードファイルの内容をコピーするオプションがあります。ソースコード "ファイル" 自体をコピーする方法については、すでに説明しました。そのため、このセクションでは、ファイルの "内容" をコピーする例を示します。

Visual Studio のソースプロジェクトで、PhotoEditor (ユニバーサル Windows) >Models フォルダーを見つけます。このフォルダーには、Photo.idl、Photo.h、Photo.cpp が含まれており、これらが合わさって Photo ランタイムクラスを実装します。

IDL を追加してスタブを生成する

Visual Studio のターゲットプロジェクトで、新しい Midl ファイル (.idl) アイテムをプロジェクトに追加します。新しい項目に Photo.idl.という名前を指定します。 Photo.idl の既定の内容を削除します。

Visual Studio のソースプロジェクトから、Models>Photo.idl の内容をコピーして、ターゲットプロジェクトに追加した Photo.idl ファイルに貼り付けます。貼り付けたコードで、Windows.UI.Xaml を検索し、それを Microsoft.UI.Xaml に変更します。

ファイルを保存します。

重要

ターゲットソリューションのビルドを実行しようとしています。この時点ではビルドを最後まで実行しませんが、必要な作業を行うのに十分なところまで進めます。

次に、ターゲットソリューションをビルドします。ビルドは完了しませんが、ここで行う必要があります。Photo モデルの実装を開始するために必要なソースコードファイル (スタブ) が生成されるためです。

Visual Studio でターゲットプロジェクトノードを右クリックし、[エクスプローラーでフォルダーを開く] をクリックします。これにより、エクスプローラーでターゲットプロジェクトフォルダーが開きます。そこで、Generated Files\sources フォルダーに移動します (\PhotoEditor\PhotoEditor\PhotoEditor\Generated Files\sources に移動することになります)。スタブファイル Photo.h と .cpp をコピーして、プロジェクトフォルダー (\PhotoEditor\PhotoEditor\PhotoEditor 内で 2 つ上のフォルダーレベル) に貼り付けます。

ソリューションエクスプローラーに戻り、ターゲットプロジェクトノードを選択して、[すべてのファイルを表示] がオンになっていることを確認します。貼り付けたスタブファイル (Photo.h および .cpp) を右クリックし、[プロジェクトに含める] をクリックします。 [すべてのファイルを表示] をオフに切り替えます。

Photo.h と .cpp の内容の上部に static_assert が表示されますが、これは削除する必要があります。

ビルドできることをもう一度確認します (ただし、まだ実行しないでください)。

コードをスタブに移行する

ソースプロジェクトの Photo.h および .cpp の内容をターゲットプロジェクトにコピーします。

ここからは、コピーしたコードを移行するための残りの手順は、「Photo ソースコードを移行する」セクションに記載されている手順と同じです。

次の方法で共有

UWP Photo Editor サンプルアプリの Windows App SDK への移行 (C++/WinRT)

Windows App SDK 用のツールをインストールする

新しいプロジェクトを作成する

コードを移行する順序

ソースコードファイル全体をコピーします。

アセットファイルをコピーする

Photo モデルを移行する

Photo ソースコードファイルをコピーする

Photo ソースコードを移行する

App クラスを移行する

メインウィンドウオブジェクトを使用可能にする

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

DetailPage ビューを移行する

Win2D NuGet パッケージを参照する

DetailPage ソースコードファイルをコピーする

DetailPage ソースコードを移行する

MainPage ビューを移行する

MainPage ソースコードファイルをコピーする

MainPage のソースコードを移行する

MainWindow を更新する

スレッドモデルの違いに必要な移行の変更

MainPage

Photo

既知の問題

アプリの種類に関する問題 (Preview 3 にのみ影響)

移行したアプリをテストする

付録：Photo モデルのファイルの内容をコピーする

IDL を追加してスタブを生成する

コードをスタブに移行する

その他のリソース

次の方法で共有

UWP Photo Editor サンプル アプリの Windows App SDK への移行 (C++/WinRT)

Windows App SDK 用のツールをインストールする

新しいプロジェクトを作成する

コードを移行する順序

ソース コード ファイル全体をコピーします。

アセット ファイルをコピーする

Photo モデルを移行する

Photo ソース コード ファイルをコピーする

Photo ソース コードを移行する

App クラスを移行する

メイン ウィンドウ オブジェクトを使用可能にする

App::OnNavigationFailed

App::CreateRootFrame

App::OnLaunched

DetailPage ビューを移行する

Win2D NuGet パッケージを参照する

DetailPage ソース コード ファイルをコピーする

DetailPage ソース コードを移行する

MainPage ビューを移行する

MainPage ソース コード ファイルをコピーする

MainPage のソース コードを移行する

MainWindow を更新する

スレッド モデルの違いに必要な移行の変更

MainPage

Photo

既知の問題

アプリの種類に関する問題 (Preview 3 にのみ影響)

移行したアプリをテストする

付録：Photo モデルのファイルの内容をコピーする

IDL を追加してスタブを生成する

コードをスタブに移行する

関連トピック

その他のリソース

UWP Photo Editor サンプルアプリの Windows App SDK への移行 (C++/WinRT)

ソースコードファイル全体をコピーします。

アセットファイルをコピーする

Photo ソースコードファイルをコピーする

Photo ソースコードを移行する

メインウィンドウオブジェクトを使用可能にする

DetailPage ソースコードファイルをコピーする

DetailPage ソースコードを移行する

MainPage ソースコードファイルをコピーする

MainPage のソースコードを移行する

スレッドモデルの違いに必要な移行の変更