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

RadioButton Inputs

RadioButton は同一グループ内で排他的に1つだけ選択できるコントロールです。同じ GroupName を持つ RadioButton は連動しており、一つを選ぶと他が自動的に解除されます。ToggleButton を継承しています。

概要

WPF の RadioButton は ToggleButton を継承したコントロールで、同一グループ内での単一選択を実現します。GroupName が同じ RadioButton 同士は排他的に動作し、一方を選ぶと同じグループの他のボタンが自動で解除されます。

GroupName を設定しない場合は親コンテナが暗黙のグループとなります。GroupName を使うと、異なる親コンテナに配置された RadioButton でも同一グループとして排他的に動作させることができます。

MVVM での実装パターンとしては、各 RadioButton の IsChecked を ViewModel の bool プロパティにバインドする方法と、列挙型プロパティと IValueConverter を組み合わせる方法があります。列挙型コンバーターを使うと、選択肢が増えても ViewModel プロパティが一つで済むため管理しやすくなります。

ContentControl を継承しているため、テキストだけでなくアイコンや複合パネルをラベルとして使用できます。ControlTemplate を変更することで、ボタン形式のトグルセレクターや任意のカスタム外観に変えることができます。

画面キャプチャ

デモしているプロパティ

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

プロパティ	設定値	説明
`GroupName`	`string (Null = 親コンテナが範囲)`	同じ画面内に複数の独立した選択グループを持ちたいときに設定します。同じ `GroupName` を持つ RadioButton はひとつのグループとして排他的に動作し、どれか一方を選ぶと同グループの他のボタンが自動解除されます。`GroupName` が null の場合は同一の親コンテナ（例: StackPanel）内の RadioButton が暗黙のグループを形成します。注意点として、`GroupName` は親コンテナをまたいで機能するため、異なる StackPanel に配置した RadioButton でも同じ `GroupName` を設定すると同一グループとして排他動作します。意図しない排他制御を避けるため、グループごとに必ずユニークな GroupName を設定してください。
`IsChecked (ToggleButton)`	`bool?`	RadioButton が現在選択されているかどうかを示します。コードから `IsChecked = true` を設定すると、同じグループ内の他のボタンが自動的に解除されます。TwoWay バインドで ViewModel の bool プロパティに接続するのが標準パターンです。注意点として、各 RadioButton の IsChecked を個別の bool プロパティにバインドする場合、ViewModel 側のいずれかを true にしたときに他のプロパティを false に更新しないと状態が不整合になります。選択肢が多い場合は列挙型＋IValueConverter のパターンで管理すると同期問題を防げます。
`VerticalContentAlignment (Control)`	`Top / Center / Bottom / Stretch`	RadioButton のラベルに複数行のテキストや縦に長いパネルを配置するとき、ラジオボタン記号とラベルの垂直方向の位置を揃えるために使用します。デフォルトの `Top` では短いラベルは問題ありませんが、ラベルが複数行にわたる場合にボタン記号が上端に寄ってしまうことがあるため、`Center` を指定することで自然な整列が得られます。

XAML 使用例

<StackPanel>
  <RadioButton Content="オプション A" GroupName="MyGroup"
               IsChecked="{Binding IsOptionASelected, Mode=TwoWay}" />
  <RadioButton Content="オプション B" GroupName="MyGroup"
               IsChecked="{Binding IsOptionBSelected, Mode=TwoWay}" />
  <RadioButton Content="オプション C" GroupName="MyGroup"
               IsChecked="{Binding IsOptionCSelected, Mode=TwoWay}" />
</StackPanel>

<!-- 列挙型バインド（IValueConverter を使用） -->
<RadioButton Content="小" GroupName="SizeGroup"
             IsChecked="{Binding SelectedSize,
               Converter={StaticResource EnumBoolConverter},
               ConverterParameter=Small}" />

主な使用例

設定ダイアログ — テーマ（ライト/ダーク/システム）や言語など、相互排他的な設定選択肢に使用します。
ウィザードのパス選択 — ウィザードで複数のルートから一つを選択する画面に使用します。
アンケート・調査フォーム — リッカートスケールや選択肢問題で一つだけ回答できる質問に使用します。
カスタムタブストリップ — ControlTemplate を変更して RadioButton をタブヘッダーとして使用するカスタムナビゲーション UI を作成します。
フィルター選択 — 「すべて/アクティブ/完了」のような排他的なフィルター切り替え UI に使用します。

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

グループが混在するときは GroupName を必ず設定 — 同一パネル内に複数のグループがある場合、GroupName なしでは意図しないグループ化が起きます。
列挙型コンバーターを使うと管理しやすい — 選択肢が 3 つ以上ある場合、bool プロパティを個別に持つより列挙型1つ＋コンバーターのほうが ViewModel がすっきりします。コンバーターは ConverterParameter に列挙値を渡し、バインドされた値と一致するか bool に変換するパターンが一般的です。
必ずいずれか1つが選択された状態にする — グループ内でどれも選択されていない状態はユーザーにとって混乱を招きます。ViewModel コンストラクタまたは XAML の IsChecked="True" でデフォルト選択を必ず設定してください。初期値が設定されていないと、ユーザーが送信するまで選択状態が不明確になります。
キーボードナビゲーションと TabIndex — RadioButton グループ内は通常、矢印キーで選択を移動できます。グループが複数ある場合は TabIndex を設定して Tab キーでのフォーカス順序を制御し、グループ間の移動が直感的になるようにしてください。
カスタム外観には ControlTemplate を使う — 標準のバレット（●○）表示ではなく、ボタン形式やピル形式の外観にするには ControlTemplate を差し替えます。
アクセシビリティ — コンテンツが画像の場合は AutomationProperties.Name を設定してスクリーンリーダーが読み上げられるようにします。

ソースコード

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

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