WPF 標準コントロールデモアプリ › ToggleButton

ToggleButton Inputs

ToggleButton はクリックするたびにオン/オフ状態を切り替えるボタンです。IsChecked プロパティで状態を保持し、CheckBox と RadioButton の基底クラスです。カスタムトグルスイッチや表示切り替えボタンの実装に使われます。

概要

WPF の ToggleButton は ButtonBase を継承したコントロールで、クリックするたびに IsChecked が true と false の間でトグルします。IsThreeState="True" にすると null（不定）状態も追加されます。

ToggleButton は CheckBox と RadioButton の基底クラスです。これらの標準コントロールのような外観を持たないカスタムのトグル UI が必要な場合に ToggleButton を直接使用します。例えば、ツールバーのアクティブ/非アクティブなツール切り替えボタンや、表示/非表示をトグルするボタンなど。

IsChecked プロパティは bool?（null 許容）型です。MVVM では bool または bool? 型の ViewModel プロパティに TwoWay バインドします。

外観のカスタマイズには ControlTemplate を使用します。IsChecked の値によって外観が変わるよう、DataTrigger や VisualStateManager をテンプレート内で定義することで、スイッチ形式や押し込みボタン形式などのカスタムトグル UI を作成できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`IsChecked`	`bool? (True / False / Null)`	ViewModel の bool または bool? プロパティと TwoWay バインドして、ボタンのオン/オフ状態を管理するときに使用します。true のとき押し込んだ状態（アクティブ）、false のとき通常状態、null のとき不定状態（IsThreeState=True の場合のみ）を視覚的に表現できます。null 状態はデフォルトのテンプレートでは中間的な外観（半押し状態のような見た目）で表示されます。注意点として、ViewModel が `bool` 型プロパティ（null 非許容）を使っている場合は null 状態を表現できず、IsThreeState と組み合わせるとバインドエラーが発生することがあります。3 状態を使う場合は必ず `bool?` 型を使用してください。
`IsThreeState`	`bool`	「自動/オン/オフ」のような 3 段階の状態を 1 つのボタンで表現したいレアなユースケースで使用します。True にするとクリックのたびに `false → true → null` とサイクルします。ただし、3 つの状態それぞれが UI 上でユーザーに明確に伝わるビジュアルデザインが必要です。注意点として、一般的なトグルボタンの用途（オン/オフの切り替え）では 2 状態で十分であり、3 状態を使うと何を意味するか分かりにくくなります。ControlTemplate で各状態を明確に区別できるビジュアルを定義してください。
`ClickMode (ButtonBase)`	`Release / Press / Hover`	ToggleButton は ButtonBase を継承しているため、ClickMode を利用できます。通常のトグルボタンには `Release`（デフォルト）が適していますが、`Press` を使えばマウス押し下げと同時に状態が切り替わるため、即時反応が求められる操作（例: 押している間だけアクティブなプレビューモード）に活用できます。`Hover` はマウスオーバーで状態が変わるため、誤操作のリスクが高く ToggleButton ではほとんど使用されません。
`Command / CommandParameter (ButtonBase)`	`ICommand / object`	ToggleButton のクリックごとに MVVM コマンドを実行したいときに使用します。クリックのたびにコマンドが発火し、CommandParameter で任意の値を渡せます。注意点として、CommandParameter にはクリック後の `IsChecked` の新しい値は自動では含まれません。コマンドハンドラ内で IsChecked の変化後の値が必要な場合は、`IsChecked` を直接 ViewModel にバインドして変化を検知するか、Interaction.Triggers の EventTrigger を使ってコマンドに渡すアプローチを検討してください。

XAML 使用例

<!-- 表示/非表示トグル -->
<ToggleButton Content="サイドパネルを表示"
             IsChecked="{Binding IsSidePanelVisible, Mode=TwoWay}" />

<!-- Popup との連動 -->
<ToggleButton x:Name="optBtn" Content="▼ オプション"
             IsChecked="{Binding IsPopupOpen, Mode=TwoWay}" />

<!-- ツールバーのモードトグル -->
<ToggleButton IsChecked="{Binding IsDrawMode, Mode=TwoWay}"
             ToolTip="描画モード">
  <Image Source="/Icons/pencil.png" Width="16" Height="16" />
</ToggleButton>

主な使用例

サイドパネルの開閉 — サイドパネルや追加情報パネルの表示/非表示を ToggleButton でコントロールします。
Popup との連動 — IsChecked を Popup の IsOpen にバインドして、ボタンクリックでポップアップの開閉を制御します。
ツールバーのモード切り替え — 描画ツール・消しゴムツールなどのアクティブモードをツールバーの ToggleButton で管理します。
テーマ切り替え — ライト/ダークテーマの切り替えスイッチとして使用します。ControlTemplate でスイッチ形の外観にカスタマイズします。
詳細表示の切り替え — リストアイテムの詳細情報の展開/折りたたみを ToggleButton で実装します。

ヒントとベストプラクティス

CheckBox/RadioButton との使い分け — 標準の見た目が必要なら CheckBox/RadioButton を使います。カスタム外観が必要な場合に ToggleButton を直接使います。
Popup と組み合わせる — IsChecked を Popup の IsOpen に TwoWay バインドすると、ボタンクリックで Popup を開閉できます。Popup 外クリックで閉じたときも IsChecked が同期して更新されます。
ControlTemplate でカスタム外観 — スイッチ（iPhone 風スライドスイッチ）などカスタム外観にするには ControlTemplate を完全に書き換えます。テンプレート内に DataTrigger を定義し、IsChecked の値に応じて背景色・ハンドル位置・テキストなどを変えることで、視覚的に直感的なカスタムトグル UI を実現できます。
複数 ToggleButton の排他制御 — ToggleButton 自体は GroupName をサポートしないため、排他的な選択が必要なら RadioButton を使うのが基本です。見た目だけ ToggleButton 風にしたい場合は RadioButton に ControlTemplate を適用し、MVVM で管理したい場合は ViewModel 側で選択中の項目を 1 つだけ保持する実装にすると分かりやすく保守しやすくなります。
Checked/Unchecked イベント vs Command — コードビハインドで状態変化を処理するには Checked および Unchecked イベントが便利ですが、MVVM では IsChecked を TwoWay バインドして ViewModel の setter で変化を検知する方法が推奨されます。コマンドが必要な場合は Interaction.Triggers の EventTrigger を使って Checked/Unchecked イベントを Command に変換できます。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で ToggleButton のソースコードを見る →