将ViewModel的事件绑定到XAML

Question

在我的VM中，我有一个事件

public class ViewModelBase
{
  public delegate bool MyDel(object param);
  public MyDel MyEvent;

 public void TransferClick()
 {
      MyEvent(null); // to simulate the click at View
 }
}

在视图中，当前我有以下代码（在后面）：

public class View: UserControl
{
   private void UserControl1_Load(Object sender, EventArgs e) 
 {

  (DataContext as ViewModelBase).MyEvent+=SimulateClick;

  }
  private bool SimulateClick(object param)  
{ 
   //some logic to simulate clicks on the View, on the user control
}
}

这样，VM可以随时在View中调用SimulateClick逻辑。

我不喜欢这种方法，因为它会污染我视图的代码。 有什么方法可以使MyEvent绑定到XAML，就像我如何将VM ICommand绑定到现有按钮单击之类的东西一样？

注意：我实际上并不想模拟鼠标单击（我知道我可以使用ICommand来做到这一点），只想在MVVM模型上执行一些事件，例如鼠标单击事件。

Answer 1

如果视图模型需要告诉视图执行某项操作，则可以使用事件聚合器或消息传递器以松散耦合的方式将消息从视图模型发送到视图：

https://blog.magnusmontin.net/2014/02/28/using-the-event-aggregator-pattern-to-communicate-between-view-models/

https://msdn.microsoft.com/zh-CN/magazine/jj694937.aspx

使用这种模式的好处是视图模型和视图不需要彼此了解任何东西。

另一个选择是使用视图实现的接口类型注入视图模型：

public interface IView
{
    bool SimulateClick(object param);
}

public partial class View : UserControl, IView
{
    public View()
    {
        InitializeComponent();
        DataContext = new ViewModel(this);
    }

    public bool SimulateClick(object param)
    {
        //...
    }

}

这实际上并没有破坏MVVM模式，因为视图模型仅依赖于视图恰好实现的接口。

Answer 2

VM将从其他VM接收命令（想想FileVM会通知tabVM），然后VM（tabVM）将通过View（tabView）上的SimulateClick方法在视图上加载数据。

如果该方法基于某些命令加载数据，为什么还要为该方法命名SimulateClick？ 我会像这样重构您的代码。

public delegate bool MyDel(object data);

public class ViewModelBase
{
   public MyDel SomeCommandExecuted;

   void SomeCommand_Execute()
   {
      string[] sampleData = new [] //this may come from the other viewmodel for example
      {
         "Item1", "Item2", "Items3";
      }

      MyDel handler = SomeCommandExecuted;
      if (handler != null)
      {
          handler(sampleData);
      }
   }
}

如果您公开了这样的功能，则可以在代码隐藏中附加到事件。 为什么要通过附加到VM的事件并调用codebehind方法来污染XAML？ 最好在代码背后附加事件，因为至少您的代码保持类型安全且可重构。

public class View: UserControl
{
   public View()
   {
       this.InitializeComponent();
       Loaded += (o, e) => ViewModel.SomeCommandExecuted += ViewModel_SomeCommandExecuted;
   }

   ViewModelBase ViewModel => (ViewModelBase)DataContext;


  private bool ViewModel_SomeCommandExecuted(object data)  
  { 
     //load the data into view
  }
}

---

在代码背后附加VM的事件并不违反MVVM。 但是，ViewModel的责任在于以易于从View消费的形式公开数据（通常是通过数据绑定）。

这是我的建议：

public class ViewModelBase : INotifyPropertyChanged
{
   public event PropertyChangedEventHandler PropertyChanged;

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

   protected bool InDesignMode => DesignerProperties.GetIsInDesignMode(new DependecyObject());
}

public class ViewModel : ViewModelBase
{
   private string[] _data;

   //ctor
   public ViewModel()
   {
       if (IsInDesignMode)
       {
           Data = new [] { "Visible", "In", "XAML", "Designer" }
       }
   }

   public string[] Data
   {
      get { return _data; }
      set { _data = value; OnPropertyChanged(); }
   }

   void SomeCommand_Execute()
   {
      string[] sampleData = new [] //this may come from the other viewmodel for example
      {
         "Item1", "Item2", "Items3";
      }

      Data = sampleData;
   }
}

我已经在ViewModel中准备了数据，以便可以在视图中轻松使用它们。 准备就绪后，我将使用PropertyChanged事件通知视图。 现在，我可以轻松地在View中绑定ItemsControl，ListView等。 无需任何代码背后的功能。 这是ViewModel的目的

Answer 3

更新的答案

首先-我强烈建议@ mm8建议使用的方法，或者在您的视图中公开Command（例如RefreshCommand）以实现相同的效果。

但这不是一个选择； 那么我相信您可以创建一个自定义附加事件，该事件可以从技术上将视图模型的事件绑定到控件的事件处理程序； 同时保持MVVM分离级别。

例如，您可以通过以下方式定义附加事件：

// ViewModel event args 
public class MyEventArgs : EventArgs
{
    public object Param { get; set; }
}

// Interim args to hold params during event transfer    
public class InvokeEventArgs : RoutedEventArgs
{
    public InvokeEventArgs(RoutedEvent e) : base(e) { }

    public object Param { get; set; }
}    

// Base view model
public class ViewModelBase
{
    public event EventHandler<MyEventArgs> MyEvent1;
    public event EventHandler<MyEventArgs> MyEvent2;

    public void TransferClick1()
    {
        MyEvent1?.Invoke(this, new MyEventArgs { Param = DateTime.Now }); // to simulate the click at View
    }

