Come posso accedere al mio ViewModel dal codice sottostante

Question

Non capisco come posso creare un comando per creare un rettangolo cliccabile MVVM. Qui è il mio codice:

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

Al mio primo rettangolo potete vedere ho creato un codice dietro evento. Per prima cosa non so come accedere al mio ViewModel dal codice sottostante. Due non è davvero 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 ??? 
    } 
} 

Ho solo bisogno di essere in grado di cambiare un semplice valore booleano memorizzato in un elenco memorizzato nel mio ViewModel quando qualcuno clicca sul mio rettangolo. Perché è così complicato da fare con MVVM?

Answer 1

Questo non è troppo difficile. In primo luogo, creare un'istanza dei tuoi ViewModel all'interno della finestra XAML:

visualizzazione 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> 

Dopo di che, si può System.Windows.Interactivity.InvokeCommandAction di tradurre il vostro evento ad un comando:

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> 

Ora, nella vostra ViewMod EL, ha istituito un ICommand e l'attuazione DelegateCommand di legarsi a quell'evento:

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 non si dovrebbe essere accedere al proprio modello di vista dal codice dietro, il modello di visualizzazione e la vista è ignorante l'una dell'altra qui termina la lezione :)

Invece è possibile collegare il comportamento EventToCommand al proprio controllo. Ciò consente di associare un evento nel controllo a un comando nel contesto dati. Vedi msdn commands tutorial qui.

Se si è disperato di farlo, è possibile accedere alla proprietà del contesto dati di controllo e inviarlo al tipo di modello di vista per consentire l'accesso agli interni.

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