[UWP] 入門006:別のページに遷移する

日曜日 , 28, 2月 2016 mac WinRT(UWP), UWP(Win 10), 入門 Leave a comment

　本記事はUWP（Universal Windows Platform）の入門記事第6回です。

　今回は新しいページ（画面）の追加と、追加したページに遷移する方法を紹介します。

 

概要

 

　本記事では以下のことが学習できます。

 

・新期ページの追加

・別のページへの移動

 

環境条件

 

　本記事は以下の環境を前提としてます。

 

・Windows 10 OS(Pro以上)

・Visual Studio 2015(+UWP SDK)

 

新期ページの追加

 

Step1:プロジェクトの作成

 

　まず新規プロジェクトを作成します。プロジェクト名はお好みで構いませんが、ここではPageSampleという名前でプロジェクトを作成したものとして進めます。

001

(プロジェクトの作成については入門003:Hello World(1)を参照してください。)

 

Step2:「新しい項目の追加」ウィンドウの起動

 

　新しくページを追加するにはソリューションエクスプローラーのプロジェクト名の位置で右クリック→「追加」→「新しい項目」をクリックします。

002

 

　またはソリューションエクスプローラーのプロジェクト名またはプロジェクト内のファイルを選択した状態で上部メニューバーの「プロジェクト」→「新しい項目の追加」からも追加可能です。

003

 

Step3:空白のページの追加

 

　下画像のように「新しい項目の追加」ポップアップウィンドウが機能しますので、「空白のページ」を選択し、「PageA.xaml」と名前を付けます。

004

 

　画面右下の「追加」をクリックします。

005

 

　PageA.xamlがソリューションエクスプローラーに追加されました。

 

Step4:PageA.xamlの編集

 

　新しく追加したPageA.xamlにページ移動したことがわかりやすいように文字を表示します。

　ソリューションエクスプローラーのPageA.xamlをダブルクリックして開きます。

 

　Visual Studioの左側「ツールボックス」から「TextBlock」コントロールをデザインビューにドロップします。

006

 

　デザインビューの画面が小さすぎる場合は、デザインビュー左下の%表示を変更することで拡大縮小が可能です。

007

 

　追加したTextBlockコントロールの文字をクリックすることで編集が可能になります。文字をPageAと変更します。

007

　以下のように、コードビューのTextBlockのTextプロパティを変更することでも表示する文字を変更することが可能です。

 

        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="64,71,0,0" TextWrapping="Wrap" Text="PageA" VerticalAlignment="Top"/>

 

　これで新しいPageAページが追加できました。

　XAMLコードは以下のようになっているはずです(位置を表すMarginプロパティは異なっていても構いません)。

 

<Page
    x:Class="PageSample.PageA"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PageSample"
    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}">
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="64,71,0,0" TextWrapping="Wrap" Text="PageA" VerticalAlignment="Top"/>
    </Grid>
</Page>

 

 

MainPageからPageAに遷移する

 

Step1:ページ移動するためのボタンを追加

 

　続いてMainPage.xamlを開きます。

　ツールボックスからButtonコントロールをドロップします。

009

 

Step2:Clickイベントハンドラーの作成

 

　ボタンを押した際のイベントハンドラーを作成します。入門003:Hello World(1)でも同様のイベントハンドラーを作成しましたが、今回はイベントハンドラーを作成する方法を複数紹介します。

 

　(方法１)配置したButtonコントロールをダブルクリックすると自動でClickイベントが作成され、MainPage.xaml.csが表示されます。

010

 

　(方法2)MainPage.xamlのコードエディタのButtonコントロールのタグの個所でCliとタイプすると下画像のようにコード補完が表示されるので「Click」を選択します。

011

 

　表示される<新しいイベントハンドラー>をクリックすることでも自動でMainPage.xaml.csにイベントハンドラーが追加されます。

012

 

(方法3)デザインビューでButtonコントロールをクリックして選択した状態で、画面右下の「プロパティ」ウィンドウの稲妻マークをクリックします。

013

 

　Buttonコントロールで利用できるイベントの一覧が表示されますので、Clickの行の右側のテキストエリアをダブルクリックします。

014

 

(方法4)これまでの方法では自動でMainPage.xaml.csに自動でイベントハンドラーが追加されましたが、ハンドラー名が「button_Click」となっていました。自分で名前を付けたい場合は、上記方法をとらず、コードビューとMainPage.xaml.csを自分で編集してイベントハンドラーを設定することもできます。

 

　どの方法が正しいということはありませんし、すべてを覚える必要もありませんが、Visual Studioの色々な編集方法について少しずつ慣れていきましょう。

 

Step3:ページを移動する処理の記述

 

　それではMainPageでボタンをクリックしたらPageAに移動する処理を記述しましょう。

　MainPage.xaml.csのbutton_Clickイベントハンドラーを以下のように修正します。

 

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

 

　デバッグしてボタンクリックでPageAという文字を表示するPageA.xamlに移動することを確認しましょう。

 

　上記コードは入門005:Hello World(3) 解説で紹介したApp.xaml.csの以下のコードに似ています。

 

            if (rootFrame.Content == null)
            {
                // ナビゲーション スタックが復元されない場合は、最初のページに移動します。
                // このとき、必要な情報をナビゲーション パラメーターとして渡して、新しいページを
                //構成します
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }

 

