radiobuttons in a datatemplate in silverlight 4

Posted by Karim on March 08, 2009

I was recently asked by a customer, “Why doesn’t RadioButton.GroupName work when a single RadioButton is put in a DataTemplate within an ItemsControl?” I had no answer. When I tried it out myself, lo and behold, two checked RadioButtons were staring back at me. A quick search told me that others have encountered this issue, and none had found a solution based in markup.

To illustrate the mechanics of Attached Behaviors, a topic that I had been reviewing with my customer, I decided to implement a working RadioButtonGroup as one. Simply use the attached property in place of RadioButton.GroupName, and the behavior takes care of the rest.

<ItemsControl ItemsSource="{Binding DataCollection}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <RadioButton Content="{Binding Name}"
                   b:RadioButtonGroup.Name="1"/>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

One interesting detail about my implementation: It can be used with ToggleButtons to achieve RadioButton-like behavior.

The solution source is available here. Feedback welcome.

Side note: Using reflector, I noticed that although RadioButton has all the necessary plumbing to group arbitrary radio buttons (and that code is remarkably similar to how a standard attachedbehavior is implemented), it relied on the “Logical Tree”, FrameworkElement.Parent, to scope group names to a common root node. One side effect of using ItemsControl is that the ContentPresenters used to show an item’s DataTemplate are severed from their parents. Parent is always null. This attached behavior doesn’t use that, and in fact it does not scope the group Names at all, so be sure to choose unique names.

Enjoy!

Trackbacks

Trackbacks are closed.

Comments

Comments are closed.

  1. mfbeast Wed, 10 Feb 2010 03:54:53 UTC

    Thanks for your post, that behavior for toggle buttons is just what i was looking for.

    And a comment: the unobvious thing with toggle buttons is that you can untoggle it, and the whole group won’t have any toggled buttons, and in case that’s not the desired behavior the workaround would be an unchecked event handler:

    private static void OnUnchecked(object sender, RoutedEventArgs e)
    {
    ToggleButton btn = (ToggleButton)sender;
    btn.Checked -= OnChecked;
    btn.IsChecked = true;
    btn.Checked += OnChecked;
    }

    and in UpdateRadioButtonGroup:
    in the beginning:
    toggleButton.Unchecked += OnUnchecked;
    near the unchecking of current checked button:
    target.Unchecked -= OnUnchecked;
    target.IsChecked = false;

  2. Bob Tue, 29 Mar 2011 11:09:10 UTC

    Hey Karim, thanks for this, unfortunately it hasn’t solved a problem that I am having with Radiobuttons – if you change your sample to use two radiobutton lists instead of a radio button list and a toggle button list, it no longer works – you cannot select a radio button from each group. Any ideas about how to solve that problem?
    Thanks,
    Bob

  3. Praneeth Thu, 29 Sep 2011 05:47:01 UTC

    It dint work for me too.

  4. Ganesh Sat, 29 Oct 2011 20:06:35 UTC

    Hi,
    The solution will not work if you have two sets of radio buttons in that case the groupnames should be different. If you generating the controls dynamically give group name unique groupnames to the set then it will work.

    Thanks,
    Ganesh