本文へスキップ
BecomeCoder

C# WPFコース · 第1章 WPF ― デスクトップアプリ開発 · レッスン5

CheckBox(チェックボックス)

ブラウザで完結

導入

CheckBoxは、「オン/オフ」を切り替える選択肢です。「利用規約に同意」「通知を受け取る」のように、複数を独立して選べるのが特徴です。

XAMLサンプル(読み物)

<CheckBox x:Name="agreeCheck" Content="利用規約に同意する" />

<!-- 複数を独立して選べる -->
<CheckBox Content="メール通知を受け取る" IsChecked="True" />
<CheckBox Content="SMS通知を受け取る" />
// チェック状態の取得(IsChecked は bool?(3状態対応)なので == true で判定)
bool agreed = agreeCheck.IsChecked == true;

主なプロパティ

  • IsChecked … チェック状態。型はbool?true/false/null
  • Content … 横に表示するラベル
  • IsThreeStatetrueで「未確定(null)」を含む3状態にできる

主なイベント

  • Checked … チェックされたとき
  • Unchecked … チェックが外れたとき

補足: IsCheckedbool?型なので、判定は== trueと書きます(if (IsChecked)はコンパイルエラー)。

MVVM(実務ではこう書く)

チェック状態もViewModelのboolプロパティに双方向バインドします。コードビハインドでIsCheckedを読む必要がなくなります。

<CheckBox Content="利用規約に同意する" IsChecked="{Binding IsAgreed, Mode=TwoWay}" />
// ViewModel 側
public bool IsAgreed
{
    get => _isAgreed;
    set { _isAgreed = value; OnPropertyChanged(); }
}

試す(ローカル)

  • IsCheckedをViewModelのIsAgreedにバインドし、ボタンのCommandCanExecuteIsAgreedにすると「同意しないと押せないボタン」が作れる(発展)。

まとめ

  • CheckBoxはオン/オフの独立した選択(複数選べる)
  • IsCheckedbool?== trueで判定する
  • 実務ではIsCheckedをViewModelのboolプロパティにバインド

次回: 複数から1つだけ選ぶRadioButtonです。

実際に動かしてみよう

下のエディタに XAML を書くと、右側のプレビューにその場で WPF 風のUIが描画されます。テキスト入力・チェック・選択はそのまま動き、`{Binding}` で結んだ TextBox と TextBlock は打った文字がリアルタイムで反映されます。本文の XAML を打ち込んだり、属性(Width・Margin・FontSize・色など)を書き換えたりして、レイアウトの変化を確かめながら進めましょう(C# のコードビハインドや Command、ItemsSource などC#側のデータに依存する処理は実行されません。それらは Visual Studio で試します)。

XAML (WPF) プレビュー

書いた XAML をその場で WPF 風の画面に描画する学習用プレビューを読み込みます(本物のWPFではなく、レイアウトとコントロールの見た目・{Binding}の双方向バインディングを再現したものです。C#のコードビハインド/Command は実行されません)。
スクロールして表示された時点でも自動で読み込まれます。