如何从代码后面访问ViewModel

I don't understand how I can create a command to create a MVVM clickable rectangle. Here is my code:

我不理解如何创建一个命令来创建一个MVVM可点击的矩形。这是我的代码:

<Rectangle x:Name="Color01" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,29,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" MouseDown="Color_MouseDown" />
<Rectangle x:Name="Color02" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="115,29,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Rectangle x:Name="Color03" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="220,29,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Rectangle x:Name="Color04" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="325,29,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>

On my first rectangle you can see I created a code behind event. First I don't know how to access my ViewModel from the code behind. Two it's not really MVVM.

在我的第一个矩形上，你可以看到我在事件后面创建了一个代码。首先，我不知道如何从后面的代码访问我的视图模型。第二，它不是真正的MVVM。

public partial class MainWindow : Window
{
    /// <summary>
    /// Initializes a new instance of the MainWindow class.
    /// </summary>
    public MainWindow()
    {
        InitializeComponent();
        Closing += (s, e) => ViewModelLocator.Cleanup();
    }

    private void Color_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        // So what ???
    }
}

I just need to be able to change a simple boolean value stored in a list stored in my viewModel when someone click on my rectangle. Why it is so complicate to do with MVVM?

当有人单击我的矩形时，我只需要修改存储在viewModel中的列表中的一个简单布尔值。为什么MVVM这么复杂?

3 个解决方案

#1

This isn't too difficult. First, create an instance of your ViewModel inside your Window XAML:

这不是太困难。首先，在窗口XAML中创建一个ViewModel的实例:

View XAML:

XAML视图:

<Window  x:Class="BuildAssistantUI.BuildAssistantWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:VM="clr-namespace:MySolutiom.ViewModels">
     <Window.DataContext>
         <VM:MainViewModel />
     </Window.DataContext>
  </Window>

After that, you can System.Windows.Interactivity.InvokeCommandAction to translate your event to a command:

在此之后，您可以System.Windows.Interactivity。InvokeCommandAction将您的事件翻译成命令:

View XAML:

XAML视图:

<Grid>
 <Rectangle x:Name="Color01" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,29,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" MouseDown="Color_MouseDown">          <interactivity:Interaction.Triggers>
      <interactivity:EventTrigger EventName="MouseDown">
          <interactivity:InvokeCommandAction Command="{Binding MyCommand}"/>
      </interactivity:EventTrigger>
   </interactivity:Interaction.Triggers>
 </Rectangle>
</Grid>

Now, in your ViewModel, set up an ICommand and the DelegateCommand implementation to bind to that event:

现在，在您的ViewModel中，设置一个ICommand和delegate ecommand实现，以便绑定到该事件:

ViewModel:

视图模型:

public class ViewModel
{
    public ICommand MyCommand { get; set; }

    public ViewModel()
    {
        MyCommand = new DelegateCommand(OnRectangleClicked);
    }

    public void OnRectangleClicked()
    {
        // Change boolean here
    }
}

#2

In MVVM you shouldn't be accessing your view model from code behind, the view model and view are ignorant of each other a here endeth the lecture :)

在MVVM中，您不应该从后面的代码访问视图模型，视图模型和视图彼此不了解。

Instead you can attach the EventToCommand behaviour to your control. This lets you bind an event in the control to a command in the data context. See msdn commands tutorial here.

相反，您可以将EventToCommand行为附加到控件中。这使您可以将控件中的事件绑定到数据上下文中的命令。请参阅msdn命令教程。

If you are desperate to do it, you can access the controls data context property and cast it to your view model type to give access to the internals.

如果您非常需要这样做，您可以访问controls data context属性并将其转换为您的视图模型类型，以提供对内部的访问。

var vm = (ViewModelType)this.DataContext;
vm.CommandProperty.Execute(null);

#3

Quick answer. This might help others as well

快速的回答。这也可能对其他人有所帮助

((MyViewModel)(this.DataContext)).MyProperty