ラジオ ボタン

オプション ボタンとも呼ばれるラジオ ボタンを使用すると、ユーザーは 2 つ以上の相互排他的で関連するオプションのコレクションから 1 つのオプションを選択できます。 ラジオ ボタンは常にグループで使用され、各オプションはグループ内の 1 つのラジオ ボタンで表されます。

既定の状態では、RadioButtons グループのラジオ ボタンは選択されません。 つまり、すべてのラジオボタンが解除されます。 ただし、ユーザーがラジオ ボタンを選択すると、ユーザーはボタンの選択を解除して、グループを初期状態のクリア状態に戻すことはできません。

RadioButtons グループの単一の動作は、複数選択と選択解除、またはクリアをサポートする チェック ボックスと区別します。

ラジオ ボタンが 1 つ選択されている RadioButtons グループの例

これは適切なコントロールですか?

ラジオ ボタンを使用して、ユーザーが 2 つ以上の相互排他的オプションから選択できるようにします。

RadioButtons グループでラジオ ボタンが1つ選択されています

ユーザーが選択する前にすべてのオプションを表示する必要がある場合は、ラジオ ボタンを使用します。 ラジオ ボタンは、すべてのオプションを均等に強調します。つまり、一部のオプションでは、必要以上に注目が集まる場合があります。

すべてのオプションに等しい注意が必要な場合を除き、他のコントロールの使用を検討してください。 たとえば、ほとんどのユーザーやほとんどの状況で最適なオプションを 1 つ推奨するには、 コンボ ボックス を使用してその最適なオプションを既定のオプションとして表示します。

既定のオプションを表示するコンボ ボックス

2 つのオプションがオン/オフやはい/いいえのように単一のバイナリ選択として明確に表現できる場合は、それらを1つのチェックボックスまたはトグルスイッチでコントロールとして組み合わせます。 たとえば、[同意する] と [同意しない] の 2 つのラジオ ボタンの代わりに、[同意する] チェック ボックスを 1 つ使用します。

1 つのバイナリ選択に 2 つのラジオ ボタンを使用しないでください。

二項選択を示す 2 つのラジオ ボタン

代わりにチェック ボックスを使用します。

チェック ボックスは、バイナリの選択肢を提示するための適切な代替手段です

ユーザーが複数のオプションを選択できる場合は、 チェック ボックスを使用します。

チェック ボックスで複数選択がサポートされる

ユーザーのオプションが値の範囲内にある場合 (例: 10、20、30、...100)、 スライダー コントロールを使用します。

値の範囲内の 1 つの値を表示するスライダー コントロール

8 つ以上のオプションがある場合は、 コンボ ボックスを使用します。

複数のオプションを表示するリスト ボックス

使用可能なオプションがアプリの現在のコンテキストに基づいている場合、または動的に変化する可能性がある場合は、リスト コントロールを使用します。

推奨事項

• 一連のラジオ ボタンの目的と現在の状態が明示的であることを確認します。
• ラジオ ボタンのテキスト ラベルを 1 行に制限します。
• テキスト ラベルが動的な場合は、ボタンのサイズを自動的に変更する方法と、その周囲のビジュアルに何が起こるかを検討してください。
• ブランドのガイドラインに記載されていない限り、既定のフォントを使用します。
• 2 つの RadioButtons グループを並べて配置しないでください。 2 つの RadioButtons グループが隣り合っている場合、ユーザーがどのボタンがどのグループに属しているかを判断することが困難になる場合があります。

RadioButtons の概要

RadioButtons と RadioButton

ラジオ ボタン グループを作成するには、RadioButton と RadioButton の 2 つの方法があります。

• RadioButtons コントロールをお勧めします。 このコントロールは、レイアウトを簡略化し、キーボード ナビゲーションとアクセシビリティを処理し、データ ソースへのバインドをサポートします。
• 個々のRadioButtonコントロールのグループを使用できます。

キーボードのaccessとナビゲーション動作は、RadioButtons コントロールで最適化されています。 これらの機能強化により、アクセシビリティとキーボードの両方のパワー ユーザーがオプションの一覧をすばやく簡単に移動できます。

これらの機能強化に加えて、RadioButtons グループ内の個々のラジオ ボタンの既定の視覚的レイアウトは、自動方向、間隔、余白の設定によって最適化されています。 この最適化により、StackPanel や Grid などのよりプリミティブなグループ化コントロールを使用する際にプロパティを指定する必要がある場合でも、プロパティを指定する必要がなくなります。

RadioButtons グループ内を移動する

