Binding Radio Buttons Using Group Property in WPF

Introduction

While building a user interface for things like an options dialog, you may want to represent a Boolean, enumeration, and sometimes an integer or string property with a group of radio buttons.

Background

I studied and tried using a converter. 

The Solution

We will need to  use a converter parameter to specify which value a radio button corresponds to. If your property equals this value then this button will be checked and other buttons unchecked. This solution works regardless whether you set the GroupName property or not, though you should normally set it.

The following is an example of how to do this in XAML for a Boolean property.

Step 1

First we will make a Class then create boolean variables for true/false that are the available options.

After this, we will create a class TestOPtions of which the object named options is set to null as in the following:

namespace Sample_RadioBoxCheckedConverter

{

    using System;

    using System.Windows;

    using System.Windows.Data;

 

     public partial class MainWindow : Window

    {

        public static bool BooleanTrue = true;

        public static bool BooleanFalse = false;

 

        private TestOptions options = null;

      } 

Step 2
 
Now create a constructor of the class MainWindow.
 
We are setting the BooleanProperty to the default value "true" and also set the enum property to opt3 that is the default one using the this keyword.
 
The options will be collected to the DataContext class.

        public MainWindow()

        {

            InitializeComponent();

 

            this.options = new TestOptions();

            this.options.BooleanProperty = true;

            this.options.EnumProperty = TestEnum.Opt3;

            this.DataContext = this.options;

        } 

Step 3

On the Button_Click event, the message box will appear in which the boolean property and enum property will be shown in string format.

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            MessageBox.Show(string.Format("Boolean property: {0}, enum property: {1}.",
             
this.options.BooleanProperty, this.options.EnumProperty));

        }

    }

 

Step 4

The enum keyword is used to declare an enumeration, a distinct type that consists of a set of named constants called the enumerator list. So we will declare a testenum class on enum and add the attributes of enumclass that are obviously "options" like opt1, opt2 and opt3.

    public enum TestEnum

    {

        Opt1,

        Opt2,

        Opt3

    }

Step 5

Now here we will be creating a TestOptions class and declare the getter and setter methods for enumproperty and boolean property.

    public class TestOptions

    {

        public TestEnum EnumProperty { getset; }

        public bool BooleanProperty { getset; }

    }

 

Step 6

We will make a class RadioButtonCheckedConverter extending the IvalueConverter class.
 

    public class RadioButtonCheckedConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter,

            System.Globalization.CultureInfo culture)

        {

            return value.Equals(parameter);

        }

 

        public object ConvertBack(object value, Type targetType, object parameter,

            System.Globalization.CultureInfo culture)

        {

            return value.Equals(true) ? parameter : Binding.DoNothing;

        }

    }

}

I defined two static Boolean members in the class so I can use the static binding in XAML. Alternatively, you can set the Converter Parameter.

Here is an example of an enumeration:

<Window x:Class="Sample_RadioBoxCheckedConverter.MainWindow"

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

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

        xmlns:src="clr-namespace:Sample_RadioBoxCheckedConverter"

        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <ObjectDataProvider x:Key="FindCriteria" ObjectType="{x:Type src:TestOptions}" />

        <src:RadioButtonCheckedConverter x:Key="RadioButtonCheckedConverter" />

    </Window.Resources>

    <Grid  Margin="10,10,10,10">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="auto"/>

                <RowDefinition Height="auto"/>

                <RowDefinition Height="auto"/>

            </Grid.RowDefinitions>

            <TextBlock Margin="0,10" FontWeight="Bold" Text="Choose Gender" />

            <RadioButton GroupName="group1" Grid.Row="1" Margin="0,5" 

                            IsChecked="{Binding BooleanProperty, Converter={StaticResource RadioButtonCheckedConverter}, 

                            ConverterParameter={x:Static src:MainWindow.BooleanTrue}}">

                <TextBlock TextWrapping="Wrap" Text="Male" />

            </RadioButton>

            <RadioButton GroupName="group1" Grid.Row="2" Margin="0,5" 

                            IsChecked="{Binding BooleanProperty, Converter={StaticResource RadioButtonCheckedConverter}, 

                            ConverterParameter={x:Static src:MainWindow.BooleanFalse}}">

                <TextBlock TextWrapping="Wrap" Text="Female"/>

            </RadioButton>

        </Grid>

        <Grid Grid.Row="1">

            <Grid.RowDefinitions>

                <RowDefinition Height="auto"/>

                <RowDefinition Height="auto"/>

                <RowDefinition Height="auto"/>

                <RowDefinition Height="auto"/>

            </Grid.RowDefinitions>

            <TextBlock Margin="0,10" FontWeight="Bold" Text="No. of Books" />

            <RadioButton GroupName="group2" Grid.Row="1" Margin="0,5" 

                            IsChecked="{Binding EnumProperty, Converter={StaticResource RadioButtonCheckedConverter}, 

                            ConverterParameter={x:Static src:TestEnum.Opt1}}">

                <TextBlock TextWrapping="Wrap" Text="1" />

            </RadioButton>

            <RadioButton GroupName="group2" Grid.Row="2" Margin="0,5" 

                            IsChecked="{Binding EnumProperty, Converter={StaticResource RadioButtonCheckedConverter}, 

                            ConverterParameter={x:Static src:TestEnum.Opt2}}">

                <TextBlock TextWrapping="Wrap" Text="2"/>

            </RadioButton>

            <RadioButton GroupName="group2" Grid.Row="3" Margin="0,5" 

                            IsChecked="{Binding EnumProperty, Converter={StaticResource RadioButtonCheckedConverter}, 

                            ConverterParameter={x:Static src:TestEnum.Opt3}}">

                <TextBlock TextWrapping="Wrap" Text="3"/>

            </RadioButton>

            

        </Grid>

        <Button Grid.Row="2" Content="Test Binding" HorizontalAlignment="Right" Height="27"
       
 VerticalAlignment="Bottom" Width="100" Click="Button_Click"/>

    </Grid>

</Window>

    }

Output
 
On running the application you will get an output window like this one:
 
Binding in WPF
 
By default two check boxes will be checked since they were declared  in the coding part. Now I am clicking on the button:
 
Binding in WPF
 
On the click of the button an output window will be displayed that will show the checked checkbox name:
 
Binding in WPF
 

Up Next
    Ebook Download
    View all
    Learn
    View all