WinFormsのPanelを使ってみよう｜コントロールをまとめるコンテナの基本

広告

フォームにLabelやTextBoxを並べていると、「名前の入力欄を、ラベルごと移動したい」「詳細設定をまとめて隠したい」と感じることがあります。そんなときに使えるのが、コンテナコントロールのPanel（パネル）です。

この記事では、Visual StudioのデザイナーでPanelを配置するところから、枠線、スクロール、画面サイズへの追従までを学びます。Windows Formsアプリのプロジェクトを開き、Form1のデザイナーを表示して進めてください。

1. Panelとは？ 部品をまとめる入れ物

Panelは、複数のコントロールを中に配置できる領域です。フォームが画面全体の入れ物なら、Panelはその中に置く小さな入れ物、と考えてみましょう。名前のLabelとTextBoxを同じPanelに入れると、入力欄のまとまりとして扱えます。

Panelが「親」、中のLabelやTextBoxが「子」です。Panelを移動すると子も一緒に移動し、Panelを非表示にすると子も見えなくなります。ただし、普通のPanelには部品を順番に自動整列する機能はありません。自動で横並びにするならFlowLayoutPanel、表のように配置するならTableLayoutPanelを使います。

2. フォームにPanelを配置する

  1. Form1.csをデザイナーで開きます。
  2. ツールボックスの「コンテナー」を開き、「Panel」をフォームへドラッグします。ツールボックスが見えないときは「表示」メニューから開きます。
  3. Panelの四隅や辺のハンドルをドラッグし、入力欄が収まる大きさにします。
  4. Panelを選択してF4キーでプロパティを開き、(Name)をinputPanelに変更します。

次の画像は、Visual Studio 2026でPanelを配置して選択した状態です。左のツールボックスで「コンテナー → Panel」、右下でpanel1のプロパティを確認できます。画像の名前は変更前のpanel1です。

Visual Studio 2026のツールボックスでコンテナーのPanelを選び、フォームに配置したpanel1と右下のプロパティを表示した画面
Visual Studio 2026：Panelを配置した状態。左がツールボックス、右下がPanelのプロパティ。

Panelの境界が分かりにくいときは、BorderStyleをFixedSingleにすると確認しやすくなります。デザイナー上の選択枠は、実行時に表示される枠線とは別です。

3. Panelの中にコントロールを入れる

ツールボックスからLabelとTextBoxを、Panelの内側へ直接ドラッグします。LabelのTextは「名前」、TextBoxの(Name)はnameTextBoxなど、役割の分かる名前にしましょう。

フォームに置いた部品の上へPanelを重ねても、親子関係が自動的に変わるわけではありません。既存の部品を移すときは、対象を切り取り、Panelを選択して貼り付ける方法が分かりやすいです。位置が変わることがあるので、貼り付け後に調整します。

配置できたかは、デザイナーでPanelを少し動かして確認します。中の部品も一緒に動けば、Panelに入っています。「表示 → その他のウィンドウ → ドキュメント アウトライン」でも、inputPanelの下にLabelやTextBoxがあるか確認できます。コードではinputPanel.Controls.Add(nameTextBox);がPanelへ追加する書き方です。

4. まとめて移動・表示／非表示にする

入力欄が10個あっても、Panelを操作すればひとまとまりで扱えます。次は、フォームが表示されているときにボタンのClickイベントなどで実行する例です。

// Panelごと右へ20移動する（DockはNone）
inputPanel.Left += 20;

// 子コントロールもまとめて見えなくなる
inputPanel.Visible = false;

// 再び表示する
inputPanel.Visible = true;

上の3つは操作例です。falseとtrueを続けて実行すると、最後は表示された状態になります。非表示は削除ではないので、TextBoxに入力した文字は保持されます。子を個別にVisible = falseにした場合、その子はPanelを再表示しても非表示のままです。表示切り替え用のボタンは、隠すPanelの外側に置きましょう。

5. BorderStyleで枠線を付ける

BorderStyleには、枠線なしのNone、細い線のFixedSingle、立体的な枠のFixed3Dがあります。最初はFixedSingleにして、領域の境界を見えるようにすると配置しやすくなります。Panel自体にはGroupBoxのような見出し文字は表示されません。見出しが必要ならLabelを置くか、GroupBoxを検討します。

inputPanel.BorderStyle = BorderStyle.FixedSingle;

6. AutoScrollで、はみ出す内容をスクロールする

AutoScrollをtrueにすると、内容が表示領域に収まらない場合にスクロールバーが現れます。trueにするだけで、常にスクロールバーが出るわけではありません。

inputPanel.AutoScroll = true;
// 表示領域より大きい作業領域を指定する例
inputPanel.AutoScrollMinSize = new Size(0, 400);

高さ200程度のPanelで試すと、下へスクロールできることを確認できます。AutoScrollは内容を縮小したり折り返したりする機能ではありません。また、子コントロールを右辺や下辺にAnchorすると自動スクロールが期待どおり働かない場合があります。最初の練習では、子のAnchorをTop, Leftのままにして試してください。

