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

CheckBox Inputs

CheckBox はユーザーがオプションを選択・解除できるトグルコントロールです。ToggleButton を継承しており、IsThreeState を有効にするとチェック済み・非チェック・不定（null）の 3 状態をサポートします。独立した複数の選択肢を並べる場合に最適です。

概要

WPF の CheckBox は ToggleButton を継承したコントロールで、ユーザーが独立してオン/オフを切り替えられる選択肢を提供します。RadioButton とは異なり、同一グループ内でも複数の CheckBox を同時にチェックできます。

IsChecked プロパティは bool?（null 許容）型です。 IsThreeState="True" にすると、ユーザーがクリックするたびに false → true → null（不定）→ false とサイクルします。不定状態は「一部選択」を表す「全選択」チェックボックスなどに使用されます。

MVVM での実装では、IsChecked を bool? 型の ViewModel プロパティに TwoWay バインドするのが標準です。単純な true/false の場合は bool プロパティへのバインドも可能で、 WPF が null ↔ false の変換を自動で行います。

ContentControl を継承しているため、ラベル部分には文字列だけでなく画像やパネルなど任意の WPF 要素を配置できます。これにより、アイコン付きの CheckBox や複数行ラベルを持つ選択肢を簡単に作成できます。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。アプリ上でリアルタイムに各プロパティを変更してその動作を確認できます。

プロパティ	設定値	説明
`IsChecked (ToggleButton)`	`bool? (Null / False / True)`	選択状態を ViewModel と同期させるために TwoWay バインドで使用します。`bool?` 型のプロパティにバインドすると `null`（不定状態）も正しく扱えますが、`bool` 型のプロパティにバインドした場合は WPF が自動で `null ↔ false` の変換を行います。ただし `IsThreeState="True"` の状態で `bool` 型バインドを使うと、ユーザーが null 状態を通過した際に ConvertBack が変換できずにバインドエラーが発生することがあります。3 状態を使う場合は必ず `bool?` 型バインドを使用してください。
`IsThreeState (ToggleButton)`	`bool`	リストやグリッドの「すべて選択」チェックボックスで、全選択・一部選択・全解除の 3 状態を 1 つの CheckBox で表現したいときに使用します。True にすると、ユーザーがクリックするたびに `false → true → null（不定）→ false` のサイクルで状態が変化し、`null` は視覚的にハイフンやグレーのチェックで表示されます。注意点として、`IsThreeState="True"` を設定する際は必ず `bool?` 型のバインドを使用してください。`bool` 型でバインドすると null 状態の変換に失敗してバインドエラーになります。
`VerticalContentAlignment (Control)`	`Top / Center / Bottom / Stretch`	CheckBox のラベル部分に複数行のテキストやパネルを配置するとき、チェックボックス記号と縦方向の位置を揃えたい場合に使用します。例えば `Center` にするとチェックボックス記号がラベル全体の中央に揃い、`Top` にすると先頭行に揃います。デフォルト値は `Top` であるため、ラベルの高さが低い場合は問題になりませんが、複数行の長いラベルを持つ場合はチェックボックス記号が上端に寄ってしまい見た目が不自然になることがあります。その場合は `Center` を指定すると自然に見えます。

XAML 使用例

3 状態 CheckBox と「全選択」パターンの例です：

<StackPanel>
  <!-- 通常の CheckBox -->
  <CheckBox Content="メール通知を有効にする"
            IsChecked="{Binding IsEmailEnabled, Mode=TwoWay}" />

  <!-- 3 状態 CheckBox（全選択パターン） -->
  <CheckBox Content="すべて選択" IsThreeState="True"
            IsChecked="{Binding AllSelected, Mode=TwoWay}" />

  <!-- アイコン付き CheckBox -->
  <CheckBox IsChecked="{Binding IsStarred, Mode=TwoWay}">
    <StackPanel Orientation="Horizontal">
      <TextBlock Text="★" Foreground="Gold" />
      <TextBlock Text=" お気に入りに追加" />
    </StackPanel>
  </CheckBox>
</StackPanel>

主な使用例

設定オプション — 「通知を受け取る」「ログを保存する」など、独立したオン/オフ設定項目に使用します。
全選択/解除 — IsThreeState を使って、リスト全体の選択状態（全選択/一部選択/全解除）を一つの CheckBox で管理します。
複数選択フィルター — 検索フィルターやカテゴリ選択で、複数条件を同時に有効にできる選択UIを作成します。
利用規約への同意 — 「利用規約に同意する」のような確認チェックボックスをフォームに配置します。
データグリッドの行選択 — DataGrid の列として CheckBox を配置し、複数行の一括選択 UI を実装します。

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

TwoWay バインドを使用する — IsChecked には必ず Mode=TwoWay を指定し、ViewModel から初期値を設定できるようにします。
RadioButton との使い分け — 相互排他的な選択（どれか一つのみ）には RadioButton を、独立した複数選択には CheckBox を使います。
全選択パターンの実装 — 「すべて選択」CheckBox を実装する際は、ViewModel 側で子項目の IsChecked をすべて監視し、全て true なら true、全て false なら false、混在なら null を AllSelected プロパティに返すロジックを実装します。AllSelected が変更されたときは子項目を一括で true/false に更新します。null をセットしても子項目には何もしないようにすることで無限ループを防げます。
全選択パターンには null チェックを — 3 状態モードで null を扱う場合は、ViewModel で null の意味（一部選択）を明確に定義します。
ラベルのクリック範囲 — CheckBox はチェックマーク部分だけでなく、ラベル部分をクリックしても状態が切り替わります。ラベルの範囲を広げることでクリックしやすくなります。
Space キーで状態を切り替えられる — CheckBox にフォーカスがある状態で Space キーを押すと、マウスクリックと同様に状態が切り替わります。キーボード操作のユーザビリティを確認する際にこの動作を考慮してください。
MVVM での状態変化検知 — コードビハインドで Checked/Unchecked イベントを使う代わりに、MVVM では IsChecked を TwoWay バインドし、ViewModel の setter で変化を検知・処理する方法が推奨されます。Interaction.Triggers の EventTrigger を使えば、コードビハインドなしにイベントを Command に変換することもできます。
アクセシビリティ — 画像コンテンツを使う場合は AutomationProperties.Name を設定してスクリーンリーダーが正しく読み上げられるようにします。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。アプリ内の「コード表示」ボタンから各プロパティの実際の XAML を確認できます。

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