c# - XAML 数据绑定(bind)在未设置 Viewmodel 时覆盖属性

Question

我正在使用 Xamarin 表单和 MVVM 设计模式来构建我的应用程序。我目前有一个日期输入表单，用户可以在其中输入日期和时间。

显然，目标是使用在此日期选择器中选择的值设置 2 个 DateTime 变量。我遇到的问题与绑定(bind)属性有关，这里是这些选择器的 XAML:

<DatePicker x:Name="endDatePicker" HorizontalOptions="FillAndExpand" Format="dd/MM/yyyy" Date="{Binding EventEndDate, Mode=TwoWay}" />
<TimePicker x:Name="endTimePicker" HorizontalOptions="FillAndExpand" Format="HH:mm" Time="{Binding EventEndDate, Converter={StaticResource DateTimeToTimeSpanConverter},Mode=OneWay}"/>

这是它们绑定(bind)的属性:

DateTime _eventEndDate;
public DateTime EventEndDate
{
    set
    {
        SetProperty(ref _eventEndDate, value);
    }
    get
    {
        return _eventEndDate;
    }
}

我在加载时设置这些选择器的值，将页面成像为我正在重复使用的创建/编辑页面。编辑时， View 会填充来自 View 模型的数据。如果我将这些控件绑定(bind)到我的 DateTime，将调用 Get 方法并在 View 中设置正确的日期(我输入的)....紧接在 Set 方法之后被调用并在这种情况下设置日期时间 (19/03/2018) 但是一天中的时间从上午 9 点更改为凌晨 12 点(就好像它是一个新的日期时间)。

现在我认为正在发生的事情是我正在设置 View ，然后 View 立即设置 View 模型....但是我没有在 UI 中做任何事情，现在 UI 和 VM 已经不在了同步。如果用户单击编辑但未触摸日期，则此控件将更改。

当 View 中没有发生任何变化时，如何阻止讨厌的 View 更新我的 View 模型!

Answer 1

问题是 TimePicker 控件需要 TimeSpan 数据类型。您正确地使用了 Converter 将 DateTime 转换为 TimeSpan，但这只是一种单向绑定(bind)。如果你想让用户选择时间，你不能以其他方式做到这一点，这也是一个问题。

同时，当您使用DatePicker 更改日期值时，该控件不关心日期的“时间”部分，始终默认为上午 12 点。这会导致更新 EventEndDate 属性并将其设置为 19/03/2018 12 AM。这反过来会导致 TimePicker 更新，瞧 - 你得到了意想不到的时间 :-)。

要解决这个问题，您必须采取一些不同的方法。您必须将日期和时间分成三个独占属性 - 完整的 DateTime 和 DateTime 以及 TimeSpan。

例子

DateTime _eventEndDate;

public DateTime EventEndDate
{
    get
    {
        return _eventEndDate;
    }
    set
    {
        SetProperty(ref _eventEndDate, value);
    }
}

public DateTime EventEndDateOnly
{
    get
    {
        return _eventEndDate.Date;
    } 
    set
    {
        EventEndDate = value.Date + EventEndTimeOnly;
    }
}

public TimeSpan EventEndTimeOnly
{
    get
    {
        return _eventEndDate.TimeOfDay;
    } 
    set
    {
        EventEndDate = EventEndDateOnly + value;
    }
}

现在不是直接绑定(bind)到 EventEndDate，而是绑定(bind)到新的计算属性:

<DatePicker x:Name="endDatePicker" HorizontalOptions="FillAndExpand" Format="dd/MM/yyyy" Date="{Binding EventEndDateOnly, Mode=TwoWay}" />
<TimePicker x:Name="endTimePicker" HorizontalOptions="FillAndExpand" Format="HH:mm" Time="{Binding EventEndTimeOnly, Mode=TwoWay}"/>

这是一个冗长的解决方案，但我仍然觉得它非常优雅，并且可能是您可以拥有的最佳解决方案。