Prism MVVM Application - Radio Buttons Scope

Question

I'm working on a WPF application using Prism - MVVM.

One of my views is AddPerson, and there I have 3 radio buttons associated with the same group: Gender.

When I click on the menu- Add Person, a view is opened in my shell's content region. If I click again, a new instance of the view is opened in a new tab. But here is a problem with the radio buttons:

Suppose, I'm located on View X1: I choose Female. Then, I go to a view located on another Tab: View X2, and there I select Male. Then I return to the tab of View X1, and I discover that none of radio buttons are selected (the Female selection dissapeared).

I wander how can I solve it? I have a hint that it can be done with "Attached Property". I need to create an object that will allow for a regular radio button to define its group in such a way that it will be unique to every instance of the view. But how exactly can it be done? Thanks for any help.

<RadioButton x:Name="maleRadioBtn" GroupName="GenderGroup" Content="Male" Margin="278,344,436,122" FontSize="16" IsChecked="{Binding GenderOptions, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Male}" IsEnabled="{Binding Path=DisplayMode, Converter={StaticResource inverseBooleanConverter}}"/>



<RadioButton x:Name="femaleRadioBtn" GroupName="GenderGroup" Content="Female" Margin="396,344,300,122" FontSize="16" IsChecked="{Binding GenderOptions, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Female}" IsEnabled="{Binding Path=DisplayMode, Converter={StaticResource inverseBooleanConverter}}"/>



<RadioButton x:Name="Unknown" GroupName="GenderGroup" Content="Unknown" Margin="541,344,145,122" FontSize="16" IsChecked="{Binding GenderOptions, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Unknown}" IsEnabled="{Binding Path=DisplayMode, Converter={StaticResource inverseBooleanConverter}}"/>

GenderOptions property is per instance right? i.e each instance of view has its own instance of GenderOptions? — Nitin, Jun 18 '14 at 06:44
GenderOption is an enum I've created residing in my corresponding viewModel. GenderOption is a property of the viewModel, so it is per instance of the view model. — Cod Fish, Jun 18 '14 at 06:52

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

You seem to be under some confusion regarding how to data bind to RadioButtons using an enum. You appear to have almost got what you need to do, but your last part might be incorrect. If you want to data bind to these RadioButtons and have different selections made on each TabItem, then you need to use one separate enum property for each TabItem. You said:

GenderOption is a property of the viewModel, so it is per instance of the view model

This would be ok if you have a separate view model for each TabItem. If not, then you'll need to add some more enum properties for the other TabItems. Just to ensure that your other code is correct, please see the working example in the How to bind RadioButtons to an enum? question here on Stack Overflow. Please let me know if you are still having problems.

edited May 23 '17 at 12:21

Community

1
1

answered Jun 18 '14 at 08:23

Sheridan

68,826
24
143
183

The link you have provided me is exactly the one I used when I implemented the binding between radio buttons and enum. The problem is that when two tabs are opened, it assiciates the radio buttons as if there are 6 radio button in the group: GenderGroup. Again, I know that the solution involves Attached properties. – Cod Fish Jun 18 '14 at 08:49
I've found an excellent article that has solved my problem, http://www.interact-sw.co.uk/iangblog/2010/11/15/radio-groupname-scope – Cod Fish Jun 18 '14 at 18:11
Perhaps you'd be good enough to add that into an answer (preferably with a description and maybe even code example) and accept it, so that this question can be marked as answered? – Sheridan Jun 19 '14 at 08:03

score 0 · Accepted Answer · answered Jun 21 '14 at 08:24

Better Explanation of the problem:

if you use the GroupName property on some radio buttons in a user control, and you use that user control more than once in the same window, the radio buttons form a single group across the whole window—they are not scoped to the user control as you might expect. you will find that the radio buttons don’t group by user control. They form one group that spans all the user controls.

Solution: With Attached Properties:

I've written the following classes:

public class LocalName
{
    public static string GetBaseName(FrameworkElement obj)
    {
        return (string)obj.GetValue(BaseNameProperty);
    }

    public static void SetBaseName(FrameworkElement obj, string value)
    {
        obj.SetValue(BaseNameProperty, value);
    }

    public static readonly DependencyProperty BaseNameProperty =
        DependencyProperty.RegisterAttached("BaseName", typeof(string),
        typeof(LocalName),
        new FrameworkPropertyMetadata(null,
            FrameworkPropertyMetadataOptions.Inherits));
}

public class LocalNameExtension : MarkupExtension
{
    private string _qualifier;

    public LocalNameExtension()
    {
    }
    public LocalNameExtension(string qualifier)
    {
        _qualifier = qualifier;
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var targetProvider = (IProvideValueTarget)
            serviceProvider.GetService(typeof(IProvideValueTarget));
        var target = (FrameworkElement)targetProvider.TargetObject;

        string name = LocalName.GetBaseName(target);
        if (_qualifier != null) { name += _qualifier; }
        return name;
    }

public class UniqueNameExtension : MarkupExtension
{
    private string _name;
    public UniqueNameExtension()
    {
        _name = Guid.NewGuid().ToString("N");
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return _name;
    }
}

And then in my Xaml described in the question:

<Grid scope:LocalName.BaseName="{scope:UniqueName}">
<RadioButton x:Name="maleRadioBtn" GroupName="{scope:LocalName GenderGroup}" Content="Male" Margin="278,344,436,122" FontSize="16" IsChecked="{Binding GenderOptions, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Male}" IsEnabled="{Binding Path=DisplayMode, Converter={StaticResource inverseBooleanConverter}}"/>
    <RadioButton x:Name="femaleRadioBtn" GroupName="{scope:LocalName GenderGroup}" Content="Female" Margin="396,344,300,122" FontSize="16" IsChecked="{Binding GenderOptions, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Female}" IsEnabled="{Binding Path=DisplayMode, Converter={StaticResource inverseBooleanConverter}}"/>
    <RadioButton x:Name="Unknown" GroupName="{scope:LocalName GenderGroup}" Content="Unknown" Margin="541,344,145,122" FontSize="16" IsChecked="{Binding GenderOptions, Converter={StaticResource enumBooleanConverter}, ConverterParameter=Unknown}" IsEnabled="{Binding Path=DisplayMode, Converter={StaticResource inverseBooleanConverter}}"/>

Now, For example: on a particular instance of the user control the base name ended up as “a6b9345b660a4f248b5b5232a48ab653” and so we’d get a name of “a6b9345b660a4f248b5b5232a48ab653Letter” on this particular radio button.

This is how the we get distinct groups of radio buttons for each instance of the user control.

Note: I did not came up with this answer by myself, the following great article helped me:

http://www.interact-sw.co.uk/iangblog/2010/11/15/radio-groupname-scope

Prism MVVM Application - Radio Buttons Scope

2 Answers2