| (追記) Windows App SDKの登場により、以下の内容は古いです。 |
今回は、起動後に、固定した画像を表示するだけのUWPアプリの作り方を解説します。C++/WinRTに依存したコードは無いですが、次回以降の下準備となります。
「【C++/WinRT】C++でUWPアプリを作る」にて紹介した参考書籍で言うと、レッスン14までに相当します。
(1)環境設定(初回のみ)
Windows 10の「設定」にて、[更新とセキュリティ]-[開発者向け]-[開発者向け機能を使う]で、「開発者モード」を選択する。
Visual Studio Installerにて、ワークロードに「ユニバーサルWindowsプラットフォーム開発」、オプションに「C++(v142)ユニバーサルWindowsプラットフォームツール」を選択する。(v142は最新を選択)
Visual Studio 2019にて、[拡張機能]-[拡張機能の管理]で、「C++/WinRT」をインストールする。
(2)ソリューションの作成
Visual Studio 2019にて、[ファイル]-[新規作成]-[プロジェクト]で、「Blank App (C++/WinRT)」を選択する。[次へ]押下後、プロジェクト名、場所、ソリューション名は任意の値を入力する。
[作成]押下後、実行対象とするWindows 10のバージョンを選択する。ここで表示される選択肢は、開発PCにインストールされているWindows 10 SDKに依存する。開発PCのWindows 10自体より新しいSDKバージョンを選択した場合、MainPage.xamlをデザイン画面にて編集できないことに注意する。
(デザイン画面に「Visual Studioでこのコンテンツを表示するには、新しいバージョンのWindowsが必要です」の警告が表示される。この場合でも、MainPage.xamlの直接編集、ビルド、実行は可能である。)
(3)画面のデザイン
Windows 10のエクスプローラーにて、プロジェクトフォルダの下にAssetsフォルダが存在する。ここにImageフォルダを作成して、表示したい画像ファイル(この例では「Claudia1.png」)を置く。次に、Visual Studio 2019のソリューションエクスプローラーにて、Assetsを選択後、[右クリック]-[追加]-[新しいフィルター]でImageを作成する。そのImageを選択後、[追加]-[既存の項目]で画像ファイルを選択する。
MainPage.xamlを開く。デザイン画面の左上にて、画面の解像度や縦横を選択する。これは、その画面でUWPアプリを実行した場合、そういう風に見えるという目安で、XAMLソースには影響しない。また、左下の％を編集しやすいサイズに変更する。
MainPage.xamlのソースから、サンプルのStackPanelタグで括られた3行を削除する。次に、ツールボックスからGridをデザイン画面の四角の上にドラッグ＆ドロップする。同様に、ツールボックスのImageをドラッグ＆ドロップする。
Imageのプロパティを変更する。名前は、任意の名前を入力する(この例では「image」)。レイアウトのWidthとHeightは、右のクロス矢印ボタンを押下して、Autoにする(後ろの数字は無視)。HorizontalAlignmentとVerticalAlignmentは、一番右側を選択する。Marginは、全てゼロにする。Sourceは、三角印を押下して、表示したい画像を選択する。
結果的に、MainPage.xamlのソースの変更点は、サンプルのStackPanelタグで括られた3行と置き換わる形で、以下の通りになる。もちろん、直接このように書き換えてもよい。
<Grid>
<Image x:Name="image" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="/Assets/Image/Claudia1.png"/>
</Grid>
(4)ソース修正とデバッグ実行
ソースから、サンプルの[Click Me]ボタンのハンドラーを削除、または、コメントアウトする。
// MainPage.cppより4行削除
void MainPage::ClickHandler(IInspectable const&, RoutedEventArgs const&)
{
myButton().Content(box_value(L"Clicked"));
}
// MainPage.hより1行削除
void ClickHandler(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
ソリューション構成は「Debug」、ソリューションプラットフォームは「x64」(開発PCのWindows 10が32bit版の場合は「x86」)を選択して、[F5]キーを押下する。ビルドに成功すると、ウィンドウが表示されて、それに画像が表示される。バツ印を押下して、終了する。
デバッグ実行すると、Windows 10のスタートメニューに登録されてしまう(この例では「TestApp」)。ここから実行も可能である。削除したい場合は、そのアプリ名で[右クリック]-[アンインストール]を選択する(ソース等は削除されない)。
(5)C++/WinRTのアップデート
Visual Studio 2019にインストールされたC++/WinRTは自動更新されるが、その更新をプロジェクトに適用するかどうかは、各プロジェクトにて設定する。[プロジェクト]-[NuGetパッケージの管理]で表示されるNuGetパッケージマネージャーにて、(特に理由が無い限り)最新バージョンを選択する。
