Comment puis-je connecter ModelView au modèle dans cet exemple Silverlight MVVM?

Question

J'utilise l'article Model View View-Model (MVVM) in Silverlight comme base pour créer mon propre exemple MVVM dans Silverlight.

J'ai toutes les pièces ci-dessous:

• la page principale (tout les charges)
• Voir (fichier XAML avec fixations)
• Modèle (une génération de classe Customer une fausse collection de liste)
• ModelView (hérite INotifyPropertyChanged et ha s la PropertyChanged pour les deux champs View a besoin)

Dans ma page principale I:

• créer le ViewModel
• lient la ViewModel au DataContext du Voir
• créer le Modèle (custo mers)

Mais maintenant, comment connecter le ModelView au modèle? Je me sens comme si j'avais besoin d'injecter mes clients Modèle en quelque sorte dans le CustomerViewModel, n'est-ce pas? Mais comment exactement? Quelle est la prochaine étape ici pour terminer cet exemple MVVM afin que je puisse commencer à utiliser les avantages du modèle MVVM, par ex. échangeant le modèle avec un modèle de test, en échangeant la vue avec de nouvelles vues, etc.

---

MainPage.xaml.cs:crée ViewModel, attache Voir à viewmodel

using System.Windows.Controls; 
using System.Collections.Generic; 

namespace TestMvvm345 
{ 
    public partial class MainPage : UserControl 
    { 
     private CustomerViewModel customerData; 

     public MainPage() 
     { 
      InitializeComponent(); 

      customerData = new CustomerViewModel(); 
      customerHeaderView.DataContext = customerData; 
      List<Customer> customers = Customer.GetCustomers(); 
     } 
    } 
} 

MainPage.xaml:affiche la vue dans le contexte de la page principale

<UserControl x:Class="TestMvvm345.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:TestMvvm345" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
     <StackPanel HorizontalAlignment="Left"> 
      <local:CustomerHeaderView x:Name="customerHeaderView" Margin="10"/> 
     </StackPanel> 
    </Grid> 
</UserControl> 

CustomerViewModel.xaml:ViewModel

using System.ComponentModel; 

namespace TestMvvm345 
{ 
    public class CustomerViewModel : INotifyPropertyChanged 
    { 
     private string firstName; 
     private string lastName; 

     public string FirstName 
     { 
      get { return firstName; } 
      set 
      { 
       firstName = value; 
       RaisePropertyChanged("FirstName"); 
      } 
     } 

     public string LastName 
     { 
      get { return lastName; } 
      set 
      { 
       lastName = value; 
       RaisePropertyChanged("LastName"); 
      } 
     } 

     public event PropertyChangedEventHandler PropertyChanged; 

     private void RaisePropertyChanged(string property) 
     { 
      if (PropertyChanged != null) 
      { 
       PropertyChanged(this, new PropertyChangedEventArgs(property)); 
      } 
     } 
    } 
} 

CustomerHeaderView.xamlla vue

<UserControl x:Class="TestMvvm345.CustomerHeaderView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
     <StackPanel HorizontalAlignment="Left"> 
      <ListBox x:Name="CustomerList" ItemsSource="{Binding}"> 
       <ListBox.ItemTemplate> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal"> 
          <TextBlock 
          Text="{FirstName}"/> 
          <TextBlock 
          Text="{LastName}"/> 
         </StackPanel> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
      </ListBox> 
     </StackPanel> 
    </Grid> 
</UserControl> 

clients.csle modèle

using System; 
using System.Collections.Generic; 

namespace TestMvvm345 
{ 
    public class Customer 
    { 
     public int ID { get; set; } 
     public string FirstName { get; set; } 
     public string LastName { get; set; } 
     public int NumberOfContracts { get; set; } 

