MAUI RadioButton CheckedChanged with MVVM

Question

In .NET 7, I am trying to send an API request for saving settings choices but I am having some trouble with the events with radio buttons. I want the RelayCommand method (or at least only the contents of the method if I would need to do a check within the method) to only run when the RadioButton is checked/selected, not regardless of the value changing. Here is my code:

Simplified XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="OrderProMobile.Views.Settings"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:viewmodels="clr-namespace:OrderProMobile.ViewModels"
             xmlns:model="clr-namespace:OrderProMobile.Models"
             xmlns:enums="clr-namespace:OrderProMobile.Models.Enums"
             x:DataType="viewmodels:SettingsViewModel"
             Title="Settings">
    <RadioButton GroupName="inventory_value" x:Name="case_each" Content="1 case, 5 each" IsChecked="True">
        <RadioButton.Behaviors>
            <toolkit:EventToCommandBehavior EventName="CheckedChanged" Command="{Binding UpdateSettingCommand}" CommandParameter="inventory_value:case_each" />
        </RadioButton.Behaviors>
    </RadioButton>
    <RadioButton GroupName="inventory_value" x:Name="case_fraction" Content="1 1/2 cases">
        <RadioButton.Behaviors>
            <toolkit:EventToCommandBehavior EventName="CheckedChanged" Command="{Binding UpdateSettingCommand}" CommandParameter="inventory_value:case_fraction" />
        </RadioButton.Behaviors>
    </RadioButton>
</ContentPage>

C# ViewModel:

[RelayCommand]
async Task UpdateSettings(string name)
{
    var settings = name.Split(':');

    var settingName = settings[0];
    var settingValue = settings[1];

    await _settingsService.PutSettingsValues(settingName, settingValue);
}

So my issue is that I only want this code to execute if the RadioButton is being selected, not when the value changes. I feel like there should be another event instead of CheckedChanged but I could not find anything.

then maintain a variable in your VM that tracks the state of the button and only execute when it is first selected — Jason, Jun 09 '23 at 17:57
May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out. — Guangyu Bai - MSFT, Jun 23 '23 at 09:10

score 2 · Accepted Answer · answered Jun 10 '23 at 19:02

2

Use Gestures:

<RadioButton.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding UpdateSettingCommand}"
                          CommandParameter="inventory_value:case_each" />

answered Jun 10 '23 at 19:02

Benl

2,777
9
13

score 0 · Answer 2 · answered Jun 09 '23 at 19:29

When XAML isn't doing what you need, c# in code-behind gives more flexibility:

<RadioButton ... CheckedChanged="CaseEachCheckedChanged" />
<!-- no longer using Behaviors -->

code-behind:

private MyViewModel VM => (MyViewModel)BindingContext;

void CaseEachCheckedChanged(object sender, CheckedChangedEventArgs args)
{
    if (args.Value)
        VM.UpdateSettings("inventory_value:case_each");
}

viewmodel:

// NOTE: No longer using [RelayCommand].
public async Task UpdateSettings(string name)
{
    ...
}

MAUI RadioButton CheckedChanged with MVVM

2 Answers2