【C#】Androidアプリの画面遷移

前回書いたC#のandroidアプリの作成方法の続き（補足）として、今回は一つのアプリ内で別のページを表示する方法について書いていこうと思います。
基本的には、デフォルトで生成されたコードを読み解けばわかる内容ではあるので、読まなくてもわかるという方はスルーしてください(笑)
下記が前回書いた記事ですので、今回の内容がわからない、もしくは単純に興味があるという方は見ていただけるとありがたいです。
https://qiita.com/NagaJun/items/87f126249028fa2b23a0

##実装
前回の記事で書いた内容（プロジェクト作成時に自動で作成されるコード）を前提として、コードを書いていきます。
前提としては、`/Resource/Layout/`フォルダー下にページデザイン用のファイルである`content_main.xml`と`activity_main.xml`があり、動きを制御するコードとして`MainActivity.cs`があります。
今回のサンプルを作成するために以上の三つのファイルを修正します。
修正内容は以下の通りです。

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffe0">

    <TextView
        android:text="activity_main_page"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/textView1" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="change view content_menu"
        android:id="@+id/btn_show_content_main_page"
        android:layout_marginTop="@dimen/design_bottom_navigation_active_item_max_width"
        >
    </Button>
</android.support.design.widget.CoordinatorLayout>

```

```content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffd700"
    >

    <TextView
        android:text="content_main"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/textView1"
        android:layout_marginBottom="35.5dp"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="change view activity"
        android:id="@+id/btn_show_activity_main_page"
        android:layout_marginTop="@dimen/design_bottom_navigation_active_item_max_width"
        >
    </Button>
</RelativeLayout>
```

```MainActivity.cs
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    public class MainActivity : AppCompatActivity
    {
        /// <summary>content_mainページ表示用ボタン</summary>
        private Button BtnShowContent { get; set; }
        /// <summary>activity_mainページ表示用ボタン</summary>
        private Button BtnShowActivity { get; set; }


        /// <summary>アプリ起動時</summary>
        /// <param name="savedInstanceState"></param>
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);

            // 初期ページを表示
            SetContentView(Resource.Layout.activity_main);

            // contentページ表示ボタン
            BtnShowContent = FindViewById<Button>(Resource.Id.btn_show_content_main_page);
            BtnShowContent.Click += BtnShowContent_Click;
        }

        /// <summary>contentページ表示イベント</summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnShowContent_Click(object sender, EventArgs e)
        {
            SetContentView(Resource.Layout.content_main);

            // activityページ表示ボタン
            BtnShowActivity = FindViewById<Button>(Resource.Id.btn_show_activity_main_page);
            BtnShowActivity.Click += BtnShowActivity_Click;
        }

        /// <summary>activityページ表示イベント</summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void BtnShowActivity_Click(object sender, EventArgs e)
        {
            SetContentView(Resource.Layout.activity_main);

            // contentページ表示ボタン
            BtnShowContent = FindViewById<Button>(Resource.Id.btn_show_content_main_page);
            BtnShowContent.Click += BtnShowContent_Click;
        }
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
```

不要なコードは全て省いてあるため、必要に応じて調整してください。
`activity_main.xml`と`content_main.xml`に関しては、今回サンプルとして記述した内容をそのままコピペしてもらえば大丈夫かと思います。
元の`activity_main.xml`には`<include Layout=~>`という記述があったかと思いますが、その記述で`content_main.xml`の内容を読み込んでいるみたいなので、その記述は消してあります。（画面遷移を見たいので、ページを入れ子で読み込ませてあるとわかりにくいため）
今回、`MainActivity.cs`に対して記述した内容は、各ページのボタンクリック時に`SetContentView()`で別ページを表示するようにしてあります。
ここで注意点ですが、`FindViewById()`で取得できるオブジェクト（今回の場合だとButton）は処理時に画面上に存在しているものに限られるため、`OnCreate()`メソッド内で初期画面に表示されない`btn_show_activity_main_page`ボタンを取得することはできません。
また、画面が切り替わると取得済みのボタンのコントロールが失われるため、ページを切り替えるたびにオブジェクトの取得とイベントの設定を行う必要があります。（設定したはずのイベントも失われます）

##動作確認
上記の修正を加えたら、前回同様の手段でデバッグを行います。
挙動は単純で下記画像の様な画面が立ち上がり、`CHENGE VIEW~`ボタンを押すたびに画面が切り替わります。
背景色と文字列が変わっているだけなので、一見、プロパティをいじっているだけにも見えますが（笑）
もっとわかりやすい変化を見たいという方は.xmlファイルを修正してみるとよいかと思います。
<img width="200" alt="2021_05_09_21.17.23.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/e8c32da9-7919-d0d2-2c70-2c10d60c95cf.jpeg">　<img width="200" alt="2021_05_09_21.17.26.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/f8fd8215-40ca-9141-4874-d2113c795bcc.jpeg">


##終わりに
今回調べていて知ったのですが、.xmlファイルに記述する内容に関しては、android studioでアプリを作成する場合と基本的に同じなんですね（当然といえば当然ですが）
C#のandroidアプリより、android studioの情報の方が、ネット上の先人の知恵が多いので助かります(笑)