    public void TransferClick2()
    {
        MyEvent2?.Invoke(this, new MyEventArgs { Param = DateTime.Today.DayOfWeek }); // to simulate the click at View
    }
}

// the attached behavior that does the magic binding
public class EventMapper : DependencyObject
{
    public static string GetTrackEventName(DependencyObject obj)
    {
        return (string)obj.GetValue(TrackEventNameProperty);
    }

    public static void SetTrackEventName(DependencyObject obj, string value)
    {
        obj.SetValue(TrackEventNameProperty, value);
    }

    public static readonly DependencyProperty TrackEventNameProperty =
        DependencyProperty.RegisterAttached("TrackEventName",
            typeof(string), typeof(EventMapper), new PropertyMetadata
            (null, new PropertyChangedCallback(OnTrackEventNameChanged)));

    private static void OnTrackEventNameChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
    {
        FrameworkElement uie = d as FrameworkElement;
        if (uie == null)
            return;

        var eventName = GetTrackEventName(uie);
        if (string.IsNullOrWhiteSpace(eventName))
            return;

        EventHandler<MyEventArgs> vmEventTracker = delegate (object sender, MyEventArgs e) {
            Application.Current.Dispatcher.Invoke(() =>
                uie.RaiseEvent(new InvokeEventArgs(EventMapper.OnInvokeEvent)
                {
                    Source = sender,
                    Param = e?.Param
                }));
        };

        uie.DataContextChanged += (object sender, DependencyPropertyChangedEventArgs e) =>
        {
            var oldVM = e.OldValue;
            var newVM = e.NewValue;

            if (oldVM != null)
            {
                var eventInfo = oldVM.GetType().GetEvent(eventName);
                eventInfo?.RemoveEventHandler(oldVM, vmEventTracker);
            }

            if (newVM != null)
            {
                var eventInfo = newVM.GetType().GetEvent(eventName);
                eventInfo?.AddEventHandler(newVM, vmEventTracker);
            }
        };

        var viewModel = uie.DataContext;
        if (viewModel != null)
        {
            var eventInfo = viewModel.GetType().GetEvent(eventName);
            eventInfo?.AddEventHandler(viewModel, vmEventTracker);
        }
    }

    public static readonly RoutedEvent OnInvokeEvent =
        EventManager.RegisterRoutedEvent("OnInvoke",
            RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(EventMapper));
    public static void AddOnInvokeHandler(DependencyObject d, RoutedEventHandler handler)
    {
        FrameworkElement uie = d as FrameworkElement;
        if (uie != null)
        {
            uie.AddHandler(OnInvokeEvent, handler);
        }
    }

    public static void RemoveOnInvokeHandler(DependencyObject d, RoutedEventHandler handler)
    {
        FrameworkElement uie = d as FrameworkElement;
        if (uie != null)
        {
            uie.RemoveHandler(OnInvokeEvent, handler);
        }
    }
}

示例1-事件处理程序

XAML用法

<StackPanel Margin="20">
    <Button Margin="10" Content="Invoke VM event" Click="InvokeEventOnVM" />        
    <Button Content="View Listener1" 
            local:EventMapper.TrackEventName="MyEvent1"
            local:EventMapper.OnInvoke="SimulateClick1" />

    <Button Content="View Listener2" 
            local:EventMapper.TrackEventName="MyEvent1"
            local:EventMapper.OnInvoke="SimulateClick1" />

    <Button Content="View Listener3" 
            local:EventMapper.TrackEventName="MyEvent2"
            local:EventMapper.OnInvoke="SimulateClick2" />

</StackPanel>

上面的XAML的示例代码背后：

private void SimulateClick1(object sender, RoutedEventArgs e)
{
    (sender as Button).Content = new TextBlock { Text = (e as InvokeEventArgs)?.Param?.ToString() };
}

private void SimulateClick2(object sender, RoutedEventArgs e)
{
    SimulateClick1(sender, e);
    (sender as Button).IsEnabled = !(sender as Button).IsEnabled; //toggle button
}

private void InvokeEventOnVM(object sender, RoutedEventArgs e)
{
    var vm = new ViewModelBase();
    this.DataContext = vm;

    vm.TransferClick1();
    vm.TransferClick2();
}

示例2-事件触发器（07/26更新）

XAML用法

<Button Content="View Listener" 
    local:EventMapper.TrackEventName="MyEvent2">
    <Button.Triggers>
        <EventTrigger RoutedEvent="local:EventMapper.OnInvoke">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation AutoReverse="True" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

Answer 4

您可以使用x：bind进行函数绑定。 这样，您的xaml可以绑定并直接调用视图模型事件处理程序，而无需在视图中使用“传递”调用方法。

Click="{x:Bind viewModel.Foo}"

更多文件

这是wpf中事件绑定的示例

WPF事件绑定从视图到ViewModel？

Answer 5

xmlns：i =“ http://schemas.microsoft.com/expression/2010/interactivity”

 <StackPanel Background="Transparent">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Tap">
      <command:EventToCommand
        Command="{Binding Main.NavigateToArticleCommand,
          Mode=OneWay,
          Source={StaticResource Locator}}"
        CommandParameter="{Binding Mode=OneWay}" />
    </i:EventTrigger>
  </i:Interaction.Triggers>
</StackPanel>

视图模型

public RelayCommand NavigateToArticleCommand 
{ 
 get 
{ 

  return _navigateToArticleCommand
      ?? (_navigateToArticleCommand= new RelayCommand( 
        async () => 
        { 
          await SomeCommand(); 
        })); 
  } 
}