button doesn't work with command

Question

I have a custom command

public partial class DateTimeZonePicker : ContentView {

    public DateTimeZonePicker() {
        InitializeComponent();
    }


    public static readonly BindableProperty OpenDateTimePickerCommndProperty = BindableProperty.Create(
    nameof(OpenDateTimePickerCommnd), typeof(RelayCommand), typeof(DateTimeZonePicker));

    public RelayCommand OpenDateTimePickerCommnd {
        get => (RelayCommand)GetValue(OpenDateTimePickerCommndProperty);
        set => SetValue(OpenDateTimePickerCommndProperty, value);
    }

    public static readonly BindableProperty IsDateTimePickerVisibleProperty = BindableProperty.Create(
    nameof(IsDateTimePickerVisible), typeof(bool), typeof(DateTimeZonePicker));

    public bool IsDateTimePickerVisible {
        get => (bool)GetValue(IsDateTimePickerVisibleProperty);
        set => SetValue(IsDateTimePickerVisibleProperty, value);
    }


    public static readonly BindableProperty TimezonesProperty = BindableProperty.Create(
        nameof(Timezones), typeof(List), typeof(DateTimeZonePicker));

    public List Timezones {
        get => (List)GetValue(TimezonesProperty);
        set => SetValue(TimezonesProperty, value);
    }

    public static readonly BindableProperty SelectedDateTimeProperty = BindableProperty.Create(
      nameof(SelectedDateTime), typeof(DateTime), typeof(DateTimeZonePicker), null,
      BindingMode.TwoWay);

    public DateTime SelectedDateTime {
        get => (DateTime)GetValue(SelectedDateTimeProperty);
        set => SetValue(SelectedDateTimeProperty, value);
    }

    public static readonly BindableProperty SelectedTimeZoneProperty = BindableProperty.Create(
        nameof(SelectedTimeZone), typeof(string), typeof(DateTimeZonePicker), null,
        BindingMode.TwoWay);

    public string SelectedTimeZone {
        get => (string)GetValue(SelectedTimeZoneProperty);
        set => SetValue(SelectedTimeZoneProperty, value);
    }

    public static readonly BindableProperty OkButtonClickedCommandProperty = BindableProperty.Create(
        nameof(OkButtonClickedCommand), typeof(RelayCommand), typeof(DateTimeZonePicker));

    public RelayCommand OkButtonClickedCommand {
        get => (RelayCommand)GetValue(OkButtonClickedCommandProperty);
        set => SetValue(OkButtonClickedCommandProperty, value);
    }


    public static readonly BindableProperty CancelButtonClickedCommandProperty = BindableProperty.Create(
        nameof(CancelButtonClickedCommand), typeof(RelayCommand), typeof(DateTimeZonePicker));

    public RelayCommand CancelButtonClickedCommand {
        get => (RelayCommand)GetValue(CancelButtonClickedCommandProperty);
        set => SetValue(CancelButtonClickedCommandProperty, value);
    }

    public static readonly BindableProperty ButtonTextProperty = BindableProperty.Create(
       nameof(ButtonText), typeof(string), typeof(DateTimeZonePicker));

    public string ButtonText {
        get => (string)GetValue(ButtonTextProperty);
        set => SetValue(ButtonTextProperty, value);
    }

    public static readonly BindableProperty IsButtonEnabledProperty = BindableProperty.Create(
        nameof(IsButtonEnabled), typeof(bool), typeof(DateTimeZonePicker));

    public bool IsButtonEnabled {
        get => (bool)GetValue(IsButtonEnabledProperty);
        set => SetValue(IsButtonEnabledProperty, value);
    }


    public static readonly BindableProperty ButtnClickCommandProperty = BindableProperty.Create(
        nameof(ButtnClickCommand), typeof(RelayCommand), typeof(DateTimeZonePicker));

    public RelayCommand ButtnClickCommand {
        get => (RelayCommand)GetValue(ButtnClickCommandProperty);
        set => SetValue(ButtnClickCommandProperty, value);
    }

}

Usage

public partial class ScheduleLecturePageViewModel(IAppService appService,
    IHttpService httpService,
    IDataService dataService,
    IMeetingService meetingServic) : BaseViewModel {
    [ObservableProperty]
    bool isDateTimeZonePickerVisible;
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(ButtonText), nameof(IsButtonEnabled))]
    DateTime? selectedDateTime = null;
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(IsButtonEnabled))]
    String selectedTimeZone;
    [ObservableProperty]
    public List timezones;
    public string ButtonText => SelectedDateTime.HasValue ? $"Schedule for {SelectedDateTime:MMMM dd yyyy 'at' HH:mm}" : "";
    public bool IsButtonEnabled => SelectedDateTime.HasValue && !string.IsNullOrEmpty(SelectedTimeZone);
    [RelayCommand]
    void Appearing() {
        Timezones = TimeZoneService.GetTimeZones();
    }
    [RelayCommand]
    void OpenDateTimePicker() {
        IsDateTimeZonePickerVisible = true;
    }
    [RelayCommand]
    void OkButtonClicked() {
        IsDateTimeZonePickerVisible = false;
    }
    [RelayCommand]
    void CancelButtonClicked() {
        IsDateTimeZonePickerVisible = false;
    }
    [RelayCommand]
    async Task ScheduleButtonClickedAsync() {
        if (appService != null) {
            await appService.DisplayToast($"You have a meeting on {SelectedDateTime}",
                ToastDuration.Short, 14);
        }
    }
}

everything is working, but the button dissent wants to work

User's image

I bound to the button, but it doesn't work

Accepted Answer

Hello,

When you use the [RelayCommand] attribute to auto-generate a Command for a method, it depends on the method's return type and signature what type of Command will be generated.

Your method is of return type async Task, it will create an AsyncRelayCommand .

We you need to change type of ButtnClickCommand from RelayCommand to AsyncRelayCommand like following code in the DateTimeZonePicker's background code .

public static readonly BindableProperty ButtnClickCommandProperty = BindableProperty.Create(
     nameof(ButtnClickCommand), typeof(AsyncRelayCommand), typeof(DateTimeZonePicker));
 
public AsyncRelayCommand ButtnClickCommand
{
     get => (AsyncRelayCommand)GetValue(ButtnClickCommandProperty);
     set => SetValue(ButtnClickCommandProperty, value);
}

Or you still use RelayCommand by changing a ScheduleButtonClickedAsync method's return type from Task to void

 [RelayCommand]
    async void ScheduleButtonClickedAsync() {
        if (appService != null) {
            await appService.DisplayToast($"You have a meeting on {SelectedDateTime}",
                ToastDuration.Short, 14);
        }
    }

And change the value of ButtnClickCommand to ScheduleButtonClickedAsyncCommand in the DateTimeZonePicker

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

button doesn't work with command

0 additional answers

Your answer