7. DockとAnchorの基本

どちらも親のサイズが変わったときの配置を決めるプロパティです。フォーム上のPanelならフォームが親、Panel内のTextBoxならPanelが親になります。

Dock：親の端や残りの領域に合わせる

Top・Bottom・Left・Rightは親の対応する端に付け、Fillは残りの領域を埋めます。Noneはドッキングなしです。例えば、操作欄を上に固定するならTop、メイン領域を広げるならFillが使えます。

inputPanel.Dock = DockStyle.Fill;

Dockを設定すると位置やサイズがレイアウトによって決まるため、Leftを書き換えて自由に移動する練習とは分けて試します。複数のDock付きコントロールがあると、前後関係（Zオーダー）も配置に影響します。

Anchor：親の端からの距離を保つ

既定値はTop, Leftです。Top, Left, Rightにすると左右の距離を保つため、親が横に広がるとコントロールの幅も広がります。右下に置いたボタンならBottom, Rightが向いています。同じコントロールではDockとAnchorを併用する前提にせず、目的に応じてどちらかを選びます。

inputPanel.Dock = DockStyle.None;
inputPanel.Anchor = AnchorStyles.Top
                  | AnchorStyles.Left
                  | AnchorStyles.Right;

8. C#サンプル：入力欄をまとめて隠してみよう

次の例は、デザイナーで配置したPanelとは別の練習です。空のForm1を用意し、Form1.csの既存のコンストラクター（public Form1()）を以下に置き換えてください。コンストラクターを2つ作らず、namespaceとpartial class Form1の宣言はそのまま残します。ファイル先頭にusing System.Drawing;とusing System.Windows.Forms;がなければ追加してください。Form1.Designer.csは編集しません。

public Form1()
{
    InitializeComponent();
    Text = "Panelの練習";
    ClientSize = new Size(420, 260);

    var inputPanel = new Panel
    {
        Location = new Point(20, 20),
        Size = new Size(360, 140),
        BorderStyle = BorderStyle.FixedSingle
    };

    var nameLabel = new Label
    {
        Text = "名前",
        Location = new Point(15, 20),
        AutoSize = true
    };

    var nameTextBox = new TextBox
    {
        Location = new Point(80, 16),
        Width = 240
    };

    // この2つの親はPanel
    inputPanel.Controls.Add(nameLabel);
    inputPanel.Controls.Add(nameTextBox);
    Controls.Add(inputPanel);

    var toggleButton = new Button
    {
        Text = "入力欄を表示／非表示",
        Location = new Point(20, 180),
        Size = new Size(200, 35)
    };

    toggleButton.Click += (sender, e) =>
    {
        inputPanel.Visible = !inputPanel.Visible;
    };

    // ボタンの親はフォーム。Panelの外に置く
    Controls.Add(toggleButton);
}

F5キーで実行して名前を入力し、ボタンを押します。LabelとTextBoxが同時に消え、もう一度押すと入力内容を保ったまま戻ります。!は「反対の値にする」という意味なので、Visibleのtrueとfalseがクリックするたびに切り替わります。Clickへの処理の登録もコードで行っているため、デザイナーでイベントを追加する必要はありません。

nameTextBoxのLocationはPanelの内側を基準にした位置です。一方、inputPanelとtoggleButtonのLocationはフォームの内側が基準です。座標の基準は、常にそのコントロールの親に注目して読みましょう。

9. 初心者がつまずきやすい点

  • Panelだけ動いて入力欄が残る：入力欄がフォームの子になっている可能性があります。ドキュメント アウトラインで親子関係を確認します。
  • 実行すると枠が消える：選択ハンドルは編集用です。実行時の枠線はBorderStyleで設定します。
  • 隠したら戻せない：切り替えボタンまでPanelの中に入っていないか確認します。
  • スクロールバーが出ない：内容が本当に表示領域を超えているか、子のAnchorにRightやBottomを設定していないか確認します。
  • 位置を変えても戻る：Dockなどのレイアウト設定を確認します。自由な移動を試す間はDockをNoneにします。
  • inputPanelが見つからないというエラー：デザイナーの(Name)とコードの名前を合わせます。サンプルのinputPanelはコンストラクター内のローカル変数なので、別のメソッドからそのまま参照できません。

10. まずは「中に入っているか」を確かめよう

最初はPanelにLabelとTextBoxを入れ、Panelを動かす・隠すという2つの操作を試してみてください。親子関係が分かったら、BorderStyleで見た目を整え、AutoScrollやDock／Anchorで画面に合わせた配置へ進めましょう。

関連記事：C# WinForms 入門シリーズでは、Button・TextBox・Labelなどの基本コントロールも順番に学べます。

参考資料

訪問数 7 回, 今日の訪問数 7回

広告

C#

Posted by hidepon