Page Navigate

Button のクリックで「MainPage ⇔ 赤のページ ⇔ 青のページ」に Navigate(遷移)します。

前田稔の超初心者のプログラム入門

Page に Navigate

  1. 現在のページから次のページに移ることを Navigate(遷移 せんい)と言います。
    Button のクリックで「MainPage ⇔ 赤のページ ⇔ 青のページ」と Navigate してみましょう。
  2. Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
    メニューの [プロジェクト/新しい項目の追加/XAML/空白のページ] から BlankPage を二個(BlankPage(赤), BlankPage1(青))追加します。
  3. MainPage の設定です。
    1. MainPage.xaml のソースコードを修正して、直接 Button と TextBox を貼り付けます。
          <Grid>
              <Button x:Name="button" Content="Red" Margin="40,40,0,0" VerticalAlignment="Top" Click="Button_Click"/>
              <TextBox x:Name="textBox" HorizontalAlignment="Left"
                  Margin="70,100,0,0" Text="Main Page" VerticalAlignment="Top"
                  Height="80" Width="200"/>
          </Grid>
      
    2. MainPage.xaml.h にボタンクリックのイベント関数を定義します。
          private:
              void Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
          };
      
    3. MainPage.xaml.cpp にボタンクリックで赤のページにナビゲートするイベント関数をコーディングします。
      L"App1.BlankPage" が赤のページです。
      void App1::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
      {
          Windows::UI::Xaml::Interop::TypeName naviname;
          naviname.Name= ref new String(L"App1.BlankPage");
          naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
          this->Frame->Navigate(naviname, this);
      }
      
  4. class BlankPage(赤)の設定です。
    1. BlankPage.xaml のソースコードを修正して、直接二個の Button と TextBox を貼り付けます。
      <Page
          x:Class="App1.BlankPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:App1"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d"
          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
      
          <Grid>
              <Button x:Name="button" Content="Blue" Margin="40,40,0,0" VerticalAlignment="Top" Click="Button1_Click"/>
              <Button x:Name="button1" Content="Main" Margin="160,40,0,0" VerticalAlignment="Top" Click="Button2_Click"/>
              <TextBox x:Name="textBox" HorizontalAlignment="Left"
                  Margin="70,100,0,0" Text="Red TextBox" VerticalAlignment="Top"
                  Height="80" Width="200" Background="#FFF50E0E"/>
      
          </Grid>
      </Page>
      
    2. BlankPage.xaml.h にボタンクリックのイベント関数を定義します。
      #pragma once
      #include "BlankPage.g.h"
      
      namespace App1
      {
          [Windows::Foundation::Metadata::WebHostHidden]
          public ref class BlankPage sealed
          {
          public:
              BlankPage();
      
          private:
              void Button1_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
              void Button2_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
          };
      }
      
    3. BlankPage.xaml.cpp にボタンクリックでナビゲートするイベント関数をコーディングします。
      Button1_Click() 関数が青のページにナビゲートする関数です。
      Button2_Click() 関数が MainPage に戻る関数です。
      #include "pch.h"
      #include "BlankPage.xaml.h"
      
      using namespace App1;
      using namespace Platform;
      using namespace Windows::Foundation;
      using namespace Windows::Foundation::Collections;
      using namespace Windows::UI::Xaml;
      using namespace Windows::UI::Xaml::Controls;
      using namespace Windows::UI::Xaml::Controls::Primitives;
      using namespace Windows::UI::Xaml::Data;
      using namespace Windows::UI::Xaml::Input;
      using namespace Windows::UI::Xaml::Media;
      using namespace Windows::UI::Xaml::Navigation;
      
      BlankPage::BlankPage()
      {
          InitializeComponent();
      }
      
      void App1::BlankPage::Button1_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
      {
          Windows::UI::Xaml::Interop::TypeName naviname;
          naviname.Name= ref new String(L"App1.BlankPage1");
          naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
          this->Frame->Navigate(naviname, this);
      }
      
      void App1::BlankPage::Button2_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
      {
          Windows::UI::Xaml::Interop::TypeName naviname;
          naviname.Name= ref new String(L"App1.MainPage");
          naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
          this->Frame->Navigate(naviname, this);
      }
      
  5. class BlankPage1(青)の設定です。
    1. BlankPage1.xaml のソースコードを修正して、直接 Button と TextBox を貼り付けます。
          <Grid>
              <Button x:Name="button" Content="Red" Margin="40,40,0,0" VerticalAlignment="Top" Click="Button_Click"/>
              <TextBox x:Name="textBox" HorizontalAlignment="Left"
                  Margin="70,100,0,0" Text="Blue TextBox" VerticalAlignment="Top"
                  Height="80" Width="200" Background="#FF0E0EF5"/>
          </Grid>
      
    2. BlankPage1.xaml.h にボタンクリックのイベント関数を定義します。
      #pragma once
      #include "BlankPage1.g.h"
      
      namespace App1
      {
          [Windows::Foundation::Metadata::WebHostHidden]
          public ref class BlankPage1 sealed
          {
          public:
              BlankPage1();
      
          private:
              void Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
          };
      }
      
    3. BlankPage1.xaml.cpp にボタンクリックで赤のページに戻る関数をコーディングします。
      L"App1.BlankPage" が赤のページです。
      void App1::BlankPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
      {
          Windows::UI::Xaml::Interop::TypeName naviname;
          naviname.Name= ref new String(L"App1.BlankPage");
          naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
          this->Frame->Navigate(naviname, this);
      }
      
  6. MainPage のボタンをクリックすると赤のページに遷移します。
    赤のページからボタンをクリックすると青のページと MainPage に遷移します。
    青のページからボタンをクリックすると赤のページに戻ります。
    「MainPage ⇔ 赤のページ ⇔ 青のページ」に Navigate(遷移)します。

超初心者のプログラム入門(C/C++)