自己紹介アプリにSecond Page（画面遷移）を表示さす方法をまとめています。

ファイル --> 新規作成  --> プロジェクト(P)...  --> Cross-Platform --> Xamarin-Forms で作成

Top画面のHomePageの作成

プロジェクト XFContenPageを右クリック --> 追加(D) --> 新しい項目(W)...をクリック

Cross-Platform --> code --> Forms Xaml Page を選択 名前:HomePage 追加

HomePage.xamlを書き換える。

HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XFPart2LBE04.HomePage"
             BackgroundColor="Silver">
  
  <!-- Padding 内側の余白 -->
  <StackLayout BackgroundColor="Silver"
               Padding="60"
               VerticalOptions="Center">

    <!-- 名前入力欄 -->
    <!-- Grid 表のようにレイアウトを配置できるレイアウト -->
    <Grid Padding="0,0,0,50">
      <Entry x:Name="MainEntry"
             BackgroundColor="Gray" />
    </Grid>

    <!-- 自己紹介ボタン -->
    <Button Clicked="Button_OnClicked"
            Text="自己紹介する"
            BackgroundColor="Green"
            TextColor="White"/>

    <!-- 自己紹介表示ラベル -->
    <Label x:Name="MainLabel"
           TextColor="White"
            FontSize="40"/>

    <!-- ナビゲーションボタン --> 
    <Button Text="Navigate to Second Page"
            Clicked="NavigateButton_OnClicked"
            BackgroundColor="Blue"></Button>

  </StackLayout>

</ContentPage>

HomePage.xaml.csを書き換える。

HomePage.xaml.csにボタンクリック記述を追加する。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace XFPart2LBE04
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
        }

        // 自己紹介ボタン
        private void Button_OnClicked(object sender, EventArgs e)
        {
            // 名前入力
            string text = MainEntry.Text;

            // 自己紹介テキスト
            MainLabel.Text = "私は" + text + "です。";
        }

        // ナビゲートボタン
        private async void NavigateButton_OnClicked(Object sender, EventArgs e)
        {
            await Navigation.PushAsync(new Page1());
        }
    }
}

画面遷移先のPage1.xamlの作成

プロジェクト XFContenPageを右クリック --> 追加(D) --> 新しい項目(W)...をクリック

Cross-Platform --> Forms Xaml Page を選択し名前:Page1.csを追加

Page1.xaml Labl Text の削除

Page1.xaml Content Page の Title = " Second Page" の追加

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XFPart2LBE04.Page1"
             Title="Second Page">
  
</ContentPage>

App.cs MainPageの書き換え

App.cs

this.MainPage = new HomePage(); １行のみ

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Xamarin.Forms;

namespace XFPart2LBE04

{

    public class App : Application

    {

        public App()

        {

            // The root page of your application

            MainPage = new NavigationPage(new HomePage());

        }

        protected override void OnStart()

        {

            // Handle when your app starts

        }

        protected override void OnSleep()

        {

            // Handle when your app sleeps

        }

        protected override void OnResume()

        {

            // Handle when your app resumes

        }

    }

}

ビルド

Android,Windows Phone 「Navigate to Second Page」ボタンをクリック

「Second Page」が表示されます。

▫️参考ページ

Xamarin.Forms を XAML を使って書くために

Xamarin Forms with Visual Studio Part 4 [Navigation]

XAMLを使用してパネルを定義する～1.Canvas～

XAMLを使用してパネルを定義する～2.StackPanel～

XAMLを使用してパネルを定義する～3.Grid～

目　次