C# の TableLayoutPanel を使った簡単なアプリの例を示して

 はい、承知いたしました。C# の TableLayoutPanel を使った簡単なアプリの例として、2 つのテキストボックスと 1 つのボタンを配置したシンプルな電卓アプリをご紹介します。

このアプリでは、2 つのテキストボックスに数値を入力し、ボタンをクリックするとそれらの合計がメッセージボックスに表示されます。

Visual Studio での操作

1. 新しいプロジェクトの作成: Visual Studio を起動し、「新しいプロジェクトの作成」を選択します。
2. プロジェクトテンプレートの選択: 「Windows フォーム アプリ (.NET Framework)」を選択し、「次へ」をクリックします。プロジェクト名と保存場所を設定し、「作成」をクリックします。
3. ツールの追加: フォームデザイナが開いたら、ツールボックスから以下のコントロールをフォームにドラッグ＆ドロップします。
   • TableLayoutPanel: レイアウトを管理するために使用します。
   • Label: 2 つ (それぞれ "数値 1:"、"数値 2:" と表示します)。
   • TextBox: 2 つ (数値を入力するために使用します)。
   • Button: 1 つ (計算を実行するために使用します)。
4. TableLayoutPanel の設定:
   • フォームに配置した TableLayoutPanel を選択します。
   • プロパティウィンドウで、Dock プロパティを Fill に設定します。これにより、TableLayoutPanel がフォーム全体に広がります。
   • ColumnCount プロパティを 2 に設定します。
   • RowCount プロパティを 3 に設定します。
   • 行と列のサイズを調整します。RowStyles と ColumnStyles プロパティを展開し、それぞれの SizeType を AutoSize または Percent などに設定します。例えば、ラベルの行は AutoSize、テキストボックスの行とボタンの行は Percent に設定し、適切な割合を指定できます。
5. コントロールの配置:
   • ラベル "数値 1:" を TableLayoutPanel の最初の行の最初のセルに配置します。
   • 最初のテキストボックスを最初の行の 2 番目のセルに配置します。
   • ラベル "数値 2:" を 2 番目の行の最初のセルに配置します。
   • 2 番目のテキストボックスを 2 番目の行の 2 番目のセルに配置します。
   • ボタンを 3 番目の行の 1 番目のセルに配置します。
   • ボタンの ColumnSpan プロパティを 2 に設定します。これにより、ボタンが 3 番目の行の 2 つのセルにまたがって表示されます。
   • 各コントロールの Anchor プロパティを Left, Right に設定すると、セル内で左右に伸縮するようになります。テキストボックスとボタンには特に有効です。
6. イベントハンドラの追加:
   • フォーム上のボタンをダブルクリックします。これにより、ボタンの Click イベントハンドラがコードエディタに自動的に作成されます。
7. コードの記述: Click イベントハンドラに以下の C# コードを追加します。

C#

private void button1_Click(object sender, EventArgs e)
{
    if (double.TryParse(textBox1.Text, out double num1) && double.TryParse(textBox2.Text, out double num2))
    {
        double sum = num1 + num2;
        MessageBox.Show($"合計: {sum}", "計算結果");
    }
    else
    {
        MessageBox.Show("有効な数値を入力してください。", "エラー");
    }
}

コードの説明:

• double.TryParse(): テキストボックスの文字列を double 型に安全に変換しようとします。変換に成功した場合は true を返し、変換された値を out パラメータ (num1、num2) に格納します。失敗した場合は false を返します。
• MessageBox.Show(): 結果やエラーメッセージをポップアップ表示します。

実行:

F5 キーを押すか、メニューから「デバッグ」→「デバッグ開始」を選択してアプリケーションを実行します。2 つのテキストボックスに数値を入力し、「計算」ボタンをクリックすると、合計がメッセージボックスに表示されます。

この例では、TableLayoutPanel を使用することで、コントロールが整然と配置され、フォームのサイズが変更されても適切なレイアウトが維持されることを確認できます。より複雑な UI を作成する場合でも、TableLayoutPanel は非常に強力なレイアウト管理ツールとなります。