如何将 datepicker 绑定到 viewModel？

Question

如何从 DatePicker 获取值并将其设置在 ViewModel 中的变量中？ 在我的 xaml 文件中，我有日期选择器，例如：

<DatePicker x:Name="dateTo"
    TextColor="White"
    FontSize="Small"
    Date="{Binding DateTo}"
    HorizontalOptions="StartAndExpand"
    VerticalOptions="CenterAndExpand"
    IsVisible="{Binding DateToPickerVisibility}"
    Margin="5,0,0,0"
    IsEnabled="False"/>

在我的 ViewModel 我有财产

public DateTime DateTo { get; set; }

并在 InidData 方法中设置它的值：

DateTo = DateTime.Now.Date.AddDays(1); 

但是，当日期更改并单击选择器上的“确定”按钮时，如何更改该值？

Answer 1

您的 XAML 看起来不错。

但是，您在 ViewModel 中的属性没有调用PropertyChanged 。 当 ViewModel 中某个 Property 的值发生变化时，需要调用PropertyChanged?.Invoke来提醒/更新 View。

下面是 XAML、其代码隐藏和 ViewModel 的示例：

XAML

<DatePicker x:Name="dateTo"
    TextColor="White"
    FontSize="Small"
    Date="{Binding DateTo}"
    HorizontalOptions="StartAndExpand"
    VerticalOptions="CenterAndExpand"
    IsVisible="{Binding DateToPickerVisibility}"
    Margin="5,0,0,0"
    IsEnabled="False"/>

代码背后

public partial class MyView
{
    InitializeComponent();
    BindingContext = new MyViewModel();
}

视图模型

public class MyViewModel : INotifyPropertyChanged
{
    bool _dateToPickerVisibility
    DateTime _dateTo

    public event PropertyChangedEventHandler PropertyChanged;

    public DateTime DateTo
    {
        get => _dateTo;
        set
        {
            _dateTo = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(DateTo)));
        }
    }

    public bool DateToPickerVisibility
    {
        get => _dateToPickerVisibility;
        set 
        {
            _dateToPickerVisibility = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(DateToPickerVisibility)));
        }
    }
}

Answer 2

是的，您的 ViewModel 需要实现INotifyPropertyChanged ，以便 DatePicker 可以自动更新值。

有一个完整的演示可以正常工作。 主要代码是：

 public class DateViewModel: INotifyPropertyChanged
{
    bool _dateToPickerVisibility;

    public bool DateToPickerVisibility
    {
        set { SetProperty(ref _dateToPickerVisibility, value); }
        get { return _dateToPickerVisibility; }
    }

    DateTime _dateTo;
    public DateTime DateTo
    {
        set { SetProperty(ref _dateTo, value); }
        get { return _dateTo; }
    }

    public DateViewModel()
    {
        DateTo = DateTime.Now.Date.AddDays(1);
        DateToPickerVisibility = true;
    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

主页.xaml

 <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="Start">
    <DatePicker x:Name="dateTo"
                FontSize="Small"
                Date="{Binding DateTo}"
                HorizontalOptions="StartAndExpand"
                VerticalOptions="Start"
                IsVisible="{Binding DateToPickerVisibility}"
                Margin="5,0,0,0"/>

    <Button x:Name="mButton" 
            Text="Hide DatePicker"
            Clicked="MButton_Clicked"
            VerticalOptions="Center"
            />
</StackLayout>

主页.xaml.cs

public partial class MainPage : ContentPage
 {
    DateViewModel dateViewModel;

    public MainPage()
    {
        InitializeComponent();
        dateViewModel = new DateViewModel();
        BindingContext = dateViewModel;

    }

    private void MButton_Clicked(object sender, EventArgs e)
    {
        if (dateViewModel.DateToPickerVisibility) {
            dateViewModel.DateToPickerVisibility = false;
            mButton.Text = "Make DatePicker visible";
        }
        else {
            dateViewModel.DateToPickerVisibility = true;
            mButton.Text = "Hide DatePicker";
        }
    }
}

笔记：

1.您可以在 ViewModel.eg 的构造函数中初始化值

 public DateViewModel()
    {
        DateTo = DateTime.Now.Date.AddDays(1);
        DateToPickerVisibility = true;
    }

2.为了使 datePicker 可见或隐藏，我添加了一个 Button 来更改DateToPickerVisibility的值。

  private void MButton_Clicked(object sender, EventArgs e)
    {
        if (dateViewModel.DateToPickerVisibility) {
            dateViewModel.DateToPickerVisibility = false;
            mButton.Text = "Make DatePicker visible";
        }
        else {
            dateViewModel.DateToPickerVisibility = true;
            mButton.Text = "Hide DatePicker";
        }
    }

结果是：