Selected radio button is changed when selected tab is changed

Question

I have a tab control bound to an observable collection. Each tab displays a single radio button group. When the tab is changed, for some reason it deselects the selected radio button.

Each item in the observable collection stores the selected radio button for its own tab. I believe this means they can't interfere with each other. I also recognize that only one radio button can be selected per group. Yet, each tab is in its own group. Why is the selected radio button being changed when the tab changes?

XAML

<TabControl x:Name="MainTabControl" >
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TabName}"></TextBlock>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <RadioButton x:Name="RadioButtonX"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Content="X"
                             IsChecked="{Binding XChecked}" />
                <RadioButton x:Name="RadioButtonY"
                             Grid.Column="1"
                             VerticalAlignment="Center"
                             Content="Y"
                             IsChecked="{Binding YChecked}" />
                <RadioButton x:Name="RadioButtonZ"
                             Grid.Column="2"
                             VerticalAlignment="Center"
                             Content="Z"
                             IsChecked="{Binding ZChecked}" />
            </Grid>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

C#

public partial class MainWindow
{
    public ObservableCollection<RadioButtonSettings> listOfButtonSettings { get; set; }

    public MainWindow()
    {
        listOfButtonSettings = new ObservableCollection<RadioButtonSettings>
        {
            new RadioButtonSettings {TabName = "tab1"},
            new RadioButtonSettings {TabName = "tab2"},
            new RadioButtonSettings {TabName = "tab3"}
        };

        InitializeComponent();
       MainTabControl.ItemsSource = listOfButtonSettings;
    }
}

public class RadioButtonSettings
{
    public string TabName { get; set; }
    public bool XChecked { get; set; }
    public bool YChecked { get; set; }
    public bool ZChecked { get; set; }

    public RadioButtonSettings()
    {
        XChecked = true;
    }
}

Toby Crawford Toby Crawford · Accepted Answer · 2015-03-20T23:05:32

This issue is described here

The workaround is to use the RadioButtonExtended class as written in the above link. You can then change your XAML to the following and it will work as expected:

 <RadioButtonExtended x:Name="RadioButtonX"
     Grid.Column="0"
     VerticalAlignment="Center"
     Content="X"
     IsCheckedReal="{Binding XChecked}" />
 <RadioButtonExtended x:Name="RadioButtonY"
     Grid.Column="1"
     VerticalAlignment="Center"
     Content="Y"
     IsCheckedReal="{Binding YChecked}" />
 <RadioButtonExtended x:Name="RadioButtonZ"
     Grid.Column="2"
     VerticalAlignment="Center"
     Content="Z"
     IsCheckedReal="{Binding ZChecked}" />

Selected radio button is changed when selected tab is changed

2 Answers