Bookmark and Share Share...    Subscribe to this feed Feed   About me...


Radio Button

Introduction

The RadioButton control has its name from old analog radios which had a number of programmable station buttons. When you pushed one in, the previosly selected poped out. So only one station can be selected at a time.

The RadioButton control has the same behavior. It lets the user choose one option out of a few. It the list of options gets longer, you should prefer a combo or list box instead.

To define which RadioButtons belong togehter, you have to set the GroupName to the same name.

To preselect one option set the IsChecked property to True.


 
<StackPanel>
    <RadioButton GroupName="Os" Content="Windows XP" IsChecked="True"/>
    <RadioButton GroupName="Os" Content="Windows Vista" />
    <RadioButton GroupName="Os" Content="Windows 7" />
    <RadioButton GroupName="Office" Content="Microsoft Office 2007" IsChecked="True"/>
    <RadioButton GroupName="Office" Content="Microsoft Office 2003"/>
    <RadioButton GroupName="Office" Content="Open Office"/>
</StackPanel>
 
 

How to DataBind Radio Buttons in WPF

The radio button control has a known issue with data binding. If you bind the IsChecked property to a boolean and check the RadioButton, the value gets True. But when you check another RadioButton, the databound value still remains true.

The reason for this is, that the Binding gets lost during the unchecking, because the controls internally calls ClearValue() on the dependency property.

 
<Window.Resources>
   <EnumMatchToBooleanConverter x:Key="enumConverter" />
</Window.Resources>
 
 
<RadioButton Content="Option 1" GroupName="Options1" 
             IsChecked="{Binding Path=CurrentOption, Mode=TwoWay, 
                                 Converter={StaticResource enumConverter},
                                 ConverterParameter=Option1}"  />
<RadioButton Content="Option 2" GroupName="Options2" 
             IsChecked="{Binding Path=CurrentOption, Mode=TwoWay, 
                                 Converter={StaticResource enumConverter},
                                 ConverterParameter=Option2}"  />
<RadioButton Content="Option 3" GroupName="Options3" 
             IsChecked="{Binding Path=CurrentOption, Mode=TwoWay, 
                                 Converter={StaticResource enumConverter},
                                 ConverterParameter=Option3}"  />
 
 
 
public class EnumMatchToBooleanConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
                              object parameter, CultureInfo culture)
        {
            if (value == null || parameter == null)
                return false;
 
            string checkValue = value.ToString();
            string targetValue = parameter.ToString();
            return checkValue.Equals(targetValue, 
                     StringComparison.InvariantCultureIgnoreCase);
        }
 
        public object ConvertBack(object value, Type targetType, 
                                  object parameter, CultureInfo culture)
        {
            if (value == null || parameter == null)
                return null;
 
            bool useValue = (bool)value;
            string targetValue = parameter.ToString();
            if (useValue)
                return Enum.Parse(targetType, targetValue);
 
            return null;
        }
    }   
 
 



 Comments on this article

Show all comments
Jaydev
Commented on 4.January 2010
How to place multuple other controls in Groupbox in combined group
su
Commented on 5.January 2010
Thanks, Jack & Robert for clarifying. :)
MasterShake
Commented on 21.January 2010
Amazing how everyone wants everything for free. If you don't understand what is going on here - there are plenty of books available for purchase. But no, tell me now what I want dammit!!!!
Adam
Commented on 2.February 2010
This isn't clear if you're new to WPF. If you understand something about data binding and value converters, this is certainly clear. However, the GroupName should be the same on all the radio buttons.
Hoa Nguyen
Commented on 3.February 2010
It's usefule. It works for me.
Great thanks
Monir Sabbagh
Commented on 4.February 2010
It is confusing bcz there is a well-known issue with WPF RadioButton controls with data binding (when a radio button is unchecked the data binding is not undone). There are several solutions to this issue, this blog explains a good one, so it put each radio button in a different group and link their checked/unchecked values via the converter.
Monir Sabbagh
Commented on 4.February 2010
It is confusing bcz there is a well-known issue with WPF RadioButton controls with data binding (when a radio button is unchecked the data binding is not undone). There are several solutions to this issue, this blog explains a good one, so it put each radio button in a different group and link their checked/unchecked values via the converter.
Avelino
Commented on 20.February 2010
Thanks Christian. It seemed a little bit confusing to me at the beginning, but finally I understood. Very useful information.
In certain way I agree with pepe. :-)
Ashar
Commented on 22.February 2010
Thanks Christian.

