2011年10月18日

C# インストーラーのような画面切り替え機能を作る

 .NET Frameworkのフォームに配置するコントロールには、インストーラーのような1画面ずつ切り替える機能を実現する方法は特別に用意されてはいません。そこで、このような機能が必要になったときは自分が画面切り替えを実装するわけですが、[次へ]ボタンを押すたびに、関係するすべてのコントロールの表示、非表示を切り替えるようにコードを書いてしまうと、非常に保守性が悪くなるのは明らかです。

 実は、TabControlやPanelを使えば、インストーラーのような画面切り替え機能を割と簡単に実現できます。今回はそのやり方を紹介します。

手順1フォームデザイナで、インストーラの1画面目に相当するパネルpanel1を作成します。
手順2同様に、2画面目に相当するpanel2を作成します。
手順3panel2のVisibleプロパティをfalseにします(2画面目は最初に表示しないため)。
手順4次へボタンに相当するnextButtonを作成します。
手順5nextButtonのTextプロパティを[次へ]に変更します。
手順6nextButtonをダブルクリックし、次のコードを書きます。
人気ブログランキング

private void nextButton_Click(object sender,EventArgs e)
{
  switch(step)
  {
    case 1:
      panel1.Visible=false;
      panel2.Visible=true;
      step=2;
      return;
    case 2:
      MessageBox.Show("インストール終了");
      DialogResult=DialogResult.OK;
      return;
  }
}

 この時点でフォームエディタ上では次の画面1ように表示されます。手順には書いていませんが、説明の便宜上、ここではpanel1とpanel2の背景色(BackColor)を設定し、パネルの名前を表示するラベルを左上に追加しました。
Installer00.png
画像1

 実行すると、画面2のように表示されます。[次へ]をクリックするとpanel1が消え、panel2が表示されます。もう一度[次へ]をクリックすると「インストール終了」というメッセージを表示してフォームが閉じられます
Installer01.png
画像2

 さて、切り替え自体はできるようになりました。しかし、各パネルは画面の半分程度にしか表示されていません。これでは切り替えを使っている意味がありません。

 これをフォーム全体に表示させるには簡単です。各パネルのDockプロパティをFillにするだけです。しかし、本当にフォーム全体に表示すると[次へ]ボタンと重なってしまいます。

 そこで、もうひとつパネルを用意し、そのパネルの中で切り替わるように作ります。
手順7パネルouterPanelを作ります。
手順8panel1とpanel2をouterPanelの中に入れます。
手順9コンストラクターを次のように書きます。

public Form1()
{
  InitializeComponent();
  panel1.Dock=DockStyle.Fill;
  panel2.Dock=DockStyle.Fill;
}

 手順9でコンストラクターのコードを書く代わりに、フォームデザイナ上でpanel1とpanel2のDockをFillに設定しても構いません。

 この時点で、フォームデザイナ上では画面3のように表示されます。起動すると画面4が表示されます。
Installer02.png
画面3

Installer03.png
画面4

 画面4で、ようやく目的の機能の大半が実現できたと思います。これには[戻る]ボタンがありませんし、アプリケーションによっては[完了]や[インストール]ボタンが必要になるでしょうが、[次へ]ボタンと同じ要領で作れば問題ないと思います。

 問題なのは開発画面、つまり画面3の方です。フォームデザイナ上では個々のパネルのパネルが狭いので、パネルの中を編集するときにパネルを大きくしたり、他のパネルを小さくしたりすることになります。6画面くらいのインストールになると、1つ1つの画面を編集するのが非常に面倒になります。

 これを解決するには、TabControlを使用します。
手順10outerPanelの中に新しいTabControlを追加し、tabControl1という名前にする。
手順11tabControl1のtabPage1内にpanel1を、tabPage2内にpanel2を移動する。
手順12panel1とpanel2とtabControl1のDockプロパティをFillにする。

 画面5は、手順11まで、画面6は手順12まで実行したときのフォームデザイナ上のフォームです。
Installer04.png
画面5

Installer05.png
画面6

 さらに、コンストラクターを次のように書き換えます。
public Form1()
{
  InitializeComponent();
  panel1.Parent=outerPanel;
  panel2.Parent=outerPanel;
  tabControl1.Visible=false;
}

 実行結果は先ほどの画面4と変わらないのですが、フォームデザイナ上ではタブ切り替えができるのでずいぶん便利になりました。
web拍手 by FC2
posted by 北条利彦 at 00:18 | Comment(1) | TrackBack(0) | C# | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
とても参考になりました。
GUIの設計が非常に楽になりますね。
ありがとうございます。
Posted by kii at 2015年02月12日 17:04
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。