概要: [ナビゲーション]Getting started: Navigation

ナビゲーションの追加Adding navigation

iOS では、アプリのナビゲーション用に UINavigationController クラスが用意されています。ビューのプッシュ/ポップ操作を通じて、アプリを定義する UIViewControllers の階層を作ることができます。iOS provides the UINavigationController class to help with in-app navigation: you can push and pop views to create the hierarchy of UIViewControllers that define your app.

これに対して、複数のビューを含む Windows 10 アプリはナビゲーションに対してさらに多くの Web サイト アプローチを行います。In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. ユーザーがコントロールをクリックしてページ間を移動し、アプリ内を進むことを考えてみることができます。You can imagine your users hopping from page to page as they click on controls to work their way through the app. 詳しくは、「ナビゲーション デザインの基本」をご覧ください。For more info, see Navigation design basics.

Windows 10 アプリでこのナビゲーションを管理する方法の1つは、 Frame クラスを使用することです。One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. 以下のチュートリアルでは実際に試す方法を示しています。The following walkthrough shows you how to try this out.

以前に開始したソリューションに戻り、MainPage.xaml ファイルを開いて、[デザイン] ビューにボタンを追加します。Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. このボタンの Content プロパティを "Button" から "Go To Page" に変更します。Change the button's Content property from "Button" to "Go To Page". 次に、ボタンの Click イベントのハンドラーを、次の図に示すように作成します。Then, create a handler for the button's Click event, as shown in the following figure. 作成方法がわからない場合は、前のセクションのチュートリアルを見直してください (ヒント: [デザイン] ビューにあるボタンをダブルクリックします)。If you don't remember how to do this, review the walkthrough in the previous section (Hint: double-click the button in the Design view).

Visual Studio でのボタンとそのクリック イベントの追加

新しいページを追加しましょう。Let's add a new page. [ソリューション] ビューで、[プロジェクト] メニュー、[新しい項目の追加] の順にタップします。In the Solution view, tap the Project menu, and tap Add New Item. 次の図に示すように、[空白のページ] をタップし、[追加] をタップします。Tap Blank Page as shown in the following figure, and then tap Add.

Visual Studio での新しいページの追加

次に、BlankPage.xaml ファイルにボタンを追加します。Next, add a button to the BlankPage.xaml file. ここでは、AppBarButton コントロールを使い、ボタンに "前に戻る矢印" の画像を設定します。[XAML] ビューで、 <AppBarButton Icon="Back"/><Grid> </Grid> 要素の間に追加します。Let's use the AppBarButton control, and let's give it a back arrow image: in the XAML view, add <AppBarButton Icon="Back"/> between the <Grid> </Grid> elements.

次に、イベントハンドラーをボタンに追加してみましょう。 デザイン ビューでコントロールをダブルクリックし、次の図に示すように、Microsoft Visual Studio "AppBarButton click" というテキストを _ クリック ボックスに追加して、対応するイベントハンドラーを BlankPage.xaml.cs ファイルに追加して表示します。Now, let's add an event handler to the button: double-click the control in the Design view and Microsoft Visual Studio adds the text "AppBarButton_Click" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage.xaml.cs file.

Visual Studio での戻るボタンとそのクリック イベントの追加

BlankPage.xaml ファイルの XAML ビューに戻り、<AppBarButton> 要素の Extensible Application Markup Language (XAML) コードが次のようになっていることを確かめます。If you return to the BlankPage.xaml file's XAML view, the <AppBarButton> element's Extensible Application Markup Language (XAML) code should now look like this:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

BlankPage.xaml.cs ファイルに戻り、以下のコードを追加して、ユーザーがボタンをタップすると前のページに戻るようにします。Return to the BlankPage.xaml.cs file, and add this code to go to the previous page after the user taps the button.

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

最後に、MainPage.xaml.cs ファイルを開き、次のコードを追加します。Finally, open the MainPage.xaml.cs file and add this code. このコードは、ユーザーがボタンをタップしたときに BlankPage を開くためのコードです。It opens BlankPage after the user taps the button.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

それでは、プログラムを実行してみましょう。Now, run the program. [Go To Page] ボタンをタップすると、他のページに進みます。矢印スタイルの戻るボタンをタップすると、前のページに戻ります。Tap the "Go To Page" button to go to the other page, and then tap the back-arrow button to return to the previous page.

ページのナビゲーションは、Frame クラスによって管理されます。Page navigation is managed by the Frame class. IOS の UINavigationController クラスで Pushviewcontroller メソッドと popviewcontroller メソッドが使用されているため、UWP アプリの Frame クラスは Navigate メソッドと GoBack メソッドを提供します。As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. Frame クラスには、名前から推測されるとおりに動作する GoForward というメソッドもあります。The Frame class also has a method called GoForward, which does what you might expect.

このチュートリアルでは、ナビゲーションを行うたびに BlankPage の新しいインスタンスが作成されます。This walkthrough creates a new instance of BlankPage each time you navigate to it. (前のインスタンスは自動的に解放されます)。(The previous instance will be freed, or released, automatically). 毎回新しいインスタンスが作成されることがないようにするには、BlankPage.xaml.cs ファイル内の BlankPage クラスのコンストラクターに以下のコードを追加します。If you don't want a new instance to be created each time, add the following code to the BlankPage class's constructor in the BlankPage.xaml.cs file. これにより、NavigationCacheMode 動作が有効になります。This will enable the NavigationCacheMode behavior.

public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

また、Frame クラスの CacheSize プロパティを取得または設定すると、キャッシュするナビゲーションの履歴のページ数を管理できます。You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

ナビゲーションについて詳しくは、「ナビゲーション」と「XAML パーソナリティ アニメーションのサンプル」をご覧ください。For more info about navigation, see Navigation and XAML personality animations sample.

メモ   JavaScript と HTML を使用した UWP アプリのナビゲーションの詳細については、「クイックスタート: 単一ページナビゲーションの使用」を参照してください。Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

次のステップNext step

概要: アニメーションGetting started: Animation