This is indeed a very helpful post. The radio button group names are differnt since there seems to be a "bug" in WPF due to which when the value of the enum to which our radio buttons are bound is changed from the code the radio buttons seem to loose their binding. But when you change the group names then the binding seems to hold perfectly.

Hope MS will take care of this in next version of WPF.
Vlady
Commented on 8.March 2010
Great sample, works fine !
Carlos
Commented on 8.March 2010
Thank you, this example is just what I needed and nothing more. The people who don't understand need more background reading. Perhaps read about MVVM so the binding, converter make sense.
Andreas
Commented on 18.March 2010
This tutorial is worth pure gold! Just what I needed.
Olion242
Commented on 2.April 2010
Very good! Just what I needed.
Praveen
Commented on 11.May 2010
Amazaed to see so many dumb People. They are reading this and they dont know what data binding is.

It would have been better for lame user to understand if it had the solution/source code file with this in zip.
Praveen
Commented on 11.May 2010
Amazaed to see so many dumb People. They are reading this and they dont know what data binding is.

It would have been better for lame user to understand if it had the solution/source code file with this in zip.
Danube210
Commented on 12.May 2010
Thanks Robert and Adam for making it work :)
rahul bhojane
Commented on 3.June 2010
It's usefule. but not details explination
Great thanks

Caleb
Commented on 5.June 2010
Uh... to all the people saying "if people don't understand, too bad, figure it out yourself"

This is a TUTORIAL. The purpose of which is to teach. If it doesn't fulfill it's purpose, whats the point? If you're so smart, why are you looking up tutorials? Shouldn't you all "figure it out yourself"?
Robert
Commented on 14.June 2010
This worked well for me. You just have to remember to fire a PropChanged event in the set path of CurrentOption property (which is of type enum and not string as suggested, above).
atul
Commented on 16.June 2010
Hi can any one tell me how to enable/disable a button by select a checkbox. :)
Phill
Commented on 24.June 2010
This was very useful.

Effectively the built-in radiobutton functionality is not used at all really (the radiobuttons are all in their own group and the mutual exclusivity is an effect of the binding).

In the end I varied from the example a bit in that I found it safer to isolate each RadioButton from the others by putting each within its own parent (ie each in its own StackPanel) and not setting a GroupName at all. The use of GroupName was an issue for me when multiple copies of the same view where shown within a docking window...ie the radiobuttons from different view instances were interfering with each other.. this is not an issue when using a different parent for each radiobutton as a means of seperating them into different groups...
Alexander B
Commented on 19.July 2010
I am terribly confused by this tutorial. I followed the instructions exactly, but my databound value is not being updated when the radio buttons are clicked. Similarly, when I set all of the Group names to be identical, the unselected radio buttons become red bordered.
Todd Fisher
Commented on 26.August 2010
I believe one issue with having to use multiple group names is that the tabbing behavior does not operate correctly. If one of the radio buttons is set, the tab key should move you out of the group. However, since we have mutiple group names, we move to the next radio button.
swapnil
Commented on 30.August 2010
Hi,

Got the things implemented in tutorial.
Can we pass the content of radio button to converter class some how?
My requirement is that i want to get text of radiobutton just checked in the view model
Please help me out with this.
Thanks in advance.
Swapnil


swapnil
Commented on 30.August 2010
Hi,

Got the things implemented in tutorial.
Can we pass the content of radio button to converter class some how?
My requirement is that i want to get text of radiobutton just checked in the view model
Please help me out with this.
Thanks in advance.
Swapnil



Name
E-Mail (optional)
Comment
About Christian Moser