.NET開発者のためのブログメディア
C#を使ったトグルボタンの作成方法について詳しく解説！
2020年08月18日
- SE
- トルグボタンがうまく作成できず困っています。
- PM
- では実際のソースコードを見ながらチェックしていきましょう。
目次
C#のトグルボタンについて
今回は、C#のトグルボタンについてご説明します。トグルボタンとは、クリックするとへこみ、もう一度クリックすると元に戻るボタンのことです。
C#では、CheckBoxやRadioButton、ToolStripButtonをトグルボタンにすることができます。C#のトグルボタンに興味のある方はぜひご覧ください。
トグルボタン（CheckBox）
C#では、CheckBoxコントロールのAppearanceプロパティをButtonにすることで、トグルボタンにできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { CheckBox checkBox; public Form1() { this.Load += new EventHandler(Form1_Load); } private void Form1_Load(object sender, EventArgs e) { checkBox = new CheckBox(); checkBox.Location = new Point(10, 10); checkBox.Text = "checkBox"; checkBox.TextAlign = ContentAlignment.MiddleCenter; // トグルボタンにする checkBox.Appearance = Appearance.Button; this.Controls.Add(checkBox); } } } |
“checkBox”ボタンが表示され、トグルボタンになっていることが分かります。このように、C#ではCheckBoxコントロールのAppearanceプロパティをButtonにすることで、トグルボタンにできます。
CheckBoxイベント
トグルボタンになっていることが分かりづらい可能性があるので、イベントハンドラを利用して分かりやすくしてみます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { CheckBox checkBox; public Form1() { this.Load += new EventHandler(Form1_Load); } private void Form1_Load(object sender, EventArgs e) { checkBox = new CheckBox(); checkBox.Location = new Point(10, 10); checkBox.Text = "checkBox off"; checkBox.TextAlign = ContentAlignment.MiddleCenter; // トグルボタンにする checkBox.Appearance = Appearance.Button; checkBox.CheckedChanged += new EventHandler(CheckBox_CheckedChanged); this.Controls.Add(checkBox); } private void CheckBox_CheckedChanged(object sender, EventArgs e) { if (checkBox.Checked) { // ボタンの背景色と文字列を変更 checkBox.BackColor = Color.Blue; checkBox.Text = "checkBox on"; } else { // ボタンの背景色と文字列を変更 checkBox.BackColor = Color.Red; checkBox.Text = "checkBox off"; } } } } |
ボタンの背景色と文字列が変更されることが分かります。
トグルボタン（RadioButton）
C#では、RadioButtonコントロールのAppearanceプロパティをButtonにすることで、トグルボタンにできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { GroupBox groupBox; RadioButton radioButton1, radioButton2; public Form1() { this.Load += new EventHandler(Form1_Load); } private void Form1_Load(object sender, EventArgs e) { radioButton1 = new RadioButton(); radioButton1.Location = new Point(20, 20); radioButton1.Text = "Button1"; radioButton1.TextAlign = ContentAlignment.MiddleCenter; // トグルボタンにする radioButton1.Appearance = Appearance.Button; radioButton2 = new RadioButton(); radioButton2.Location = new Point(20, 50); radioButton2.Text = "Button2"; radioButton2.TextAlign = ContentAlignment.MiddleCenter; // トグルボタンにする radioButton2.Appearance = Appearance.Button; groupBox = new GroupBox(); groupBox.Location = new Point(10, 10); groupBox.Text = "radioButton"; groupBox.Controls.Add(radioButton1); groupBox.Controls.Add(radioButton2); this.Controls.Add(groupBox); } } } |
ラジオボタンをグループ化し、トグルボタンとしています。
このように、C#ではRadioButtonコントロールのAppearanceプロパティをButtonにすることで、トグルボタンにできます。
RadioButtonイベント
RadioButtonでは、CheckedChangedイベントが2回発生しますので注意が必要です。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { GroupBox groupBox; RadioButton radioButton1, radioButton2; public Form1() { this.Load += new EventHandler(Form1_Load); } private void Form1_Load(object sender, EventArgs e) { radioButton1 = new RadioButton(); radioButton1.Location = new Point(20, 20); radioButton1.Text = "Button1"; radioButton1.TextAlign = ContentAlignment.MiddleCenter; // トグルボタンにする radioButton1.Appearance = Appearance.Button; radioButton1.CheckedChanged += new EventHandler(RadioButton1_CheckedChanged); radioButton2 = new RadioButton(); radioButton2.Location = new Point(20, 50); radioButton2.Text = "Button2"; radioButton2.TextAlign = ContentAlignment.MiddleCenter; // トグルボタンにする radioButton2.Appearance = Appearance.Button; radioButton2.CheckedChanged += new EventHandler(RadioButton2_CheckedChanged); groupBox = new GroupBox(); groupBox.Location = new Point(10, 10); groupBox.Text = "radioButton"; groupBox.Controls.Add(radioButton1); groupBox.Controls.Add(radioButton2); this.Controls.Add(groupBox); } private void RadioButton1_CheckedChanged(object sender, EventArgs e) { MessageBox.Show("button1 changed"); } private void RadioButton2_CheckedChanged(object sender, EventArgs e) { MessageBox.Show("button2 changed"); } } } |
ボタン選択を繰り返すと、radioButton1・radioButton2それぞれの選択状態が同時に変化しますので、イベントが2回発生することが分かります。
これを回避するには、チェック状態を見る必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
private void RadioButton1_CheckedChanged(object sender, EventArgs e) { if (radioButton1.Checked) { MessageBox.Show("button1 checked"); } } private void RadioButton2_CheckedChanged(object sender, EventArgs e) { if (radioButton2.Checked) { MessageBox.Show("button2 checked"); } } |
トグルボタン（ToolStripButton）
C#では、ToolStripButtonコントロールもトグルボタンにできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { ToolStrip toolStrip; ToolStripButton toolStripButton; public Form1() { this.Load += new EventHandler(Form1_Load); } private void Form1_Load(object sender, EventArgs e) { toolStrip = new ToolStrip(); toolStripButton = new ToolStripButton(); toolStrip.SuspendLayout(); this.SuspendLayout(); toolStrip.Items.Add(toolStripButton); toolStrip.Location = new Point(0, 0); toolStrip.Name = "toolStrip1"; toolStrip.TabIndex = 0; toolStrip.Text = "toolStrip1"; toolStripButton.Name = "toolStripButton"; toolStripButton.Text = "&button"; toolStripButton.TextAlign = ContentAlignment.MiddleCenter; toolStripButton.Click += new EventHandler(ToolStripButton_Click); this.Controls.Add(toolStrip); this.Name = "Form1"; this.toolStrip.ResumeLayout(false); this.ResumeLayout(false); this.PerformLayout(); } private void ToolStripButton_Click(object sender, EventArgs e) { // チェック状態を反転する toolStripButton.Checked = !toolStripButton.Checked; } } } |
ToolStripButtonがトグルボタンになっていることが分かります。
また、CheckOnClickをtrueにすれば、イベントハンドラを作成する必要はありません。
|
1 2 3 4 |
//toolStripButton.Click += new EventHandler(ToolStripButton_Click); toolStripButton.CheckOnClick = true; |
このように、C#ではToolStripButtonコントロールもトグルボタンにできます。
- SE
- 実際のソースコードを見て、つまづいていた部分が分かりました。
- PM
- 理解いただけて何よりです。CheckOnClicをTuruにすることも重要です。では実践してみましょう。
C#でトグルボタンを作成してみましょう
いかがでしたでしょうか。C#でCheckBoxやRadioButton、ToolStripButtonをトグルボタンにする方法を紹介しました。ぜひご自身でC#のソースコードを書いて、理解を深めてみましょう。
