Windows Template Studioでプロジェクトを生成する
それでは、Windows Template Studioを試してみましょう。ここではVisual Studio 2017で説明していきます。完成したプロジェクトは、サンプルコードのSample01.Hamburger.CodeBehindになります。
新規プロジェクトでWindows Template Studioを選ぶ
Visual Studioで新しくUWPアプリのプロジェクトを作るときに［Windows Template Studio (Univeral Windows)］を選びます（次の画像）。なお、Visual Studio 2019の場合、本稿執筆時点では、プロジェクト作成ウィザードを使うときに「template」などと検索する必要がありました。
すると、Windows Template Studioのウィザードが立ち上がります。そのときに、テンプレートの更新をインターネットに探しに行くので、ちょっと時間がかかるかもしれません。この後、4つのステップを進めていくと、プロジェクトが出来上がります。
ナビゲーション方式を選ぶ
ウィザード最初の選択は「プロジェクトの種類」となっています。ここで画面遷移（ナビゲーション）の方式を選びます（次の画像）。
ここでは［Navigation Pane］のまま、［次へ］ボタンをクリックして先へ進めましょう。これは、ハンバーガーメニューを使って画面を切り替える方式です。ハンバーガーメニューは、「ストア」アプリ（ウィンドウの横幅が狭いとき）やWindows 10標準の「天気」アプリなどで使われています。
デザインパターンを選ぶ
2番目の選択は、アプリのアーキテクチャのデザインパターンです（次の画像）。ここも、既定の［Code Behind］のままで先に進みます。
画面を追加する
3つ目の画面では、アプリに画面を追加します（次の画像）。既定では、Blankページ（空白の画面）が1つ、「Main」という名前で追加されています。
ウィザードのこの画面は、ちょっとややこしいです。アプリに含める画面を選ぶだけでなく、その名前もここで設定します。また、同じ種類の画面を複数追加することもできますし、追加した画面を削除することもできます。
試しに、Blankページをもう1つ追加してみましょう（後で削除します）。
［Blank］ページの四角の中にマウスをホバーさせると、四角全体がグレーに変わり、左上にプラス記号が表示されます（次の画像）。
この状態で四角の中をクリックするとBlankページが追加され、「Blank」という既定の名前で右側に表示されます（次の画像の赤枠）。プラス記号を狙ってクリックする必要はありません。ページを追加すると、四角の右下の数字が増えます（赤丸）。追加された画面の数です。また、右側の赤枠の部分で、画面の名前を変更したり、右にある［×］アイコンでその画面を削除したり、左の小さい縦長の灰色の四角をドラッグして上下の位置を入れ替えることができます（Settingsページだけは一番下に固定で名前も変更不可）。その上下の並びは、ハンバーガーメニューやタブに表示される順番になります。
上で追加した［Blank］ページは削除して、他のページをいくつか追加してみましょう。ここでは次に挙げるページを作ってみました。
- Main（既定で生成されたBlankページ）
- DataGrid
- WebView
- Map
- InkSmartCanvas
- Settings
以上が終わって、ウィザードの画面は次の画像のようになります。追加したページに必要な機能もいくつか自動的に追加されています。それでは、［次へ］ボタンをクリックして先へ進みましょう。
機能を追加する
ウィザードの最後は、機能の選択です（次の画像）。先ほど追加した画面に必要な機能が、すでに追加されています。
この画面の操作は、機能の四角をクリックして追加、右側の追加された機能名の右に出る［×］アイコンで削除です。ここでは、UWPアプリらしい機能として、次の2つを追加してみましょう。
- Toast Notifications（トースト通知）
- Share Source（共有へ送る）
プロジェクトの生成
最後に［作成］ボタンをクリックすれば、プロジェクトが生成されます。それまでは、［戻る］ボタンや左側にあるステップのリストを使って、自由に修正できます。プロジェクトを生成した後は、画面と機能の追加はできますが、ナビゲーション方式とアーキテクチャの変更はできなくなります。
