C#WPFの道#15！RadioButtonの書き方と使い方を解説

RadioButton（ラジオボタン）とは
グルーピング
- GroupName
状態
イベント
サンプルコード
- ＜画面イメージ＞

RadioButton（ラジオボタン）とは

RadioButton（ラジオボタン）とは、とあるグループの中から１つの項目を選択させるためのコントロールです。例えば、性別グループの「男性」「女性」「その他」を選ばせるみたいな感じのやつです。

グルーピング

基本的に同一のコンテナ（パネル等）上にあるラジオボタンは同一のグループと認識され、その中の１つの項目のみを選択することができます。

<StackPanel Margin="10">
    <RadioButton x:Name="ARadioButton"
                 Content="AAA" FontSize="20"/>
    <RadioButton x:Name="BRadioButton"
                 Content="BBB"
                 FontSize="20"/>
</StackPanel>

<RadioButton x:Name="ARadioButton"

Content="AAA" FontSize="20"/>

<RadioButton x:Name="BRadioButton"

Content="BBB"

FontSize="20"/>

</StackPanel>

<StackPanel>
	<StackPanel Margin="10">
	    <RadioButton x:Name="ARadioButton"
	                 Content="AAA" FontSize="20"/>
	    <RadioButton x:Name="BRadioButton"
	                 Content="BBB"
	                 FontSize="20"/>
	</StackPanel>

	<StackPanel Margin="10">
	    <RadioButton x:Name="CRadioButton"
	                 Content="CCC" FontSize="20"/>
	    <RadioButton x:Name="DRadioButton" 
	                 Content="DDD" FontSize="20"/>
	</StackPanel>
</StackPanel>

<RadioButton x:Name="ARadioButton"

Content="AAA" FontSize="20"/>

<RadioButton x:Name="BRadioButton"

Content="BBB"

FontSize="20"/>

</StackPanel>

<RadioButton x:Name="CRadioButton"

Content="CCC" FontSize="20"/>

<RadioButton x:Name="DRadioButton"

Content="DDD" FontSize="20"/>

</StackPanel>

パネルを２つに分けたため、AAA、BBBのグループとCCC、DDDのグループで別々に動作します。

GroupName

GroupNameプロパティを指定すると、同一のコンテナ（パネル等）上にあっても、別のグループとして動作させることができます。

<StackPanel Margin="10">
    <RadioButton x:Name="CRadioButton"
                 Content="CCC" FontSize="20"/>
    <RadioButton x:Name="DRadioButton" 
                 Content="DDD" FontSize="20"/>

    <RadioButton x:Name="ERadioButton" 
                 Content="EEE" FontSize="20"
                 GroupName="1"/>
    <RadioButton x:Name="FRadioButton" 
                 Content="FFF" FontSize="20"
                 GroupName="1"/>
</StackPanel>

<RadioButton x:Name="CRadioButton"

Content="CCC" FontSize="20"/>

<RadioButton x:Name="DRadioButton"

Content="DDD" FontSize="20"/>

<RadioButton x:Name="ERadioButton"

Content="EEE" FontSize="20"

GroupName="1"/>

<RadioButton x:Name="FRadioButton"

Content="FFF" FontSize="20"

GroupName="1"/>

</StackPanel>

4つのラジオボタンが同一のパネル上にありますが、EEEとFFFにGroupNameを指定しているため、CCC、DDDのグループと、EEE、FFFのグループは別グループとして動作します。

状態

状態は、チェックボックスと同様にIsCheckedで確認できます。内容はTrue、False、null（未確定）の3種類です。

イベント

イベントはChecked、Uncheckedで通知されます。Indeterminateの通知も受けることができますが、あまり用途はないような気がします。

サンプルコード

<Window x:Class="WPF015.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF015"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <StackPanel>
            <StackPanel Margin="10">
                <RadioButton x:Name="ARadioButton"
                             Content="AAA" FontSize="20"
                             Checked="ARadioButton_Checked"/>
                <RadioButton x:Name="BRadioButton"
                             Content="BBB"
                             FontSize="20"
                             Checked="BRadioButton_Checked"/>
            </StackPanel>

            <StackPanel Margin="10">
                <RadioButton x:Name="CRadioButton"
                             Content="CCC" FontSize="20"
                             Checked="CRadioButton_Checked"/>
                <RadioButton x:Name="DRadioButton" Content="DDD" FontSize="20"
                             Checked="CRadioButton_Checked"/>

                <RadioButton x:Name="ERadioButton" Content="EEE" FontSize="20"
                             GroupName="1"/>
                <RadioButton x:Name="FRadioButton" Content="FFF" FontSize="20"
                             GroupName="1"/>
            </StackPanel>
        </StackPanel>

    </Grid>
</Window>

<Window x:Class="WPF015.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:WPF015"

mc:Ignorable="d"

Title="MainWindow" Height="300" Width="300">

<Grid>

<RadioButton x:Name="ARadioButton"

Content="AAA" FontSize="20"

Checked="ARadioButton_Checked"/>

<RadioButton x:Name="BRadioButton"

Content="BBB"

FontSize="20"

Checked="BRadioButton_Checked"/>

</StackPanel>

<RadioButton x:Name="CRadioButton"

Content="CCC" FontSize="20"

Checked="CRadioButton_Checked"/>

<RadioButton x:Name="DRadioButton" Content="DDD" FontSize="20"

Checked="CRadioButton_Checked"/>

<RadioButton x:Name="ERadioButton" Content="EEE" FontSize="20"

GroupName="1"/>

<RadioButton x:Name="FRadioButton" Content="FFF" FontSize="20"

GroupName="1"/>

</StackPanel>

</Grid>

</Window>

AAAとBBBはそれぞれにCheckedイベントを実装。CCC、DDDはCRadioButton_Checkedという同じCheckedイベントを実装。

using System.Windows;
using System.Windows.Controls;

namespace WPF015
{
    ///
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ARadioButton_Checked(object sender, RoutedEventArgs e)
        {

        }

        private void BRadioButton_Checked(object sender, RoutedEventArgs e)
        {

        }

        private void CRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            var radioButton = sender as RadioButton;
            if(radioButton == CRadioButton)
            {

            }
            else if(radioButton == DRadioButton)
            {

            }
        }
    }
}

using System.Windows;

using System.Windows.Controls;

namespace WPF015

{

///

/// MainWindow.xaml の相互作用ロジック

///

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void ARadioButton_Checked(object sender, RoutedEventArgs e)

{

}

private void BRadioButton_Checked(object sender, RoutedEventArgs e)

{

}

private void CRadioButton_Checked(object sender, RoutedEventArgs e)

{

var radioButton = sender as RadioButton;

if(radioButton == CRadioButton)

{

}

else if(radioButton == DRadioButton)

{

}

ARadioButtonとBRadioButtonはそれぞれのCheckedイベントにチェック状態になると通知されますが、CRadioButtonとDRadioButtonは同一のCRadioButton_Checkedに通知されるため、イベントの中で、どちらの通知かを判断して処理をすることができます。

＜画面イメージ＞

WPFの道！

C#を正しい3層構造で造れてますか？

非売品コースを受け取る