演習 - Template Studio を使ったアプリの作成

完了

Template Studio for WPF は Visual Studio の拡張機能で、ウィザード ベースのエクスペリエンスを通じて、Windows Presentation Foundation (WPF) アプリの作成を加速させます。 作成される WPF プロジェクトには、実績のあるパターンとベスト プラクティスを実装するとともに、最新の Windows の機能が組み込まれた整形式の読み取り可能なコードが含まれます。

Template Studio でできること

コード作成という重労働を Template Studio に任せることができ、WPF アプリの作成を始めるたびにコードを手動で記述する必要がありません。 作業を開始する前にアプリの構造に関する明確な考えがある限り、ウィザードを使用してプロジェクトに機能とビューを追加するというプロセスを通して、段階的に作業を進めることができます。 終了後に、自分のプロジェクトに固有の機能を実装するコードの追加を続けることができます。

Template Studio をインストールする

"ツールの自動インストール" モジュールのインストール スクリプトを使用した場合は、Template Studio をすぐに使用できます。 このツールを自分でインストールする必要がある場合は、こちらの Visual Studio 拡張機能のサイトに移動し、[ダウンロード] を選択します。

Template Studio を使用してアプリを作成する

Template Studio を使用して、架空のアプリを作成するプロセスを見てみましょう。 自分のコンピューターで作業を進めてかまいせん。

まず、アプリの機能の概略を描いてみましょう。 アプリにどのような機能を持たせるか、ビューをどのように相互接続するかを文字どおり 1 枚の紙にスケッチすると役立つ可能性があります。 たとえば、天気予報アプリをビルドするとします。 このチュートリアルの最後には、アプリのスケルトンができ、天気に関する重要機能を追加する準備が整います。

アプリで実行すること:

  • [ナビゲーション ビュー] コントロールを使用して、さまざまなビューを切り替えます。
  • 空白のページに 1 週間の天気記号を表示します。
  • WebView コントロール内のマップを使用して、現在の天気予報の領域を表示します。
  • 一覧-詳細形式を使用して、長期予測を表示します。
  • ユーザーが設定を変更できる [設定] ページを含めます。
  • 通知を使用して、異常気象についてユーザーに警告します。

これで、これらの詳細が決まったので、Template Studio ウィザードを使用してプロジェクトを作成する準備が整いました。

  1. Template Studio ウィザードを開くには、Visual Studio で [ファイル]>[新規作成]>[プロジェクト] を選択して、プロジェクトを作成します。 Template Studio は、Template Studio for WPF として見つけることができます。
  2. アプリに Weather という名前を付け、[作成] を選択してウィザードを開始します。 Screenshot that shows the Configure your new project window for a Template Studio app in Visual Studio.
  3. Template Studio ウィザードが開きます。
  4. [プロジェクトの種類] ページで、[ナビゲーション ウィンドウ] を選択し、[次へ] を選択します。 Screenshot that shows selecting the Navigation Pane on the Project type page of the Template Studio, and the Next button selected.
  5. [デザイン パターン] ページで、[分離コード] を選択し、[次へ] を選択します。
  6. [ページ] ページには、興味深い情報が表示されます。 ページの各種類をアプリに追加できます。 右側のパネルで、ページの名前と順序を変更できます。 既定で [メイン] という名前の空白のページが追加されていることがわかります。 天気記号をこのページに表示するので、名前を「CurrentForecast」に変更します。
  7. 次は、WebView ページ、ListDetails ページ、[設定] ページを追加します。 Screenshot that shows all of the pages added to the app and the Next button selected.
  8. [次へ] を選択します。 Windows のより高度な機能を [機能] ページに追加できます。 ここでは、[トースト通知] を追加します。 Screenshot that shows the Toast Notification feature added to the app and the Create button selected.
  9. このモジュールでは、[サービス][テスト] をスキップします。 [作成] を選択して、プロジェクトを生成します。
  10. WebView コントロールに天気情報を読み込むには、Views フォルダーで WebMapsPage.xaml.cs を開き、DefaultUrl の文字列値を https://www.msn.com/en-us/weather/maps/cloud/in-Redmond,WA に変更します。

これでプロジェクトのコードが作成されたため、[実行] または F5 キーを選択して、プロジェクトをビルドして実行できます。

Screenshot that shows the app running with the map, chart, and settings panes displayed.

かなり目を引くアプリが既に動作していることがわかります。 あとは、機能を追加するだけです。 簡単です。