　このようにFrameクラスのNavigateメソッドを利用してページを移動します。これがわかれば、アプリケーションの起動時に表示されるページをMainPage.xamlではなく、PageA.xamlに変更する場合、以下のように変更すれば良いと推測できます。

 

                // 最初に表示するページをPageA.xamlに変更する
                rootFrame.Navigate(typeof(PageA), e.Arguments);

 

　これで基本的なページ遷移の方法がわかりました。

　以降は前のページから新しページに情報を渡す方法や、ページに移動してきた際や、別のページに移動する際に何か処理を行いたい場合の対処方法を紹介します。

 

前のページから新しいページに情報を渡したい場合

 

　ページ遷移時に前のページからの情報を渡したい場合があります。方法は幾つかありますのでメリットデメリットを含めて紹介していきます。

 

(方法１)Navigateメソッドの引数で情報を渡す

 

　Navigateメソッドの引数で値を渡すことができます。

　以下は遷移元のMainPage.xaml.csのコードです。

 

        private void button_Click(object sender, RoutedEventArgs e)
        {
            // 第二引数で値を渡せます。
            // 型はobject型なので渡す値の型に制限はありません。
            this.Frame.Navigate(typeof(PageA), "このようにして値を渡せます");
        }

 

　遷移先のPageA.xaml.csでは以下のように値を受け取れます。

 

        // ページ遷移直後にOnNavigatedToイベントハンドラーが呼び出される
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // このようにe.Parameterで前のページから渡された値を取得できます。
            // 値はキャストして取り出します。
            string param = e.Parameter as string;

            base.OnNavigatedTo(e);
        }

 

　OnNavigatedToはページに移動してきた際に呼び出されるイベントハンドラーです。

　別の回で説明しますが、タイミング的には画面の解析(ビジュアルツリーの読み込み)は終わっていないので、もし渡された値を利用して画面を更新したい場合は、PageクラスのLoadedイベントハンドラー時に行いましょう。

 

(方法2)staticな変数に値を持たせる

 

　ほぼすべてのページで同様のデータを受け渡す場合はstaticな領域に値を持たせてしまう方法もあります。

　staticな変数は多用すべきでなないので、どのようなタイミングでこの方法を使うかは悩ましいところです(こういう方法もあるということで)。サンプルコードは理解しやすいように文字列を渡していますが、このような場合は方法1のNavigateメソッドの引数に値を渡すが適しているでしょう。

　以下のようなstaticな変数を持ったクラスがあるとします。

 

    class StaticParam
    {
        public static string param;
    }

 

　遷移元で以下のように値を持たせます。

 

            // staticな変数に値を持たせる
            // 受け取り先でcastが要らないのが利点といえないこともない・・・。
            StaticParam.param = "staticな変数に値を持たせます";

            this.Frame.Navigate(typeof(PageA));

 

　遷移先で以下のように値を取り出します。

 

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string param = StaticParam.param;

            base.OnNavigatedTo(e);
        }

 

(方法3)ストレージを利用する

 

　詳細はファイル処理のところで説明しますが、ページ遷移時にファイルとしてローカルストレージに保存し、遷移後にローカルストレージから取り出すという受け渡し方も可能です。

　簡単な値の受け渡しには面倒な手段ですが、上記2つの方法はアプリケーションがメモリ上から破棄された場合データが失われるのに対し、この方法だとアプリケーション再開時にも値を取り出せるという特徴があります。

 

ページ遷移時のイベントについて

 

　値の受け渡しの説明時に、OnNavigatedToイベントハンドラーが登場しました。OnNavigatedToは遷移先でページ移動した際に発生するイベントですが、元のページ(遷移元)でページ移動直前に発生するイベントも存在します。それがOnNavigatedFromです。

 

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            // このページから他のページに遷移する際に発生するイベント
            // ここでリソースの破棄などを行う

            base.OnNavigatedFrom(e);
        }

 

　OnNavigatedFromと似たようなタイミングで呼び出されるメソッドがあります。OnNavigatingFromです。

 

        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            // OnNavigatedFromがページがアクティブでなくなった後に呼び出されるのに対して、
            // OnNavigatingFromはページがアクティブでなくなる寸前に呼び出される。
            // そのためこのタイミングならページ遷移をキャンセルできる。

            // ページ遷移をキャンセルする
            // これだと常に遷移できないので、通常は何か判定を行い条件を満たす場合にキャンセルする
            e.Cancel = true;

            base.OnNavigatingFrom(e);
        }

 

　サンプルコードにも書いてあるように、こちらは遷移元のページがアクティブな状態でイベントが発生します。そのため、OnNavigatingFrom中であれば、ページ遷移をキャンセルすることが可能です。

 

最後に

 

　今回は別のページに遷移する方法について紹介しました。

　これまでにボタンクリックや、遷移開始時などのイベントもいくつか登場してきました。イベントについても別の回で解説する予定ですが、次回は特定のタイミングで発生するボタンクリックなどのイベントではなく、定期的に発生するタイマーイベントについて紹介しようと思います。これもアプリケーション開発では良く利用する処理です。

 

　次回入門007:定期的に処理を行う(タイマーイベント)

 

このエントリーをはてなブックマークに追加
LINEで送る

関連記事:

  1. [UWP] 入門005:Hello World(3) 解説
  2. MetroStyleApp入門 vol12.プロジェクトのスタートページを変更する
  3. Windows 8:WebViewがマウスに反応しない
  4. [UWP] 入門007:定期的に処理を行う(タイマーイベント)

匿名 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。