コントロールには、キーボード ユーザーがリストをより迅速かつ簡単に移動するのに役立つ特別なナビゲーション動作があります。

キーボード フォーカス

コントロールは、次の 2 つの状態をサポートします。

• ラジオ ボタンが選択されていない
• 1 つのラジオ ボタンが選択されている

次のセクションでは、各状態におけるコントロールのフォーカス動作について説明します。

ラジオ ボタンが選択されていない

ラジオ ボタンが選択されていない場合、一覧の最初のラジオ ボタンにフォーカスが移動します。

1 つのラジオ ボタンが選択されている

ユーザーがラジオ ボタンが既に選択されているリストに移動すると、選択したラジオ ボタンにフォーカスが移動します。

キーボード ナビゲーション

一般的なキーボード ナビゲーション動作の詳細については、「 キーボード操作 - ナビゲーション」を参照してください。

グループ内の項目に既にフォーカスがある場合、ユーザーはグループ内の項目間の "内部ナビゲーション" に方向キーを使用できます。 上方向キーと下方向キーは、XAML マークアップで定義されている "次" または "前" の論理項目に移動します。 左右の方向キーは空間的に移動します。

単一列レイアウトまたは単一行レイアウト内のナビゲーション

単一列または単一行のレイアウトでは、キーボード ナビゲーションでは次の動作が行われます。

複数列、複数行のレイアウト内のナビゲーション

複数列、複数行のグリッド レイアウトでは、キーボード ナビゲーションによって次の動作が行われます。

左右矢印キー

上方向キーと下方向キー

詳細については、「 キーボード操作」を参照してください。

ラッピング

RadioButtons グループは、最初の行または列から最後の行または列、または最後の行または列から最初の行にフォーカスを折り返しません。 これは、ユーザーがスクリーン リーダーを使用すると、境界感と開始と終了の明確な兆候が失われるため、視覚障;ユーザーがリスト内を移動することが困難になるためです。

コントロールは列挙もサポートしていません。これは、コントロールに適切な数の項目が含まれていることを意図しているためです (「これが適切なコントロールか」を参照してください)。

フォーカスに従った選択

キーボードを使用して グループ内の項目間を移動すると、フォーカスが 1 つの項目から次の項目に移動すると、新しくフォーカスされた項目が選択され、以前にフォーカスされていた項目がクリアされます。

Ctrl + 方向キーを使用して移動することで、選択を変更せずにフォーカスを移動できます。 フォーカスを移動した後は、Space キーを使用して、現在フォーカスがある項目を選択できます。

ゲーム パッドとリモート コントロールを使用したナビゲーション

ゲーム パッドまたはリモート コントロールを使用してラジオ ボタン間を移動する場合は、"フォーカスに従った選択" 動作が無効になり、ユーザーは "A" ボタンを押して、現在フォーカスがあるラジオ ボタンを選択する必要があります。

アクセシビリティの動作

次の表では、ナレーターが グループを処理する方法と、発表される内容について説明します。 この動作は、ユーザーがナレーターの詳細設定をどのように設定したかによって異なります。

WinUI 3 RadioButtons グループを作成する

WinUI 3 ギャラリー アイコン

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

コントロールは、ItemsControl に似たコンテンツ モデルを使用します。 つまり、次のことができます。

• Items コレクションに項目を直接追加するか、ItemsSource プロパティにデータをバインドしてください。
• SelectedIndex プロパティまたは SelectedItem プロパティを使用して、選択されているオプションを取得および設定します。
• SelectionChanged イベントを処理して、オプションが選択されたときにアクションを実行します。

ここでは、3 つのオプションを使用して単純な コントロールを宣言します。 Header プロパティはグループにラベルを付けるために設定され、 プロパティは既定のオプションを提供するように設定されます。

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

結果は次のようになります。

3 つのラジオ ボタンのグループ

ユーザーがオプションを選択したときにアクションを実行するには、SelectionChanged イベント を処理します。 ここでは、"ExampleBorder" () という名前の 要素の背景色を変更します。

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

選択状態

ラジオ ボタンには、選択済みまたはクリア済みの 2 つの状態があります。 グループでオプションを選択すると、SelectedItem プロパティから値を取得し、SelectedIndex プロパティからコレクション内の場所を取得できます。 ユーザーが同じグループ内の別のラジオ ボタンを選択した場合は、ラジオ ボタンをクリアできますが、ユーザーがもう一度選択した場合はクリアできません。 ただし、ラジオ ボタン グループは、 または 設定することで、プログラムによってクリアできます。 ( を コレクションの範囲外の値に設定すると、選択されません)。

