Search code examples
radio-buttonmauioncheckedchanged

MAUI RadioButton CheckedChanged with MVVM


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.


Solution

  • Use Gestures:

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