Guilherme Takata
Guilherme Takata

Reputation: 123

Maui .net bind relay command to radio button

I'm making a view with two radio buttons, the only problem is that the CheckedChanged property can't be bound to a method with a RelayCommand annotation. According to the error display on Visual Studio it can only be bound to a property or value. Is there any way I can bind this property to a method on my View Model?

This is the Radio button:

<RadioButton Value="Player1"
                 Grid.Row="1"
                 Grid.ColumnSpan="2"
                 Content="{Binding Name1}" 
                 BorderColor="#FF1111"
                 BorderWidth="20"
                 VerticalOptions="Center"
                 IsChecked= "False"
                 CheckedChanged= "{Binding ChangeCurrentPlayer2Command}"
                 />

And the Relay Command:

void ChangeCurrentPlayer2()
        {
            if (currentPlayer == Player1)
            {
                currentPlayer = this.Player2;
            }
            else
            {
                currentPlayer = this.Player1;
            }

        }

Upvotes: 2

Views: 2815

Answers (1)

Jianwei Sun - MSFT
Jianwei Sun - MSFT

Reputation: 4282

What I want is to bind a viewmoedl method to the event checkedChanged for the radio buttons, I know how to do this using a normal Button, by using the RelayCommand annotation.

As Jason said, you can use EventToCommandBehavior by .NET MAUI Community Toolkit to achieve it.

Page.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:viewmodel="clr-namespace:MauiApp1.ViewModels"
             x:Class="MauiApp1.NewPage2"
             Title="NewPage2">
    <ContentPage.BindingContext>
        <viewmodel:VM/>
    </ContentPage.BindingContext>
    
    <VerticalStackLayout>
        <RadioButton Value="Player1"
                     x:Name="this"
                 Content="{Binding Name1}"
                 VerticalOptions="Center"
                 IsChecked= "False">
            <RadioButton.Behaviors>
                <toolkit:EventToCommandBehavior
                    EventName="CheckedChanged"
                    Command="{Binding ChangeCurrentPlayer2Command}"
                    CommandParameter="{Binding Source={Reference this}}"/>
            </RadioButton.Behaviors>
        </RadioButton>
        
    </VerticalStackLayout>
</ContentPage>

ViewModel:

namespace MauiApp1.ViewModels
{
    public class VM : INotifyPropertyChanged
    {
       public string name1;
       public string Name1
       {
           get => name1;
           set
           {
               name1 = value;
               OnPropertyChanged(nameof(Name1));
           }
       }

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

        public ICommand ChangeCurrentPlayer2Command { get; set; }

       public VM()
       {
           Name1 = "Player1";
           ChangeCurrentPlayer2Command = new Command<object>(ChangeCurrentPlayer2);
       }

       public void ChangeCurrentPlayer2(object content)
       {
           var radiobutton = content as RadioButton;

           if (Name1 != radiobutton.Value.ToString())
           {
               Name1 = radiobutton.Value.ToString();
           }
           else
           {
               Name1 = "Player2";
           }
       }
    }
}

When the RadioButton is clicked, Content will be changed if Value is the same as the value Content is bound to.

Upvotes: 2

Related Questions