List Frame

Frame を設定して「赤のページ, 青のページ, 緑のページ」に Navigate(遷移)します。

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

プログラムの説明

  1. Frame はナビゲーションをサポートするコンテンツコントロールです。
    Frame を設定して「赤のページ, 青のページ, 緑のページ」に Navigate(遷移)してみましょう。
    Frame を使うと Navigate 先のページが Frame 内に表示されます。
    List View から別のページをクリックすると切り替わるので、リンクボタンは必要ありません。
  2. Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
    今回はエディッタで作成した「赤のページ, 青のページ, 緑のページ」をプロジェクトに追加します。
    各ページは同じ要領なので、赤のページのソースコードを掲載します。
    1. PageRed.xaml に TextBox を貼り付けます。
      List View のクリックで切り替わるので 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>
              <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 です。
      #pragma once
      
      #include "PageRed.g.h"
      
      namespace App1
      {
          [Windows::Foundation::Metadata::WebHostHidden]
          public ref class PageRed sealed
          {
          public:
              PageRed();
          };
      }
      
    3. PageRed.xaml.cpp です。
      #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();
      }
      
  3. 「青のページ, 緑のページ」も同じ要領なので、エディッタでタイプして下さい。
    プロジェクトのフォルダーに格納して既存の項目から追加します。
    ファイル名 説明
    PageRed.xaml 赤のページのデザインファイル
    PageRed.xaml.h 赤のページのヘッダーファイル
    PageRed.xaml.cpp 赤のページのプログラムファイル
    PageBlue.xaml 青のページのデザインファイル
    PageBlue.xaml.h 青のページのヘッダーファイル
    PageBlue.xaml.cpp 青のページのプログラムファイル
    PageGreen.xaml 緑のページのデザインファイル
    PageGreen.xaml.h 緑のページのヘッダーファイル
    PageGreen.xaml.cpp 緑のページのプログラムファイル
  4. MainPage.xaml に ListView と Frame を貼り付けます。
    <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"/>
            <Frame x:Name="frame" Content="Frame" HorizontalAlignment="Left" Margin="0,170,0,0"
                VerticalAlignment="Top" Height="420" Width="600"/>
        </Grid>
    
  5. MainPage.xaml.h に "PageChange" 関数を定義します。
        public:
            MainPage();
    
        private:
            void PageChange(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e);
        };
    
  6. MainPage.xaml.cpp の Constructor で List View にアイテムを登録して、Navigate 先のページを配列にします。
    Platform::Array<Windows::UI::Xaml::Interop::TypeName>^ naviname = ref new Array<Windows::UI::Xaml::Interop::TypeName>(3);
    
    MainPage::MainPage()
    {
        InitializeComponent();
        listView->Items->Append("(1) Page Red");
        listView->Items->Append("(2) Page Blue");
        listView->Items->Append("(3) Page Green");
        naviname[0].Name = ref new String(L"App1.PageRed");
        naviname[0].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
        naviname[1].Name = ref new String(L"App1.PageBlue");
        naviname[1].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
        naviname[2].Name = ref new String(L"App1.PageGreen");
        naviname[2].Kind = Windows::UI::Xaml::Interop::TypeKind::Custom;
    }
    
  7. PageChange() 関数で各ページに Navigate します。
    Scenario_No は List View で選択されたアイテムのインデックス(0~2)です。
    "frame" は MainPage.xaml に貼り付けた Frame に付けられた名前(x:Name="frame")です。
    void App1::MainPage::PageChange(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
    {
        int Scenario_No = listView->SelectedIndex;
        frame->Navigate(naviname[Scenario_No], this);
    }
    
  8. プログラムを実行すると List View にアイテムが表示されます。
    アイテムをクリックすると Frame にナビゲート先のページが表示されます。
    別のアイテムをクリックすると Frame に表示されているページが変わります。

[Next Chapter ↓] List App

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