syncfusion-winforms-toggle-button

Syncfusion Windows Forms Toggle Button の実装

Toggle Button の実装ガイドへようこそ。Toggle Button コントロールを使用すると、カスタマイズオプションを活用して、対照的な 2 つの状態（アクティブと非アクティブ）を切り替えられます。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• 対照的な 2 つの状態（ON/OFF、YES/NO など）のトグルボタンを作成する
• アクティブ状態と非アクティブ状態の外観をカスタマイズする
• テキスト表示モードと画像表示モードを切り替える
• レンダラーを使用して独自のスタイルを実装する
• トグルイベントと状態変更を処理する
• トグルコントロールを使用したインタラクティブな Windows Forms アプリケーションを構築する

コンポーネントの概要

Toggle Button は、明確に異なる 2 つの状態を表示する Windows Forms コントロールです。

• アクティブ状態：「ON」、「YES」、または有効な条件を示すために使用します
• 非アクティブ状態：「OFF」、「NO」、または無効な条件を示すために使用します

ボタンをクリックするか、Space キーを押すと、状態を切り替えられます。

主な機能

• 独立したスタイルを設定できる、構成可能なアクティブ状態と非アクティブ状態
• 表示モード：テキストまたは画像
• 状態変更のイベント処理
• カスタム描画のサポート
• 状態ごとの色と境界線の完全なカスタマイズ

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• アセンブリの依存関係と NuGet のセットアップ
• デザイナーを使用した Toggle Button の追加
• コードを使用した Toggle Button の追加
• 名前空間のインポートと基本的な初期化

トグル状態の構成

📄 参照： references/toggle-states.md

• アクティブ状態と非アクティブ状態について
• プログラムによるトグル状態の設定
• アクティブ状態のカスタマイズ（色、テキスト、ホバー効果）
• 非アクティブ状態のカスタマイズ（色、テキスト、ホバー効果）
• 状態の遷移と切り替え

表示モード

📄 参照： references/display-modes.md

• テキスト表示モードの構成
• 画像表示モードの構成
• 表示モードの切り替え
• ユースケースとベストプラクティス

カスタムスタイルとレンダラー

📄 参照： references/custom-styling.md

• カスタムレンダラーの実装
• IToggleButtonRenderer インターフェイスの実装
• カスタムレンダラーの割り当て
• 高度なスタイルと外観のカスタマイズ

イベントと操作

📄 参照： references/events-and-interaction.md

• 状態変更イベントの処理
• マウスクリックによる操作
• キーボード操作（Space キー）
• イベントのパターンとベストプラクティス

クイックスタートの例

Toggle Button を作成して構成する最小限の例を次に示します。

using Syncfusion.Windows.Forms.Tools;
using System.Drawing;

// Create and add Toggle Button to form
ToggleButton toggleButton = new ToggleButton();
toggleButton.Location = new System.Drawing.Point(50, 50);
toggleButton.Size = new System.Drawing.Size(100, 40);
toggleButton.Name = "toggleButton1";

// Configure Active state
toggleButton.ActiveState.Text = "ON";
toggleButton.ActiveState.BackColor = Color.FromArgb(1, 115, 199);
toggleButton.ActiveState.ForeColor = Color.White;

// Configure Inactive state
toggleButton.InactiveState.Text = "OFF";
toggleButton.InactiveState.BackColor = Color.White;
toggleButton.InactiveState.ForeColor = Color.FromArgb(80, 80, 80);

// Set initial state
toggleButton.ToggleState = ToggleButtonState.Inactive;

// Add to form
this.Controls.Add(toggleButton);

よくあるパターン

パターン 1：二値状態の切り替え

ブール値の設定用に、シンプルな ON/OFF トグルボタンを作成します。

toggleButton.ActiveState.Text = "ON";
toggleButton.InactiveState.Text = "OFF";
toggleButton.ToggleState = ToggleButtonState.Inactive;

パターン 2：Yes/No の切り替え

選択用のトグルを作成します。

toggleButton.ActiveState.Text = "YES";
toggleButton.InactiveState.Text = "NO";

パターン 3：状態に応じた色

状態を視覚的に示すために、異なる色を適用します。

// Active - Green
toggleButton.ActiveState.BackColor = Color.FromArgb(34, 177, 76);
toggleButton.ActiveState.ForeColor = Color.White;

// Inactive - Red
toggleButton.InactiveState.BackColor = Color.FromArgb(192, 0, 0);
toggleButton.InactiveState.ForeColor = Color.White;

パターン 4：状態ごとのカスタムテキスト

各状態を表す説明的なラベルを設定します。

toggleButton.ActiveState.Text = "Enabled";
toggleButton.InactiveState.Text = "Disabled";

主なプロパティ

プロパティ	目的	一般的な値
ToggleState	ボタンの現在の状態	ToggleButtonState.Active、ToggleButtonState.Inactive
ActiveState.Text	アクティブ時に表示するテキスト	"ON"、"YES"、"Enabled"
InactiveState.Text	非アクティブ時に表示するテキスト	"OFF"、"NO"、"Disabled"
ActiveState.BackColor	アクティブ時の背景色	色の値
InactiveState.BackColor	非アクティブ時の背景色	色の値
DisplayMode	表示する内容	DisplayType.Text、DisplayType.Image
Renderer	外観描画のカスタマイズ	IToggleButtonRenderer の実装

アセンブリの依存関係

Toggle Button を使用するには、次のアセンブリをプロジェクトに追加してください。

• Syncfusion.Grid.Base
• Syncfusion.Grid.Windows
• Syncfusion.Shared.Base
• Syncfusion.Shared.Windows
• Syncfusion.Tools.Base
• Syncfusion.Tools.Windows

次のステップ

1. 「はじめに」から始める - 依存関係をインストールし、コントロールを追加します
2. 状態を設定する - アクティブ時と非アクティブ時の外観をカスタマイズします
3. 表示モードを選択する - テキスト表示または画像表示を選びます
4. スタイルを追加する - 必要に応じてカスタムレンダラーを適用します
5. イベントを処理する - アプリケーションで状態の変化に応答します