Windows10-development-navigation

提供：Dev Guides
移動先:案内、検索

Windows 10開発-ナビゲーション

ユニバーサルWindowsプラットフォーム（UWP）アプリケーションでは、ナビゲーションは、ナビゲーション構造、ナビゲーション要素、およびシステムレベルの機能の柔軟なモデルです。 アプリ、ページ、コンテンツ間を移動するためのさまざまな直感的なユーザーエクスペリエンスを可能にします。

すべてのコンテンツと機能が1つのページに簡単に収まり、開発者が複数のページを作成する必要がない状況とシナリオがあります。 ただし、ほとんどのアプリケーションでは、異なるコンテンツと機能間の相互作用に複数のページが使用されます。

アプリに複数のページがある場合、開発者が適切なナビゲーションエクスペリエンスを提供することが非常に重要です。

ページモデル

通常、ユニバーサルWindowsプラットフォーム（UWP）アプリケーションでは、単一ページナビゲーションモデルが使用されます。

重要な機能は-

  • 単一ページナビゲーションモデルは、アプリケーションのすべてのコンテキストと追加コンテンツおよびデータを中央フレームに保持します。
  • アプリケーションのコンテンツを複数のページに分割できます。 ただし、あるページから別のページに移動すると、アプリケーションはページをメインページフォームにロードします。
  • アプリケーションのメインページもコードとデータもアンロードされないため、状態の管理が容易になり、ページ間の遷移アニメーションがよりスムーズになります。

マルチページナビゲーションは、アプリケーションのコンテキストを気にすることなく、異なるページまたは画面間を移動するためにも使用されます。 複数ページのナビゲーションでは、各ページに独自の機能セット、ユーザーインターフェイス、データなどがあります。

通常、マルチページナビゲーションは、Webサイト内のWebページで使用されます。

ナビゲーション構造

複数ページのナビゲーションでは、各ページに独自の機能セット、ユーザーインターフェイス、データなどがあります。 たとえば、写真アプリケーションには写真をキャプチャするための1つのページがあり、ユーザーが写真を編集したい場合は別のページに移動し、画像ライブラリを維持するために別のページがあります。

アプリケーションのナビゲーション構造は、これらのページの編成方法によって定義されます。

以下は、アプリケーションでナビゲーションを構造化する方法です-

階層

このタイプのナビゲーション構造では、

  • ページは、構造のようなツリーに編成されます。
  • 各子ページには1つの親しかありませんが、親は1つ以上の子ページを持つことができます。
  • 子ページに到達するには、親を経由する必要があります。

階層構造

Peer

このタイプのナビゲーションでは-

  • ページは並んで存在します。
  • 1つのページから別のページに任意の順序で移動できます。

ピア

ほとんどのマルチページアプリケーションでは、両方の構造が同時に使用されます。 一部のページはピアとして編成され、一部は階層に編成されています。

3つのページを含む例を見てみましょう。

  • UWPNavigation という名前の空のUWPアプリケーションを作成します。
  • *ソリューションエクスプローラー*でプロジェクトを右クリックして、さらに2つの空白ページを追加し、メニューから*追加>新規アイテム*オプションを選択すると、次のダイアログウィンドウが開きます。

新しいアイテムを追加

  • 中央のペインから空白ページを選択し、[追加]ボタンをクリックします。
  • 次に、上記の手順に従ってページをもう1つ追加します。

ソリューションエクスプローラーには、 MainPage、BlankPage1 、および BlankPage2 の3つのページが表示されます。

以下に示すのは、2つのボタンが追加された MainPage のXAMLコードです。 

<Page
   x:Class = "UWPNavigation.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:UWPNavigation"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Hub Header = "Hi, this Main Page"/>
      <Button Content = "Go to Page 1" Margin = "64,131,0,477" Click = "Button_Click"/>
      <Button Content = "Go to Page 2" Margin = "64,210,0,398" Click = "Button_Click_1"/>
   </Grid>

</Page>

以下に示すのは、 MainPage の2つのボタンのC＃コードで、他の2つのページに移動します。 

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

//The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPNavigation {

  ///<summary>
     ///An empty page that can be used on its own or navigated to within a Frame.
  ///</summary>

   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent();
      }

      private void Button_Click(object sender, RoutedEventArgs e){
         this.Frame.Navigate(typeof(BlankPage1));
      }

      private void Button_Click_1(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(BlankPage2));
      }

   }
}
  • 空白ページ1 *のXAMLコードを以下に示します。
<Page
   x:Class = "UWPNavigation.BlankPage1"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:UWPNavigation"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Hub Header = "Hi, this is page 1"/>
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/>
   </Grid>

</Page>

ボタンのC＃コード-メインページに移動する*空白ページ1 *のイベントをクリックします。 

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

//The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=234238

namespace UWPNavigation {

  ///<summary>
     ///An empty page that can be used on its own or navigated to within a Frame.
  ///</summary>

   public sealed partial class BlankPage1 : Page {

      public BlankPage1() {
         this.InitializeComponent();
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage));
      }

   }
}

以下は、*空白ページ2 *のXAMLコードです。 

<Page
   x:Class = "UWPNavigation.BlankPage2"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:UWPNavigation"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Hub Header = "Hi, this is page 2"/>
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/>
   </Grid>

</Page>

以下は、*空白ページ2 *のボタンクリックイベントのC＃コードで、メインページに移動します。 

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

//The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=234238

namespace UWPNavigation {

  ///<summary>
     ///An empty page that can be used on its own or navigated to within a Frame.
  ///</summary>

   public sealed partial class BlankPage2 : Page {

      public BlankPage2(){
         this.InitializeComponent();
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage));
      }

   }
}

上記のコードをコンパイルして実行すると、次のウィンドウが表示されます。

コンパイルおよび実行

任意のボタンをクリックすると、それぞれのページに移動します。 [ページ1に移動]をクリックすると、次のページが表示されます。

コンパイルおよび実行1

[*メインページに移動] *ボタンをクリックすると、メインページに戻ります。

「https://www.finddevguides.com/index.php?title=Windows10-development-navigation&oldid=9426」から取得
Powered by MediaWiki