List Chenge

List View のクリックで「赤のページ, 青のページ, 緑のページ」に Navigate(遷移)します。

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

プログラムの説明

  1. 現在のページから次のページに移ることを Navigate(遷移 せんい)と言います。
    List View のクリックで「赤のページ, 青のページ, 緑のページ」に Navigate(遷移)してみましょう。
  2. Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
    今回はエディッタで作成した「赤のページ, 青のページ, 緑のページ」をプロジェクトに追加します。
    各ページは同じ要領なので、赤のページのソースコードを掲載します。
  3. class PageRed(赤のページ)のソースコードです。
    1. PageRed.xaml に Button と TextBox を貼り付けます。
      "Button_Click" で MainPage に戻ります。
      TextBox の色を Background="#FFF50E0E" で赤色に設定しています。
      青色は Background="#FF0E0EF5" に、緑色は Background="#FF0EF50E" になります。
      <Page
          x:Class="App1.PageRed"
          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="MainPage" Margin="40,40,0,0" VerticalAlignment="Top" Click="Button_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. PageRed.xaml.h で "Button_Click" 関数を定義します。
      #pragma once
      
      #include "PageRed.g.h"
      
      namespace App1
      {
          [Windows::Foundation::Metadata::WebHostHidden]
          public ref class PageRed sealed
          {
          public:
              PageRed();
          private:
              void Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
      
          };
      }
      
    3. PageRed.xaml.cpp にボタンクリックで MainPage に戻る関数をコーディングします。
      #include "pch.h"
      #include "PageRed.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;
      
      PageRed::PageRed()
      {
          InitializeComponent();
      }
      
      void App1::PageRed::Button_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);
      }
      
  4. 「青のページ, 緑のページ」も同じ要領なので、エディッタでタイプして下さい。
    プロジェクトのフォルダーに格納して既存の項目から追加します。
    ファイル名 説明
    PageRed.xaml 赤のページのデザインファイル
    PageRed.xaml.h 赤のページのヘッダーファイル
    PageRed.xaml.cpp 赤のページのプログラムファイル
    PageBlue.xaml 青のページのデザインファイル
    PageBlue.xaml.h 青のページのヘッダーファイル
    PageBlue.xaml.cpp 青のページのプログラムファイル
    PageGreen.xaml 緑のページのデザインファイル
    PageGreen.xaml.h 緑のページのヘッダーファイル
    PageGreen.xaml.cpp 緑のページのプログラムファイル
  5. MainPage.xaml に ListView を貼り付けます。
    <Grid> と </Grid> の間に追加して下さい。
    ListView をクリックすると "PageChange" 関数が呼ばれます。
        <Grid>
            <ListView x:Name="listView" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"
                 Height="240" Width="200" SelectionChanged="PageChange" IsItemClickEnabled="True"/>
        </Grid>
    
  6. MainPage.xaml.h に "PageChange" 関数を定義します。
        public:
            MainPage();
    
        private:
            void PageChange(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e);
        };
    
  7. MainPage.xaml.cpp の Constructor で List View にアイテムを登録します。
    MainPage::MainPage()
    {
        InitializeComponent();
        listView->Items->Append("(1) Page Red");
        listView->Items->Append("(2) Page Blue");
        listView->Items->Append("(3) Page Green");
    }
    
  8. "PageChange" 関数で各ページに Navigate します。
    Scenario_No は List View で選択されたアイテムのインデックス(0~2)です。
    void App1::MainPage::PageChange(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
    {
        int Scenario_No = listView->SelectedIndex;
        Windows::UI::Xaml::Interop::TypeName naviname;
    
        switch(Scenario_No)
        {   case 0:
                naviname.Name= ref new String(L"App1.PageRed");
                naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
                this->Frame->Navigate(naviname, this);
                break;
            case 1:
                naviname.Name= ref new String(L"App1.PageBlue");
                naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
                this->Frame->Navigate(naviname, this);
                break;
            case 2:
                naviname.Name= ref new String(L"App1.PageGreen");
                naviname.Kind= Windows::UI::Xaml::Interop::TypeKind::Custom;
                this->Frame->Navigate(naviname, this);
                break;
        }   
    }
    
  9. プログラムを実行すると List View にアイテムが表示されます。
    アイテムをクリックすると各ページにナビゲートします。
    それぞれのページからボタンをクリックすると MainPage に戻ります。

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