RadioButtons コンテンツ

前の例では、 コントロールに単純な文字列を設定しました。 コントロールはラジオ ボタンを提供し、各ボタンのラベルとして文字列を使用しました。

ただし、 コントロールには任意のオブジェクトを設定できます。 通常は、テキスト ラベルとして使用できる文字列表現をオブジェクトに提供する必要があります。 場合によっては、テキストの代わりに画像が適している場合があります。

ここでは、 SymbolIcon 要素を使用してコントロールを設定します。

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

シンボルアイコン付きのグループラジオボタン

個々の RadioButton コントロールを使用して、 項目を設定することもできます。 これは、後で説明する特別なケースです。 RadioButtons グループの RadioButton コントロールを参照してください。

任意のオブジェクトを使用できる利点は、 コントロールをデータ モデルのカスタム型にバインドできることです。 次のセクションでは、これを示します。

データ バインディング

コントロールは、ItemsSource プロパティへのデータ バインディングをサポートしています。 この例では、コントロールをカスタム データ ソースにバインドする方法を示します。 この例の外観と機能は前の背景色の例と同じですが、ここでは、 イベント ハンドラーで作成されるのではなく、データ モデルにカラー ブラシが格納されます。

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage1()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

RadioButtons グループ内の RadioButton コントロール

個々の RadioButton コントロールを使用して、 項目を設定できます。 これを行って、 などの特定のプロパティにaccessを取得したり、既存の コードを持っている場合や、 のレイアウトとナビゲーションを利用したい場合があります。

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

グループで コントロールを使用すると、 コントロールはを表示する方法を認識するため、最終的に 2 つの選択円は表示されません。

ただし、注意する必要がある動作がいくつかあります。 競合を回避するために、個々のコントロールまたは で、両方ではなく状態とイベントを処理することをお勧めします。

次の表に、両方のコントロールの関連イベントとプロパティを示します。

やなど、個々のでイベントを処理し、イベントも処理すると、両方のイベントが発生します。 イベントが最初に発生し、次に イベントが発生し、競合が発生する可能性があります。

、、およびのプロパティは同期された状態を維持します。 1 つのプロパティを変更すると、他の 2 つが更新されます。

RadioButton.GroupName プロパティは無視されます。 グループは、 コントロールによって作成されます。

複数の列の定義

既定では、 コントロールは、ラジオ ボタンを 1 つの列に垂直方向に配置します。 MaxColumns プロパティを設定して、コントロールで複数の列のラジオ ボタンを配置できます。 (これを行うと、項目は上から下へ、次に左から右へと埋められる形で、列優先の順序でレイアウトされます)。

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

2 つの 3 列グループのラジオ ボタン

独自の RadioButton グループを作成する

ラジオ ボタンはグループで動作します。 RadioButton コントロール や を個別にグループ化するには、2 つの方法があります。

• それらを同じ親コンテナー内に配置します。
• 各ラジオ ボタンの GroupName プロパティを同じ値に設定します。

この例では、ラジオ ボタンの最初のグループは、同じスタック パネル内に存在することで暗黙的にグループ化されます。 2 つ目のグループは 2 つのスタック パネルに分割されるため、 を使用して 1 つのグループに明示的にグループ化します。

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "white":
                ExampleBorder.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

コントロールのこの2つのグループは以下のとおりです。

2 つのグループのラジオ ボタン

ラジオ ボタンの状態

ラジオ ボタンには、選択済みまたはクリア済みの 2 つの状態があります。 ラジオ ボタンを選択すると、その IsChecked プロパティが されるようになります。 ラジオ ボタンが解除されると、その プロパティが されます。 ユーザーが同じグループ内の別のラジオ ボタンを選択した場合は、ラジオ ボタンをクリアできますが、ユーザーがもう一度選択した場合はクリアできません。 ただし、 プロパティを に設定することで、ラジオ ボタンをプログラムでクリアできます。

考慮すべきビジュアル

個々の コントロールの既定の間隔は、 グループによって提供される間隔とは異なります。 個々の コントロールに間隔を適用するには、次に示すように、の値を使用します。

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

次の図は、グループ内のラジオ ボタンの優先間隔を示しています。

垂直方向に配置されたラジオ ボタンのセットを示す画像

ラジオ ボタンの間隔ガイドラインを示す画像

関連トピック

• ボタン
• スイッチの切り替え
• のチェック ボックス
• リストとコンボ ボックス
• スライダー
• RadioButtons クラス
• の RadioButton クラス