Windows Forms (WinForms) でのアプリ開発の基礎を、シンプルなタイマーの作成を通して学びます。
今回は、前回作成したポモドーロタイマーアプリにコンテナコントロールを導入し、より整理された画面レイアウトを実現する方法を学びます。
コンテナコントロールの基本として以下の内容を学びます。
- コンテナコントロール（例：FlowLayoutPanel、GroupBox）
- レイアウト関連プロパティ（例：Anchor、Dock、Margin）
- タイマーアプリを題材としてコンテナコントロールを実践活用
以下の方に役立つ内容となっています。
- WinFormsで画面レイアウトを整理したい方
- レスポンシブデザインのWindowsアプリを作りたい方
- コンテナコントロールの基本的な使い方を学びたい方
WinFormsの基本（フォーム・コントロール・イベントなど）については、前回の記事を参考にしてください。
コンテナコントロールとレイアウト関連プロパティを使いこなすと、複雑な画面レイアウトも簡単に作れますよ！
ウィンドウサイズにあわせて柔軟に対応可能なレスポンシブデザインにすることも可能になります。
演習のソースコード一式はGitHubで公開しています。
YouTube動画は以下です。
講義：コンテナコントロールとレイアウト関連プロパティ
コンテナコントロール
コンテナコントロールとは？
コンテナコントロールは、他のコントロールを格納してグループ化するための特殊なコントロールです。
コンテナを使うと、以下のようなメリットがあります。
- 関連するコントロールを論理的にグループ化できる
- グループ単位でまとめて表示/非表示や有効/無効を切り替えられる
- 複雑な画面レイアウトを整理して構築できる
コンテナは単なる見た目の整理だけでなく、アプリの構造や機能の理解を助ける設計ツールとしても機能します。
主なコンテナコントロール
WinFormsには、用途に応じて使い分けられる様々なコンテナが用意されています。Visual Studioでツールボックスの「コンテナ」欄にあります。
以下の6つがあります。
- FlowLayoutPanel：コントロールを左から右へ、上から下へと自動的に配置するコンテナ（スペースがなくなると自動的に折り返す）
- GroupBox：タイトル付きの枠で囲まれたコンテナ
- Panel：任意のコントロールを配置できる汎用的なコンテナ
- SplitContainer：パネルを2分割し、分割線をドラッグで移動できるコンテナ
- TableLayoutPanel：テーブル（格子）状にコントロールを配置するコンテナ
- TabControl：複数のタブページを切り替えて表示できるコンテナ
以下はいくつかの例です。
これら組み合わせて入れ子にして使うこともできます。
それによって様々な画面レイアウトを柔軟に作ることができます！
レイアウト関連プロパティ
コンテナコントロールとあわせて「レイアウト関連プロパティ」も知っておくと便利です。
コンテナコントロールはレイアウト関連プロパティと組み合わせて使う場面が多いです。
主なレイアウト関連プロパティは以下です。
- Margin：コントロールの「外側の余白」を調整。コントロールと他のコントロールとの間隔を設定する。
- Padding：コンテナ内の「内側の余白」を調整。コンテナの境界と内部のコントロールとの間隔を設定します。
- Anchor：コントロールを親コンテナの特定の辺に固定し、フォームのサイズ変更に追従させる。
- Dock：コントロールをコンテナの特定の位置（上下左右、または全面）に固定。
- AutoSize：コントロールの内容に応じてサイズを自動調整する。
特に「Dock・Anchor・Margin」あたりは使うことが多いかと思います。これら3つの例をそれぞれみてみましょう。
Dockの例：ステータスバーを画面の下側に配置
Anchorの例：ダイアログのOK/キャンセルボタンを画面右下に配置
Marginの例：FlowLayoutPanel内のボタン配置
それぞれのコンテナコントロール・レイアウト関連プロパティについてはこちらのMicrosoft公式記事も参考にしてください。
演習：タイマーアプリのUIレイアウトを整理
今回作るアプリと作成手順
前回作成したポモドーロタイマーのUIレイアウトをレスポンシブにしてみましょう。以下の機能を追加します。（前回のコードはこちらにあります）
- フォームサイズで横に並べた表示・縦に並べた表示を切り替える
- リセット可能にする（リセットボタンを追加する）
現状は以下のようになっています。
これを今回以下のようにします。
以下の手順で作ります。
- 手順1：コントロールを配置して「見た目」を作成
- 手順2：イベントで「動作」を作成
コンテナコントロールとレイアウト関連プロパティを活用してつくってみましょう！
手順1：コントロールを配置して「見た目」を作成
コントロール配置と親子関係の設定
元のコードで、コントロールは以下の配置になっています。
・フォーム
・時間表示ラベル(Label)
・スタート/ストップボタン(Button)これを以下のような配置へと修正します。
（★が新規追加コントロールです）
・フォーム
・★ポモドーロタイマーのグループ（GroupBox）
・★レイアウトパネル(FlowLayoutPanel)
・時間表示ラベル(Label)
・スタート/ストップボタン(Button)
・★リセットボタンまず以下のように先にGroupBoxをフォームへ配置し、次にGroupBoxの内部へFlowLayoutPanelを配置しましょう。
これで、GroupBoxとFlowLayoutの間に親子を関係ができます。
一時的にフォームサイズを大きくしておくとコントロール配置の作業はしやすいかもしれませんね。
次にラベルとボタンをドラッグ＆ドロップでFlowLayoutPanel内部へ移動させましょう。また、リセット用のボタンも新たにFlowLayoutPanel内部へ追加します。
これで必要なコントロール設置と親子関係の設定ができました。
コントロールのプロパティを設定
以下のように各コントロールのプロパティを設定しましょう。
- GroupBox
- Dock：Fill
- Text：”ポモドーロタイマー”
- FlowLayoutPanel
- Dock：Fill
- FlowDirection：TopDown
- Padding：Allを10（全ての値を10）
- 新しく追加したButton
- Name：buttonReset
- Text：”リセット”
Dockプロパティでは、以下のようにFill（画面全体にくっつける）を選びます。
FlowLayoutPanelのFlowDirectionでコンテナ内のコントール配置方法を指定できます。TopDownは「上から下へ並べる」という意味です。
最後にボタンやフォームのサイズについて微調整すると以下のようになります。
FlowLayoutPanel内のコントロールは自動で整列するんだね！
手順2：イベントで「動作」を作成
リセットボタン(buttonReset)のClickイベントを作成しましょう。プロパティウィンドウ＞イベントタブでClickの欄をダブルクリックするとイベントが作成されます。
以下のように記述しましょう。
private void buttonReset_Click(object sender, EventArgs e)
{
timer1.Stop();
_remainingSeconds = WorkMinutes * SecondsPerMinute;
labelTime.Text = $"{WorkMinutes:00}:00";
buttonStartStop.Text = "スタート";
_isRunning = false;
}タイマーアプリの状態を完全に初期状態に戻す処理を行います。
具体的には、動作中のタイマーを停止し、カウントダウン時間を25分に戻すとともに、ボタンの表示とアプリの状態フラグを初期状態に設定します。
コードにやや重複がある（例：”スタート”といった定数値の重複）ので、もう少し改善できそうですが、ひとまずこれで完成です！
アプリを実行
アプリをデバッグ実行すると以下のようになります。
フォームサイズを変えると並び方が変わることやリセットボタンの動作など確認してみましょう。
レスポンシブデザインのWindowsアプリができたね！
UI関連プロパティを触ってみたり、FlowLayoutPanel以外のコンテナを使ってみたりすると理解がより深まります。
ぜひ、このタイマーをベースとして、UIレイアウトについていろいろと試してみてくださいね。
まとめ
本記事では、WinFormsアプリ開発におけるコンテナコントロールの活用とレイアウト設計について学びました。
主なコンテナとしてFlowLayoutPanel、GroupBox、Panel、SplitContainer、TableLayoutPanel、TabControlがあります。
レイアウト関連プロパティとしてはMargin、Padding、Anchor、Dock、AutoSizeなどがあります。
今回、1例ではありますがタイマーアプリを題材として実践でどのように使うかを簡単に学びました。
今回、まずはWinFormsのUIデザインをどう行っていくかの雰囲気をつかめればOKってことだね！
「コンテナ」と「レイアウト関連プロパティ」を組み合わせることで、レスポンシブデザインなど様々なUIデザインが可能になります。
次回は、複数フォームの連携方法について紹介する予定です。複数のフォームを扱えるようになると、メイン画面とは別に設定画面などを作れるようになります。
基礎的な内容が終わったら実際にありそうなWinFormsアプリ開発を題材として、他のコンテナの使い方なども紹介します。
引き続き、一緒にC# WinFormsアプリ開発を学んでいきましょう！
