本文へスキップ
BecomeCoder

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

RadioButton(ラジオボタン)

ブラウザで完結

導入

RadioButtonは、複数の選択肢から1つだけを選ばせるコントロールです。「サイズ:小/中/大」のように、排他的な選択に使います。CheckBox(複数可)との違いが重要です。

図解

flowchart LR
    subgraph CheckBox["CheckBox(複数選べる)"]
        A["☑ 通知A"]
        B["☑ 通知B"]
    end
    subgraph RadioButton["RadioButton(1つだけ)"]
        R1["◉ 中"]
        R2["◯ 小"]
        R3["◯ 大"]
    end
    style RadioButton fill:#e1f5fe

XAMLサンプル(読み物)

<!-- 同じ GroupName(または同じ親パネル)内で1つだけ選択できる -->
<StackPanel>
    <RadioButton Content="小" GroupName="Size" />
    <RadioButton Content="中" GroupName="Size" IsChecked="True" />
    <RadioButton Content="大" GroupName="Size" />
</StackPanel>

主なプロパティ

  • IsChecked … 選択状態
  • Content … 表示ラベル
  • GroupName … 同じ名前のRadioButton同士が排他グループになる

主なイベント

  • Checked … 選択されたとき

補足: 排他の範囲は「同じGroupName」または「同じ親パネル」。CheckBoxは複数選択、RadioButtonは択一——用途で使い分けます。

MVVM(実務ではこう書く)

各RadioButtonの選択状態をViewModelのプロパティにバインドします。

<RadioButton Content="小" GroupName="Size" IsChecked="{Binding IsSmall, Mode=TwoWay}" />
<RadioButton Content="中" GroupName="Size" IsChecked="{Binding IsMedium, Mode=TwoWay}" />
public bool IsSmall  { get => _s; set { _s = value; OnPropertyChanged(); } }
public bool IsMedium { get => _m; set { _m = value; OnPropertyChanged(); } }

選択肢が多い場合は、選択値を1つの列挙型プロパティ(例 SelectedSize)で持ち、IValueConverterで各ボタンに対応づけるのが定石です(発展)。

試す(ローカル)

  • 各RadioButtonをViewModelのboolプロパティにバインドし、選択に応じてViewModel側の値が切り替わることを確認。

まとめ

  • RadioButtonは択一選択。GroupNameで排他グループを作る
  • 1つ選ぶと同グループの他は自動で外れる
  • 実務では選択状態をViewModel(真偽値/列挙型+コンバーター)にバインド

次回: 省スペースで1つ選ぶComboBoxです。

実際に動かしてみよう

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

XAML (WPF) プレビュー

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