     public static List<Customer> GetCustomers() 
     { 
      List<Customer> customers = new List<Customer>(); 
      customers = new List<Customer>(); 
      customers.Add(new Customer { FirstName = "Jim", LastName = "Smith", NumberOfContracts = 23 }); 
      customers.Add(new Customer { FirstName = "Jane", LastName = "Smith", NumberOfContracts = 22 }); 
      customers.Add(new Customer { FirstName = "John", LastName = "Tester", NumberOfContracts = 33 }); 
      customers.Add(new Customer { FirstName = "Robert", LastName = "Smith", NumberOfContracts = 2 }); 
      customers.Add(new Customer { FirstName = "Hank", LastName = "Jobs", NumberOfContracts = 5 }); 
      return customers; 
     } 
    } 
} 

Answer 1

La façon dont j'utiliser un ViewModel est quelque peu différente. Dans mon cas, il enveloppe la classe Model en lui passant la plupart des données. De cette façon, toutes les règles métier standard du modèle fonctionnent toujours comme elles sont censées le faire immédiatement. Le ViewModel expose uniquement les propriétés réellement nécessaires pour la liaison de données ou d'autres fins de l'interface utilisateur. De plus, ViewModel peut contenir d'autres propriétés/méthodes utilisées pour la liaison de données.

Donc, en utilisant votre exemple de client: espace de noms TestMvvm345 { public class CustomerViewModel: INotifyPropertyChanged {

private Customer _model; 
    public Customer Model 
    { 
     get 
     { return _model; } 
     set 
     { 
      if (_model != null) 
       Model.PropertyChanged -= Model_PropertyChanged; 

      _model = value; 

      if (_model != null) 
       Model.PropertyChanged += Model_PropertyChanged; 
     } 
    } 

    void Model_PropertyChanged(object sender, PropertyChangedEventArgs e) 
    { 
     RaisePropertyChanged(e.PropertyName); 
     if (e.PropertyName == "FirstName" || e.PropertyName == "LastName") 
      RaisePropertyChanged("FullName"); 
    } 

    public string FirstName 
    { 
     get { return Model.FirstName; } 
     set { Model.FirstName = value; } 
    } 

    public string LastName 
    { 
     get { return Model.LastName; } 
     set { Model.LastName = value; } 
    } 

    public string FullName 
    { 
     get { return FirstName + " " + LastName; } 
    } 


    public static IList<CustomerViewModel> GetCustomers() 
    { 
     var result = new List<CustomerViewModel>(); 
     var customers = Customer.GetCustomers(); 
     foreach (var customer in customers) 
     { 
      result.Add(new CustomerViewModel() { Model = customer }); 
     } 
     return result; 
    } 
    public event PropertyChangedEventHandler PropertyChanged; 

    private void RaisePropertyChanged(string property) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(property)); 
     } 
    } 
} 


public class Customer : INotifyPropertyChanged 
{ 
    public int ID { get; set; } 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
    public int NumberOfContracts { get; set; } 

    public static List<Customer> GetCustomers() 
    { 
     List<Customer> customers = new List<Customer>(); 
     customers = new List<Customer>(); 
     customers.Add(new Customer { FirstName = "Jim", LastName = "Smith", NumberOfContracts = 23 }); 
     customers.Add(new Customer { FirstName = "Jane", LastName = "Smith", NumberOfContracts = 22 }); 
     customers.Add(new Customer { FirstName = "John", LastName = "Tester", NumberOfContracts = 33 }); 
     customers.Add(new Customer { FirstName = "Robert", LastName = "Smith", NumberOfContracts = 2 }); 
     customers.Add(new Customer { FirstName = "Hank", LastName = "Jobs", NumberOfContracts = 5 }); 
     return customers; 
    } 

    #region INotifyPropertyChanged Members 

    public event PropertyChangedEventHandler PropertyChanged; 

    #endregion 
} 

}

maintenant dans votre interface utilisateur que vous lierez en utilisant le code suivant: customerHeaderView.DataContext = CustomerViewModel.GetCustomers();

Le code dans le ViewModel devient un peu gros mais beaucoup peut être mis dans une classe de base et toutes les propriétés qui vont au Modèle sont exactement les mêmes (pensez au modèle T4).