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

RadioButton Inputs

RadioButton は、グループの中から 1 つを選ばせるボタンです。1 つをチェックすると、同じグループのほかのボタンのチェックが外れます。どのボタンが同じグループになるかは GroupName で決まります。

GroupName が無いとき、どのボタンが同じグループになるか

RadioButton は ToggleButton を継承しています。ToggleButton と違い、チェック済みの RadioButton をもう一度クリックしてもチェックは外れず、IsChecked は True のままでした。チェックが外れるのは、同じグループの別のボタンをチェックしたときだけです。IsChecked の既定値は False なので、IsChecked="True" を設定しないと何も選ばれていない状態で始まります。最初に 1 つをチェックしておきます。

GroupName を設定しないと、同じ親要素を持つボタンが 1 つのグループになります。1 つの StackPanel に置いた 3 つのボタンは 1 つのグループになり、別の StackPanel のボタンは別のグループになりました。ボタンごとに親が違うと、この仕組みは働きません。1 つずつ Border で包んだボタンは、すべて同時にチェックできました。ItemsControl の ItemTemplate で作ったボタンも同じで、その Parent は null でした。こうしたボタンには GroupName を設定します。

GroupName の届く範囲

同じ GroupName のボタンは、親が違っても 1 つのグループになります。別々の GroupBox に置いた 2 つのボタンも、互いにチェックを外しました。そのため、名前はウィンドウの中で重ならないようにします。1 つのウィンドウの 2 か所で同じ名前を使うと、1 つのグループになります。

グループはウィンドウの外へは広がりません。別のウィンドウと Popup の中の同じ名前のボタンは別のグループになり、3 つともチェックされたままでした。同じ名前でウィンドウやポップアップをまたいでつなげることはできません。名前のあるボタンとないボタンも互いに影響しません。同じ親の中で名前のないボタンをチェックしても、GroupName="1" のボタンのチェックは外れませんでした。

条件 計測値
基底クラス / IsChecked の既定値 ToggleButton / False
チェック済みの RadioButton をもう一度クリック: IsChecked True
GroupName なし、1 つの StackPanel に A-C: 順にすべてクリック -> チェックされたもの C
別の StackPanel の D-E を A-C の後にクリック -> A-E でチェックされたもの E; A-C: C
1 つの StackPanel で F と G をそれぞれ Border で包む: 両方クリック -> チェックされたもの F, G
GroupName なし、ItemsControl の ItemTemplate の RadioButton: すべてクリック -> チェックされたもの(Parent) H, I, J (null)
同じ親: GroupName なしの A、B と GroupName="1" の X、X・A・B の順にクリック -> チェックされたもの B, X
2 つの GroupBox の GroupName="shared": 両方クリック -> チェックされたもの L
ウィンドウ・別のウィンドウ・Popup の GroupName="shared": すべてクリック -> チェックされたもの M, N, P

どのボタンが互いのチェックを外すか。.NET 10 / Windows 11 で計測。

IsChecked を bool のプロパティにバインドする

IsChecked は既定で TwoWay にバインドされます。3 つのボタンを 3 つの bool プロパティにバインドして 2 つ目をクリックすると、プロパティは A=False, B=True, C=False になりました。1 つ目のボタンのバインドも残っていたので、ほかのプロパティを自分で false にする必要はありません。ソース側で C を true にすると、3 つ目のボタンがチェックされ、B は false になりました。

コンバーターを通して 1 つの列挙型のプロパティにバインドする方法もあります。下にリンクした記事では、コンバーターの ConvertBack が何を返すべきかと、GroupName が初期選択にどう影響するかを実測しています。

キーボードで移るのはフォーカスで、選択ではない

1 つ目のボタンをチェックしてフォーカスを置き、下矢印キーを押すと、フォーカスは 2 つ目へ移りましたが、チェックは 1 つ目に残りました。Tab キーも、次のグループではなく同じグループの次のボタンへ移りました。

条件 計測値
IsChecked を bool の A、B、C にバインド(Mode なし)、B をクリック: ソース / A のバインドが残っているか A=False, B=True, C=False / True
続けてソースの C を true に: ソース / チェックされたもの A=False, B=False, C=True / C
A がチェック済みでフォーカスあり、下矢印キー: フォーカス / チェックされたもの B / A
A にフォーカス、Tab: フォーカス B
VerticalContentAlignment(値の出どころ) Top (Default)
3 行のラベル、VerticalContentAlignment=Top、高さ 200 の RadioButton: 丸印の y / ラベルの y 1(高さ 12)/ -1(高さ 47.88)
3 行のラベル、VerticalContentAlignment=Center、高さ 200 の RadioButton: 丸印の y / ラベルの y 94(高さ 12)/ 75.56(高さ 47.88)
3 行のラベル、VerticalContentAlignment=Center、高さ 46.88 の RadioButton: 丸印の y / ラベルの y 17.44(高さ 12)/ -1(高さ 47.88)

バインドした IsChecked、キーボード、VerticalContentAlignment。.NET 10 / Windows 11 で計測。

折り返すラベルと記号をそろえる

VerticalContentAlignment は、丸い記号と内容を、RadioButton の中で縦方向のどこに置くかを決めます。既定値は Top で、プロパティの既定値から来ており、既定のスタイルが適用された後も Top でした。3 行に折り返すラベルでは、Top で記号がラベルの上端に来ました。Center では両方が RadioButton の中央に置かれるので、RadioButton の高さによらず、記号はラベルの中央に揃いました。高さ 200 の RadioButton では中心がどちらも約 100、ラベルと同じ高さ 46.88 では 23.44 と 22.94 でした。

デモアプリで試す

デモアプリの RadioButton のページ。左にコントロールの一覧、右に最初の節の GroupName

デモアプリの RadioButton のページには 2 つの欄があります。GroupName の欄には、名前を設定しない 6 つのボタンと、1 と 2 を設定した 6 つのボタンがあり、VerticalContentAlignment の欄ではコンボボックスで値を選びます。各欄の下の「Show Code」リンクで、その欄の XAML を表示できます。次の XAML は、GroupName の欄(RadioButtonUsageControl.xaml)から名前付きのグループの部分を、スタイル、周囲の GroupBox、配置の属性を省いて示したものです。名前空間の宣言を加えています。

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <RadioButton x:Name="GroupName1ARadioButton" Content="A(Group:1)" GroupName="1" IsChecked="True" />
  <RadioButton x:Name="GroupName1BRadioButton" Content="B(Group:1)" GroupName="1" />
  <RadioButton x:Name="GroupName1CRadioButton" Content="C(Group:1)" GroupName="1" />
  <RadioButton x:Name="GroupName2DRadioButton" Content="D(Group:2)" GroupName="2" IsChecked="True" />
  <RadioButton x:Name="GroupName2ERadioButton" Content="E(Group:2)" GroupName="2" />
  <RadioButton x:Name="GroupName2FRadioButton" Content="F(Group:2)" GroupName="2" />
</StackPanel>

関連するコントロールと記事

ソースコードと計測の方法

このページの挙動の記述は、すべて .NET 10 / Windows 11 で実際に動かして確かめたものです。計測には、このサイトのスクリーンショット生成ツールの RadioButtonDemoScene を使いました。クリックはボタンのクリック処理(OnClick)を呼んで行い、矢印キーと Tab キーは、キーボードから打ったときと同じく WPF の入力管理(InputManager)を通して送りました。

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