OkButtonClicked CommunityToolkit EventToCommandBehavior command not hitting ViewModel

[s thomson]

In either sfTimePicker or sfDateTimePicker I cannot get the OkButtonClicked to Bind properly to a [RelayCommand] on View Model. When the button is pressed the Picker closes but relay command not triggered. I have tried various ways of Binding which either have no effect or result in a xaml exception when the page is appearing. I have tried Binding to the view model via the page, viewmodel as so,

Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:BillSignOffViewModel}}, Path= EndTimeOkButton}"

Command="{Binding Source={x:Reference billsignoffpage}, Path=BindingContext. EndTimeOkButton}"

Command="{Binding EndTimeOkButtonCommand}"

I have also tried other names for the EventName property.

I would greatly appreciate guidance on how to sucessfully bind OkButtonClicked event to view model relay command.

I am using MVVM pattern so please only suggest Binding to ViewModel

The page xaml is:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="BinaryPlate.Mobile.Views.Bills.BillSignOffView"

            x:Name="billsignoffpage"

 xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"

xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"

x:DataType="viewModels:BillSignOffViewModel">

<sfPopup:SfPopup

Grid.Row="3"

Grid.Column="0"

x:Name="sfPopupEndTime"

HeaderTitle="Start Time"

                IsOpen="{Binding IsStartTimeOpen}"

AppearanceMode="TwoButton"

AcceptButtonText="SAVE"

DeclineButtonText="CANCEL"

ShowCloseButton="True"

ShowFooter="True"

HeightRequest="500">

<sfPopup:SfPopup.ContentTemplate>

<DataTemplate

x:DataType="viewModels:BillSignOffViewModel">

<picker:SfTimePicker

x:Name="PickEndTime"

VerticalOptions="Center"

SelectedTime="{Binding Source={x:Reference billsignoffpage}, Path=BindingContext.SelectedBillDto.EndTime}"

Format="hh_mm_tt"

IsEnabled="{Binding CanSignOff}">

<picker:SfTimePicker.Behaviors>

<toolkit:EventToCommandBehavior

EventName="Unfocused"

Command="{Binding Source={x:Reference billsignoffpage}, Path=BindingContext.SaveBillCommand}"/>

<toolkit:EventToCommandBehavior

EventName="OkButtonClicked"

Command="{Binding Source={x:Reference billsignoffpage}, Path=BindingContext.EndTimeOkButtonCommand}"

CommandParameter="{Binding Source={x:Reference PickEndTime}, Path=SelectedTime}"/>

</picker:SfTimePicker.Behaviors>

</picker:SfTimePicker>

</DataTemplate>

</sfPopup:SfPopup.ContentTemplate>

</sfPopup:SfPopup>

Viewmodel is as simple as:

        [RelayCommand]

        async Task EndTimeOkButton(TimeSpan timespan)

        {

            SelectedBillDto.EndTime = timespan;

        }

thanks

[Indumathi Ravichandran]

Hi thomson,

As per the shared information, we have checked the mentioned issue “EventToCommandBehavior command not hitting ViewModel for OkButtonClicked in .NET MAUI Picker”. We have checked the RelayCommand not triggered in simple sample, it was working fine as expected from our end. We have attached the tested sample for the same. Please find the sample from the following link.

Also please find the code snippet for the same.

Code snippet:

<ContentPage.BindingContext>

    <local:ViewModel/>

</ContentPage.BindingContext>

<sfPopup:SfPopup Grid.Row="3"

                Grid.Column="0"

                x:Name="sfPopupEndTime"

                HeaderTitle="Start Time"

                IsOpen="True"

                HeightRequest="500">

    <sfPopup:SfPopup.ContentTemplate>

        <DataTemplate>

            <Grid x:Name="grid">

 

                <picker:SfTimePicker x:Name="picker"

                                VerticalOptions="Center"

                                Format="hh_mm_tt" >

                    <picker:SfTimePicker.FooterView>

                        <picker:PickerFooterView Height="40"/>

                    </picker:SfTimePicker.FooterView>

                    <picker:SfTimePicker.Behaviors>

                        <toolkit:EventToCommandBehavior EventName="OkButtonClicked"

                                                    Command="{Binding Source={x:Reference CommandPage}, Path=BindingContext.OkButtonCommand}"

                                                    CommandParameter="{Binding Source={x:Reference picker}, Path=SelectedTime}"/>

                </picker:SfTimePicker.Behaviors>

                </picker:SfTimePicker>

            </Grid>

        </DataTemplate>

    </sfPopup:SfPopup.ContentTemplate>

</sfPopup:SfPopup>

 

class ViewModel

{

    public ICommand OkButtonCommand

    {

        get; set;   

    }

 

    public ViewModel()

    {

        OkButtonCommand = new RelayCommand(OkButtonClicked, CanExecuteYourCommand);

    }

    void OkButtonClicked()

    {

        // Todo your requirement logic here

    }

 

    bool CanExecuteYourCommand()

    {

        return true;

    }

}

Please check the sample and let us know if you are still facing the same issue? If not, please modify the sample based on your scenario and revert to us with the following details.

• Issue replication video
  
  

It will be helpful for us to check on it and provide you with a solution at the earliest.

Regards,

Indumathi R

Attachment: DatePickerCrash_deeabf68.zip