将 MVVM 命令绑定到 UWP 中的 TimePicker 控件

Question

我在 XAML 页面上使用 TimePicker 控件并尝试对相应 ViewModel 中的更改做出反应。我将 Xaml.Interactivity 和 Xaml.Interactivity.Core 命名空间添加到我的页面，以便在调用 TimeChanged 事件后使用 Behaviors SDK 触发命令。

<!-- XAML Namespaces -->
xmlns:interact="using:Microsoft.Xaml.Interactivity"
xmlns:interactcore="using:Microsoft.Xaml.Interactions.Core"

<TimePicker x:Name="TestTimePicker" ClockIdentifier="24HourClock" Time="0">
    <interact:Interaction.Behaviors>
        <interactcore:EventTriggerBehavior EventName="TimeChanged">
            <interactcore:InvokeCommandAction Command="{Binding DataContext.TimeChangedCommand}" CommandParameter="{Binding ElementName=TestTimePicker, Path=Time}" />
        </interactcore:EventTriggerBehavior>
    </interact:Interaction.Behaviors>
</TimePicker>

对于我的 ViewModel 中的代码，我使用 Template10 中的 ViewModelBase 和 DelegateCommand。

public DelegateCommand<TimeSpan> StartTimeChangedCommand { get; set; }

public TestViewModel()
{
    ...
    TimeChangedCommand = new DelegateCommand<TimeSpan>(TimeChangedAction);
    ...
}

private void TimeChangedAction(TimeSpan obj)
{
    //do something with obj
}

页面初始化后，将抛出包含以下消息的 InvalidOperationException。

Adding or removing event handlers dynamically is not supported on WinRT events.

Answer 1

感谢@Archana 的讨论。我找到了解决问题的方法。我现在使用编译绑定 x:Bind 直接连接事件与 ViewModel 中的处理程序，而不是使用 Binding 连接 ViewModel 中的 Command .

我更新了 TimePicker 控件

<TimePicker x:Name="TestTimePicker" ClockIdentifier="24HourClock" Time="{x:Bind ViewModel.TestTime, Mode=TwoWay}" TimeChanged="{x:Bind ViewModel.TestTimeChangedEvent}" />

和ViewModel

中的代码

public void TestTimeChangedEvent (object sender, TimePickerValueChangedEventArgs e)
{
    TestTime = e.NewTime;
}

Answer 2

参考这个link

EventTriggerBehavior 不支持 TimeChanged 事件。支持的事件有

    Tapped
    PointerPressed  
    Loaded
    DataContextChanged
    Click
    Checked
    Unchecked
    SelectionChanged
    TextChanged
    Toggled
NavigationCompleted

您必须实现自定义行为以支持 TimeChanged 事件

这是一个 link 来实现自定义行为 implement_custom_behaviour

将 MVVM 命令绑定到 UWP 中的 TimePicker 控件

Binding MVVM Command to TimePicker control in UWP

c#

xaml

mvvm

win-universal-app

template10