Xamarin -- Radiobutton visual state doesn't update after setting the value in a viewmodel when-CodePudding

When working with data-binding I've run into an issue where the radiobutton won't update visually, but the value is correct. I have a RadiobuttonGroup.GroupName & a RadioButtonGroup.SelectedValue. The SelectedValue is data-bound to my ViewModel with a {Binding Selection}. Selection is also declared in my ViewModel.

Whenever I change the RadioButton's selection to a button that isn't selected, OnPropertyChanged(); goes off thrice. (I suppose that is due to the fact that there's three buttons in the view, could be wrong here.) Resulting in the value being selected and being handed over to my data-bound Selection. But the visual state of the button doesn't change. The radiobuttons are located in a SfPopupLayout pop-up. It always works as expected the first time the pop-up is initialized and served in the view. But with every subsequent serving, it bugs out visually. Resulting in having to click the radiobutton multiple times to make the visual-state change.

There really isn't much going on, just that Selection is stored in my ViewModel. I've checked the Xamarin-Examples-Demos on GitHub with regards to RadioButtons & data-binding and I'm not able to reproduce the same issues I'm experiencing with the demo.

XAML code snippet;

<StackLayout HeightRequest="160"
             Grid.Row="2"
             RadioButtonGroup.GroupName="WeekSelection"
             RadioButtonGroup.SelectedValue="{Binding Selection}">
                <RadioButton Padding="5"
                             BackgroundColor="{DynamicResource BlockBackgroundColor}"       
                             Content="{markup:Translate Week_Selection}"
                             Value="{markup:Translate Week_Selection}"/>
                <BoxView Style="{StaticResource SeperatorLineStyle}"/>
                <RadioButton Padding="5"
                             BackgroundColor="{DynamicResource BlockBackgroundColor}"
                             Content="{markup:Translate TwoWeek_Selection}"
                             Value="{markup:Translate TwoWeek_Selection}"/>
                <BoxView Style="{StaticResource SeperatorLineStyle}"/>
                <RadioButton Padding="5"
                             BackgroundColor="{DynamicResource BlockBackgroundColor}"
                             Content="{markup:Translate Month_Selection}"
                             Value="{markup:Translate Month_Selection}"/>
                <BoxView Style="{StaticResource SeperatorLineStyle}"/>
</StackLayout>

UPDATE: Seems like it has something to do with switching views. Whenever I go to my settings-page to change the selection of the radiobuttons, OnPropertyChanged(); is only fired once. But whenever I close the view and return to it, it fires it off twice. And subsequently with every switch it increases the amount of times OnPropertyChanged(); is called. Value still works properly, just the visual state isn't updated.

UPDATE 2: I'm pretty sure it has to do with the pop-up that's generated containing the radiobuttons. Here's the code that initializes the pop-up with the radiobuttons in them;

        public void ShowAmountOfWeeksPopup()
        {
            _selectWeeksToViewPopupControl = new SelectWeeksToViewPopupControl(this);
            
            _selectWeeksToViewPopupControl.Show();
        }

        public void DismissAmountOfWeeksPopup()
        { 
            _selectWeeksToViewPopupControl.Dismiss();
        }

FINAL UPDATE:

According to SyncFusion this is a bug, ended up creating a forum post on their support forums and they ended up supplying me with a fix. If anybody ever runs into the same issue, please refer to the following link; https://www.syncfusion.com/forums/171545/radiobuttons-not-working-properly-when-closing-and-re-opening-a-popup

CodePudding user response：

Xamarin -- Radiobutton visual state doesn't update after setting the value in a viewmodel.

I couldn't see other code of your app. So I did a test based on the sample code GroupedRadioButtonsViewModelPage.xaml, but I couldn't reproduce this problem.

You can refer to the following code:

The GroupedRadioButtonsViewModelPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RadioButtonDemos.GroupedRadioButtonsViewModelPage"
             Title="Grouped RadioButtons ViewModel demo">
    <StackLayout Margin="10"
                 RadioButtonGroup.GroupName="{Binding GroupName}"
                 RadioButtonGroup.SelectedValue="{Binding Selection}">
        <Label Text="What's your favorite animal?" />
        <RadioButton Content="Cat"
                     Value="Cat" />
        <RadioButton Content="Dog"
                     Value="Dog" />
        <RadioButton Content="Elephant"
                     Value="Elephant" />
        <RadioButton Content="Monkey"
                     Value="Monkey"/>
        <Label x:Name="animalLabel">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="You have chosen:" />
                    <Span Text="{Binding Selection}" />
                </FormattedString>
            </Label.FormattedText>
        </Label>


        <Button  Text="test"  Clicked="Button_Clicked"/>
    </StackLayout>
</ContentPage>

The GroupedRadioButtonsViewModelPage.xaml.cs

public partial class GroupedRadioButtonsViewModelPage : ContentPage
{

    AnimalViewModel model;
    public GroupedRadioButtonsViewModelPage()
    {
        InitializeComponent();

        model = new AnimalViewModel();
        BindingContext = model;

        //BindingContext = new AnimalViewModel
        //{
        //    GroupName = "animals",
        //    Selection = "Monkey"
        //};
    }

    private void Button_Clicked(object sender, System.EventArgs e)
    {
        model.Selection = "Dog";
    }
}

The AnimalViewModel.cs

public class AnimalViewModel : INotifyPropertyChanged
{
    string groupName;
    object selection;


    public AnimalViewModel() {

        GroupName = "animals";
        Selection = "Elephant";
    }

    public string GroupName
    {
        get => groupName;
        set
        {
            groupName = value;
            OnPropertyChanged(nameof(GroupName));
        }
    }

    public object Selection
    {
        get => selection;
        set
        {
            selection = value;
            OnPropertyChanged(nameof(Selection));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Note:

I added a button, and when clicking the Button, we can change the value of Selection of the ViewModel(AnimalViewModel), then the UI will automatically refresh.