Binding IsChecked property of RadioButton inside ItemsControl

Question

I have ItemsControls with items binded from CollectionViewSource.

    <ItemsControl ItemsSource="{Binding Source={StaticResource VisibleFlagsImageSourcePathView}}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <r:RibbonRadioButton SmallImageSource="{Binding}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

And another control outsite:

<TextBox Text="{Binding Path=SelectedCountryCode" />

What I am trying to accomplish is whenever I change the value of the TextBox I want the corresponding RibbonRadioButton property IsChecked set to true or false.

Why would you want a radio button and a text box that control the same thing? Are you allowed to have values that don't appear in the list of radio buttons? — Merlyn Morgan-Graham, May 04 '11 at 22:25

score 0 · Answer 1 · answered Jan 27 '11 at 10:18

What you need to do is create a ViewModel with two properties.

class MyViewModel
{
    // Bind this to TextBox
    public String SelectedCountryCode { get; set; }

    // Bind this to ItemsControl
    public ObservableCollection<Object> VisibleFlagsImageSourcePath { get; set; }
}
// Note I have omitted implementation of `INotifyPropertyChanged`. But, you will need to implement it.

And monitor the SelectedCountryCode, and whenever it changes, change appropriate value in VisibleFlagsImageSourcePath collection.

Ok, assuming SelectedCountryCode is set to "EN". How can I find appropriate RibbonRadioButton which corresponds to ImageSource "flag_english" and make it IsChecked? — brooNo, Jan 27 '11 at 15:03

score 0 · Answer 2 · edited May 23 '17 at 10:24

Radio buttons represent enumerated values. A text box in this case would represent an open value. What you seem to want is a set of open values as well as a pre-set selection of enumerated values. The control that best represents this is a combo box.

If you decide to continue with the radio button/text box approach, you can adapt the method people use to bind radio buttons to an enumerated value, except use a string field/string field type converter instead of an enum field/enum field type converter.

See this answer for how to bind to enums: How to bind RadioButtons to an enum?

To adapt this to strings, simply make a class called KnownStringToBooleanConverter (note that this is an identical implementation to EnumToBooleanConverter):

public class KnownStringToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value.Equals(parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value.Equals(true) ? parameter : Binding.DoNothing;
    }
}

Also create a type with your known strings (similar to how you would create an enum):

public static class KnownCountryCodes
{
    // Note: I'm guessing at these codes...
    public const string England = "EN";
    public const string Japan = "JP";
}

Then bind to this in a similar way:

<RadioButton IsChecked="{Binding Path=SelectedCountryCode, Converter={StaticResource KnownStringToBooleanConverter}, ConverterParameter={x:Static local:KnownCountryCodes.England}}" />
<RadioButton IsChecked="{Binding Path=SelectedCountryCode, Converter={StaticResource KnownStringToBooleanConverter}, ConverterParameter={x:Static local:KnownCountryCodes.Japan}}" />

If you want all your controls to cross-populate, then you'll need to implement INotifyPropertyChanged in your view model:

public class MyViewModel : INotifyPropertyChanged
{
    // Bind this to TextBox and radio buttons.  Populate the radio buttons manually
    public string SelectedCountryCode
    {
        get
        {
            return selectedCountryCode;
        }
        set
        {
            selectedCountryCode = value;
            RaiseNotifyPropertyChanged("SelectedCountryCode");
        }
    }

    /* Todo: Implement NotifyPropertyChanged and RaiseNotifyPropertyChanged here */

    private string selectedCountryCode;
}

When a custom value (that isn't in the list) is entered, the radio buttons will all dim. When you type in a value that is from the list, the corresponding radio button will light up. When you select a correct radio button, the value will be changed in the text box.

This View/ViewModel stuff is called MVVM. See: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

Binding IsChecked property of RadioButton inside ItemsControl

2 Answers2