ユニバーサルアプリでページを切り替えるコードを紹介します。

概要

ユニバーサールアプリで別のフォームや画面に表示を切り替えるコードを紹介します。
ユニバーサルアプリではWindows Phoneなどのモバイルデバイスで動作するアプリも含まれるため、画面切り替えは別のウィンドウが表示される動作ではなく、1つのウィンドウで画面の表示が切り替わる動作になります。画面はページとして作成してページを切り替えることで画面を切り替えられます。

プログラム

プロジェクトの作成

Universal Windowアプリケーションを作成します。


ソリューションエクスプローラで右クリックしポップアップメニューを表示します。メニューの[追加]の[新しい項目]をクリックします。


[新しい項目の追加]ダイアログボックスが表示されます。一覧から[空白のページ]をクリックして選択します。


[名前]の欄にファイル名を指定します。今回は"SubPage.xaml"とします。設定後[追加]ボタンをクリックします。


ソリューションエクスプローラに"SubPage.xaml"が追加されます。

UI

下図のUIを作成します。

MainPage.xaml

MainPageにはTextBlockとButtonを配置します。

SubPage.xaml

SubPageには、TextBlockを配置します。

コード

下記のコードを記述します。

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Core;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください

namespace SubPageDemo
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

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

解説

ButtonのClickイベントの

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

のコードにより、ページを切り替えます。

実行結果

プロジェクトを実行します。下図のスプラッシュ画面が表示されます。


MainPageの画面が表示されます。[Button]のボタンをクリックします。


SubPageの画面に切り替わります。

ページの表示を切り替えることができました。