RadioButton and IsThreeState

21 Oct

CheckBox and RadioButton both inherit from ToggleButton. ToggleButton contain a bool property called IsThreeState. It enables the control to have three different values: true, false and null. This functionality is handled automatically by the CheckBox control:

2010-10-21_214156

It’s a different story for the RadioButton control. Actually it’s against the nature of a RadioButton to hold a null value and to be able to uncheck it once it’s checked (unless another RadioButton is checked). It’s the same reason that we will never be able to set the IsChecked value to null by clicking it but only by setting it initially.

Even though it’s not logical it’s possible to achieve the same functionality in a RadioButton control as a CheckBox control. First step is to create a new custom control and inherit from RadioButton. Second step is to override the OnClick eventhandler. In the OnClick eventhandler we need to manually handle the three steps that IsChecked can achieve. Finally we need to create a custom style that is set in the constructor.

2010-10-21_220020

In the ControlTemplate we have to implement the visual elements that should be shown when the RadioButton is in indeterminate state.

With the style in place we now have the full IsThreeState functionality:

2010-10-21_220358

You can download the sample project here: http://bit.ly/ajSdEj

by xamlgeek
twitter.com/thomasmartinsen

3 Responses to “RadioButton and IsThreeState”

  1. Roby Kaufman August 20, 2012 at 19:58 #

    Good post. I found it useful as I have a client application with the need to input scores for a test given on paper to the system. I needed both the functionality of a radio button and a checkbox at the same time. I overrode the OnMouseLeftButtonDown event however as I had a command bound to the click event. I also need to override the OnClick event to prevent the default functionality from changing the IsChecked property back to its bound value. In the override I just called execute on the Command and passed it the CommandParameter.
    Great Job!

    • Roby Kaufman August 20, 2012 at 20:09 #

      Ok, as i was reading what I had posted and did I thought how stupid of me to override both methods. I refactored my code and moved all of the code from the mouse event to the click event and it works the same. I hate it when I think like that.

      Good job still even though someone like me can dork it up.

  2. malky August 30, 2012 at 12:38 #

    This solution does break the RadioGroup functionalty which is the core of the radiobutton. Shame.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: