Question

I’m having an issue with the RadioButton when using a reusable UserControl. For some reason I am unable to check a radio button of each ‘Chooser’ control but instead when one radio button is checked, all other radio buttons in the current chooser and in the other choosers are unchecked. Does anyone know how to change this code so that I can have a checked item in each ‘chooser’ user control. The user control must be able to be dynamically built using a collection. In a real world example, each ‘chooser’ usercontrol will have different text values.

MainPage.xaml

<StackPanel x:Name="LayoutRoot" Background="White">
    <radioButtonTest:Chooser />
    <radioButtonTest:Chooser />
    <radioButtonTest:Chooser />
</StackPanel>

Chooser.xaml

<UserControl x:Class="RadioButtonTest.Chooser"
    xmlns ...>

    <StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
        <TextBlock x:Name="MyLabel" Text="Choices:" VerticalAlignment="Center" Margin="0,0,10,0" />
        <ItemsControl x:Name="MyChooser" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <RadioButton Height="22" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="{Binding}" MinWidth="35" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</UserControl>

Chooser.xaml.cs

public partial class Chooser
{
    public Chooser()
    {
        InitializeComponent();

        // adding some test items to the itemscontrol
        MyChooser.ItemsSource = new ObservableCollection<string>
                                    {
                                        "first",
                                        "second",
                                        "third"
                                    };
    }
}

Answer 1

Turns out I needed to use the GroupName property of the RadioButton to dictate the groupings. I did this by changing the item source to a custom class with a Group property of type string and binding this property to the GroupName property on the RadioButton.

XAML:

<DataTemplate>
    <RadioButton ... Content="{Binding Name}" GroupName="{Binding Group}" />
</DataTemplate>

C#:

public Chooser()
{
    InitializeComponent();

    // the groupName needs to be the same for each item 
    // in the radio group, but unique for each separate group.
    var groupName = Guid.NewGuid().ToString();
    MyChooser.ItemsSource = new ObservableCollection<RadioButtonGroupItem>
        {
            new RadioButtonGroupItem {Group = groupName, Name = "first"},
            new RadioButtonGroupItem {Group = groupName, Name = "second"},
            new RadioButtonGroupItem {Group = groupName, Name = "third"}
        };
}

public class RadioButtonGroupItem
{
    public string Name { get; set; }
    public string Group { get; set; }
}

Hope this helps someone.