ページ項目テンプレートの追加 (C#/VB/C++ と XAML を使った Windows ストア アプリ)

Windows ストア アプリにページ項目テンプレートを追加すると、ページ間を簡単に移動できるようになります。Windows ストアの項目テンプレートについて詳しくは、「Windows ストア アプリ用の C#、VB、C++ 項目テンプレート」をご覧ください。

"空のアプリケーション" プロジェクト テンプレートでプロジェクトを作成しましょう。このプロジェクト テンプレートは、コントロールが含まれていない最小限のテンプレートです。 グリッド アプリケーション テンプレートや分割アプリケーション テンプレートと同じように、"空のアプリケーション" テンプレートでは、フレームが作成され、空のページに移動します。

アプリには、グリッド アプリケーションや分割アプリケーションを構成する各ページ、空白のページ、基本ページなど、さまざまなページを追加できます。 各項目ページ テンプレートでは、新しい XAML ファイルとそれに関連するコード ビハインド ファイル (.vb、.cs、.h、.cpp) が作成されます。

まず、"空のアプリケーション" テンプレートでナビゲーション アプリを作成します。

JJ655407.wedge(ja-jp,WIN.10).gif空のアプリの作成

  1. Visual Studio のメニューで、[ファイル][新しいプロジェクト] の順にクリックします。

  2. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで、[Visual C#][Visual Basic]、または [Visual C++] ノードをクリックします。

  3. 中央のウィンドウで、[空のアプリケーション] をクリックします。

  4. [名前] ボックスに「BlankApp」と入力し、[OK] をクリックします。

    ソリューションが作られ、プロジェクト ファイルがソリューション エクスプローラーに表示されます。プロジェクト ファイルについて詳しくは、「Windows ストア アプリ用の C#、VB、C++ プロジェクト テンプレート」をご覧ください。

    重要  Visual Studio を初めて起動したときに、開発者用ライセンスを取得するように求められます。詳しくは、「開発者用ライセンスの取得」をご覧ください。

  5. プログラムを実行するには、Visual Studio のメニューで、[デバッグ] をクリックして [デバッグの開始] をクリックするか、F5 キーを押します。

    空白のページが表示されます。

  6. デバッグを終了して Visual Studio に戻るには、Shift キーを押しながら F5 キーを押します。

次に、2 つ目のページを追加します。

JJ655407.wedge(ja-jp,WIN.10).gif基本ページの追加

  1. ソリューション エクスプローラーで、[BlankApp] プロジェクト ノードのショートカット メニューを開き、[追加][新しい項目] の順にクリックします。

  2. [新しい項目の追加] ダイアログ ボックスの中央のウィンドウで、[空白のページ] をクリックします。

  3. [名前] ボックスに「page2」と入力し、[追加] をクリックします。

    page2.xaml ファイルが、他の 1 つ (Visual C++ の場合は 2 つ) のプロジェクト ファイル (page2.xaml.vb、page2.xaml.cs、または page2.xaml.cpp および page2.xaml.h) と共に作成されます。

次に、ページ間を移動するためのコードを追加します。ここで作っているナビゲーション アプリでは、ボタンクリック イベントを使ってあるページから別のページに移動します。

JJ655407.wedge(ja-jp,WIN.10).gifナビゲーション コードの追加

  1. ソリューション エクスプローラーで、MainPage.xaml を開きます。

  2. [ツールボックス] からデザイン サーフェイスに Button をドラッグします。

  3. Extensible Application Markup Language (XAML) ビューまたはデザイン ビューで、MainPage.xaml に追加したボタンを選びます。

  4. プロパティ ウィンドウの [イベント] ボタン (イベント ボタン) をクリックします。

  5. イベントの一覧の先頭にある Click イベントを探します。このイベントのテキスト ボックスに、Click イベントを処理する関数の名前を入力します。この例では、「"Button_Click"」と入力します。

    プロパティ ウィンドウのイベントの一覧

  6. Enter キーを押します。イベント ハンドラー メソッドが作成され、イベントの発生時に実行されるコードを追加できるように、コード エディターに表示されます。

  7. 新しいイベント ハンドラーに次のコードを追加します。

    this.Frame.Navigate(typeof(page2));
    
    Me.Frame.Navigate(GetType(BlankPage1))
    
  8. F5 キーを押してアプリを実行します。

    [次のページ] ボタンをクリックすると、page2.xaml ではその既定のコンテンツが読み込まれ、表示されます。ナビゲーション アプリのページ 2

    [戻る] ボタンをクリックするとアプリの最初のページに戻ります。

関連トピック

Windows ストア アプリ用の C#、VB、C++ 項目テンプレート

検索コントラクト項目テンプレートの追加