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();
}

ViewModel

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需要实现<html> <head> <title> Lab 4 Grade Calculator </title> </head> <body> <h2> Grade Calculation</h2> <p> Enter your name: <input type="text" id="nameBox" size=12 value=""><br><br> Homework average: <input type="text" id="homeworkBox" value=""><br><br> Lab Average: <input type="text" id="labBox" value=""><br><br> Midterm Average: <input type="text" id="midtermBox" value=""><br><br> Final Exam score: <input type="text" id="examBox" value=""><br><br> </p> <br>  <input type="button" value="Calculate Course Grade" onclick="calculateGrade()">  <hr> <br><br> <div id="outputDiv"></div> </body> </html>，以便DatePicker可以自动更新值。

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

INotifyPropertyChanged

MainPage.xaml

 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;
}

MainPage.xaml.cs

 <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>

注意：

1。您可以在ViewModel的构造函数中初始化值。例如。

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";
        }
    }
}

2。为使datePicker可见或隐藏，我添加了一个Button来更改public DateViewModel() { DateTo = DateTime.Now.Date.AddDays(1); DateToPickerVisibility = true; }的值。

DateToPickerVisibility

结果是：

如何将datepicker绑定到viewModel？

2 个答案:

XAML

隐藏代码

ViewModel