[Windows 10 UWP] 画面遷移

画面遷移

ボタンをクリックすると遷移先のPageAが表示されます。

新規プロジェクトを作成します。メニューバーから「ファイル」をクリック→「新規作成」にマウスオーバー→「プロジェクト」をクリックします。

プロジェクト名はScreenPageという名前でプロジェクトを作成します。

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

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

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

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

XAML PageA.xaml

<Page
    x:Class="ScreenPage.PageA"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ScreenPage"
    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="120,205,0,0" TextWrapping="Wrap" Text="PageA" VerticalAlignment="Top" Width="122" Height="35" FontSize="32" TextAlignment="Center"/>
    </Grid>
</Page>

XAML MainPage.xaml

<Page
    x:Class="ScreenPage.PageA"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ScreenPage"
    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="120,205,0,0" TextWrapping="Wrap" Text="PageA" VerticalAlignment="Top" Width="122" Height="35" FontSize="32" TextAlignment="Center"/>
    </Grid>
</Page>

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;
// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください
namespace ScreenPage
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        // ボタンクリックで画面遷移
        private void button_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(PageA));
        }
    }
}

 

目 次