How can I access my ViewModel from code

Question

I do not understand how to create a command to create a rectangle with interactive MVVM. Here is my code:

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

In my first rectangle, you see that I created the code behind the event. At first I don't know how to access my ViewModel from the code behind. Two is not really 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 the simple boolean stored in the list stored in my viewModel when someone clicks on my rectangle. Why is it so complicated with MVVM?

Answer 1

This is not too complicated. First, create an instance of your ViewModel inside your XAML window:

View 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 translate your event into a command:

View 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, configure ICommand and DelegateCommand to bind to this event:

ViewModel:

 public class ViewModel { public ICommand MyCommand { get; set; } public ViewModel() { MyCommand = new DelegateCommand(OnRectangleClicked); } public void OnRectangleClicked() { // Change boolean here } } 

Answer 2

In MVVM, you should not access your view model from the code behind, the model and view type do not know each other, and here the lecture ends :)

Instead, you can bind the EventToCommand behavior to your control. This allows you to bind an event in the control to a command in the data context. See the msdn command tutorial .

If you desperately need this, you can access the property of the control data context and apply it to the view model type to provide access to the internal components.

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