【Winform】モダンでスタイリッシュなWinFormsボタンの設定方法

2024年8月29日

WinFormsの標準ボタンはシンプルなデザインですが、設定を変更することで、モダンでスタイリッシュな見た目にすることができます。この資料では、フラットスタイルのボタンを使用し、背景色やフォント、マウスオーバー時の効果をカスタマイズする方法を解説します。

1. 手順
2. 実際のコード例
3. 効果
4. 補足

手順

ボタンのスタイルをフラットに設定

FlatStyleプロパティをFlatに設定し、ボタンのスタイルをフラットにします。フラットスタイルは、ボタンが押されると背景色が変わるシンプルでモダンな外観を提供します。

// ボタンのスタイルをフラットに設定
// フラットスタイルは、モダンでシンプルな外観を提供します。
button1.FlatStyle = FlatStyle.Flat;

ボタンの境界線を削除

FlatAppearance.BorderSizeプロパティを0に設定して、ボタンの境界線を削除します。これにより、より洗練された見た目になります。

// ボタンの境界線を削除
// 境界線をなくすことで、ボタンがより洗練された見た目になります。
button1.FlatAppearance.BorderSize = 0;

背景色とテキストカラーの設定

ボタンの背景色をダークグレーに設定し、テキストカラーを明るいグレーに設定します。これにより、モダンで落ち着いた印象を与えることができます。

// ボタンのデフォルトの背景色を設定
// モダンなダークグレーを使用して、落ち着いた印象を与えます。
button1.BackColor = Color.FromArgb(34, 34, 34);

// ボタンのテキストカラーを設定
// 明るいグレーを使用して、背景色とのコントラストを強調し、テキストを読みやすくします。
button1.ForeColor = Color.FromArgb(240, 240, 240);

マウスオーバー時の背景色を設定

FlatAppearance.MouseOverBackColorプロパティを使用して、マウスがボタン上にあるときの背景色を設定します。少し明るめのグレーにすることで、インタラクティブな効果を出すことができます。

// マウスオーバー時の背景色を設定
// 少し明るめのグレーを使用して、インタラクティブな効果を出します。
button1.FlatAppearance.MouseOverBackColor = Color.FromArgb(55, 55, 55);

クリック時の背景色を設定

FlatAppearance.MouseDownBackColorプロパティを使用して、ボタンがクリックされたときの背景色を設定します。暗い色を使用することで、押された感覚を視覚的に強調します。

// ボタンがクリックされたときの背景色を設定
// より暗いグレーを使用して、ボタンが押された感覚を視覚的に強調します。
button1.FlatAppearance.MouseDownBackColor = Color.FromArgb(25, 25, 25);

フォントのスタイルを変更

ボタンのテキストが強調されるように、太字のフォントを設定します。Segoe UIフォントはモダンな外観を提供し、読みやすさを向上させます。

// ボタンのテキストフォントを設定
// 太字のSegoe UIフォントを使用して、モダンで視認性の高いデザインにします。
button1.Font = new Font("Segoe UI", 12, FontStyle.Bold);

テキストの中央配置

テキストがボタンの中央に配置されるように、TextAlignプロパティをContentAlignment.MiddleCenterに設定します。

// ボタンのテキストを中央に配置
// テキストをボタンの中央に配置して、均整の取れた見た目にします。
button1.TextAlign = ContentAlignment.MiddleCenter;

実際のコード例

以下に、上記の設定をすべて適用したボタンのコード例を示します。

// ボタンのスタイルをフラットに設定
button1.FlatStyle = FlatStyle.Flat;

// ボタンの境界線を削除
button1.FlatAppearance.BorderSize = 0;

// ボタンのデフォルトの背景色を設定
button1.BackColor = Color.FromArgb(34, 34, 34);

// ボタンのテキストカラーを設定
button1.ForeColor = Color.FromArgb(240, 240, 240);

// マウスオーバー時の背景色を設定
button1.FlatAppearance.MouseOverBackColor = Color.FromArgb(55, 55, 55);

// ボタンがクリックされたときの背景色を設定
button1.FlatAppearance.MouseDownBackColor = Color.FromArgb(25, 25, 25);

// ボタンのテキストフォントを設定
button1.Font = new Font("Segoe UI", 12, FontStyle.Bold);

// ボタンのテキストを中央に配置
button1.TextAlign = ContentAlignment.MiddleCenter;