【C#】画面遷移1(ユーザーコントロールを使う)

C#に慣れないため、このやり方が普通なのか????と思いながら、
画面を切り替える方法を備忘録としてまとめました。

Visual c# Formでは、「フォーム」「ユーザーコントロール」があります。
フォームはそれだけでWindowが作れる、
ユーザーコントロールは、
Formのように画面は作れるのですが、Form上に張り付けられる画面(コンポーネント)、
とかなりざっくりとですが捉えています。

「カスタムコントロール」というのもあるようなのですが、
公式曰く、

カスタム コントロールは、通常の Web フォームまたはユーザー コントロールと同様のサーバー上で実行し、オブジェクト モデルを公開し、HTML や XML などのマークアップ テキストをレンダリングするコンパイル済みコード コンポーネントです。

https://support.microsoft.com/ja-jp/help/893667/overview-of-user-controls-vs-custom-controls
既にコンパイルしたものを使うっぽいです。


やること

  • Formのボタンを押したら画面が切り替わる
  • 切り替わる部分の画面はユーザーコントロールを使う

例えば、サイトとかで上部の文字を押下したら、下部の画面が切り替わるようなイメージです。

完成図
ボタン押下で画面下部が切り替わる。
f:id:shinopikapi:20181031010522p:plain
f:id:shinopikapi:20181031010537p:plain

下準備
バージョンによって異なるかもしれませんが、以下の手順でユーザーコントロールを追加します。
プロジェクトを追加→ユーザーコントロールの追加
us_pika1.cs
us_pika2.cs
画面の切り替えがわかるように2つ作成
Formはプロジェクトを作成した時点で、Form1が出来ているのでこれを使用
f:id:shinopikapi:20181031010658p:plain
上2つのユーザーコントロールを作成後、一度ビルドを行うとツールボックスにコンポーネントとして2つ表示されます。


Formにユーザーコントロールを貼る
コンポーネントにユーザーコントロールが表示されるので、ドラックして貼ります。
貼ったときのサイズと、実際のユーザーコントロールのサイズを同じ大きさにしました。
サイズの変更は、us_pika1.cs、us_pika2.csのプロパティのsizeから変更できます。


Formにボタン設置
Formのデザイン画面に戻り、ツールボックスからbuttonを選択。
デザイン上に置いたボタンをダブルクリックすると、Formのソース上に以下のように追加されます。

        private void Button1_Click(object sender, EventArgs e)
        {

        }

        private void Button2_Click(object sender, EventArgs e)
        {

        }

ここにボタン押下でやりたいことを記載。

ユーザーコントロール切り替え表示

        private void Button1_Click(object sender, EventArgs e)
        {
            us_pika21.Visible = false;
            us_pika11.Visible = true;
        }

        private void Button2_Click(object sender, EventArgs e)
        {
            us_pika11.Visible = false;
            us_pika21.Visible = true;
        }

フィールド名は勝手に1がつくらしく、Visibleでボタン押下した方の画面を表示させます。


参考
手順 1: Windows フォーム アプリケーション プロジェクトの作成

2画面切り替えなら簡単ですね。
画面が大量だとどうなるのだろう……