WPF: TreeView dans MVVM

Question

J'ai un TreeView que j'ai (enfin) pu remplir à partir d'une base de données en utilisant la liaison de données.

Il y a 2 objets qui vivent dans l'arbre:

• FavoriteFolder - un objet qui peut avoir des enfants: soit des dossiers ou des rapports.
• FavoriteReport - un objet qui ne peut pas avoir d'enfants: lorsqu'un utilisateur clique sur cet élément, il va générer un rapport.

Actuellement, j'ai une configuration de type Model-View (je pense), et je voudrais changer à MVVM pour que je puisse faire des choses avec les TreeView -articles plutôt que de les afficher simplement.

J'ai regardé de nombreux exemples, mais je suis encore nouveau pour MVVM et WPF en général, de sorte que toute orientation pour mon exemple particulier serait très apprécié

Mes deux classes qui existent dans le TreeView sont:

éléments du dossier:

public class FavoriteFolder 
{ 
    private string _connectionString = new ServerInfo().ConnectionString; 
    private string _folderID; 
    private string _parentID; 
    private string _folderTitle; 

    private ObservableCollection<FavoriteFolder> _folders; 
    private ObservableCollection<FavoriteReport> _reports; 
    private ObservableCollection<object> _children; 

    public FavoriteFolder() 
    { 

    } 

    public ObservableCollection<object> Children 
    { 
     get 
     { 
      _getChildren(); 
      return _children; 
     } 
    } 

    public string FolderID 
    { 
     get { return _folderID; } 
     set { _folderID = value; } 
    } 

    public string ParentID 
    { 
     get { return _parentID; } 
     set { _parentID = value; } 
    } 

    public string FolderTitle 
    { 
     get { return _folderTitle; } 
     set { _folderTitle = value; } 
    } 

    private void _getChildren() 
    { 
     _folders = new ObservableCollection<FavoriteFolder>(); 
     _reports = new ObservableCollection<FavoriteReport>(); 

     using (SqlConnection cnn = new SqlConnection(_connectionString)) 
     { 
      cnn.Open(); 
      string sql = "SELECT * FROM tbl_report_folders where fdr_parent_id =" + _folderID; 
      SqlCommand cmd = new SqlCommand(sql, cnn); 

      SqlDataReader reader = cmd.ExecuteReader(); 

      while (reader.Read()) 
      { 
       FavoriteFolder folder = new FavoriteFolder(); 

       folder.FolderID = reader["fdr_folder_id"].ToString(); 
       folder.FolderTitle = reader["fdr_folder_name"].ToString(); 
       folder.ParentID = reader["fdr_parent_id"].ToString(); 

       _folders.Add(folder); 
      } 

      reader.Close(); 

      sql = "SELECT * FROM tbl_reports where rpt_folder_id =" + _folderID; 
      cmd = new SqlCommand(sql, cnn); 

      reader = cmd.ExecuteReader(); 

      while (reader.Read()) 
      { 
       FavoriteReport report = new FavoriteReport(); 

       report.ReportID = reader["rpt_report_id"].ToString(); 
       report.ReportTitle = reader["rpt_report_name"].ToString(); 
       report.ParentID = reader["rpt_folder_id"].ToString(); 

       _reports.Add(report); 
      } 
     } 

     //add the children to the collection 
     foreach (var folder in this._folders) 
      _children.Add(folder); 

     foreach (var report in this._reports) 
      _children.Add(report); 
    } 
} 

éléments de rapport:

public class FavoriteReport 
{ 
    private string _reportID; 
    private string _parentID; 
    private string _reportTitle; 

    public FavoriteReport() 
    { 

    } 

    public string ReportID 
    { 
     get { return _reportID; } 
     set { _reportID = value; } 
    } 

    public string ParentID 
    { 
     get { return _parentID; } 
     set { _parentID = value; } 
    } 

    public string ReportTitle 
    { 
     get { return _reportTitle; } 
     set { _reportTitle = value; } 
    } 
} 

Et les MainWindow.xaml.cs -

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 

     ObservableCollection<object> items = new ObservableCollection<object>(); 

     FavoriteFolder fdr = new FavoriteFolder(); 

     fdr.FolderID = "0"; 

     items = fdr.Children; 

     this.DataContext = items; 
    } 
} 

Answer 1

Ma première recommandation serait de déposer dans une boîte à outils MVVM, car il est plus facile que d'avoir à tout faire vous-même (par exemple implémenter l'interface INotifyPropertyChanged). J'utilise MVVM Light by Laurent Bungion.

En supposant que vous utilisez MVVM Light (vous pouvez extrapoler si vous utilisez une autre boîte à outils) ...

Alors, pour convertir en vous MVVM besoin de faire quelques petites choses.

1. Créer défini Models. J'utilise généralement POCO, en définissant simplement les propriétés d'un modèle. Cela signifie que vous devez extraire votre couche d'accès aux données (plus de détails ci-dessous). Créez votre ViewModel C'est là que vous avez vos propriétés auxquelles vous vous engagez dans votre veiw. Votre ObservableCollections serait assis ici. Initialiser une instance des classes que vous avez créées irait ici. Les appels à votre couche DAL iraient ici. (au lieu de dans le constructeur de votre vue, par exemple).

   Ajoutez ce ViewModel à votre ViewModelLocator (j'utilise l'extrait de code mvvmlocatorproperty fourni avec MVVM Light). Liez votre View au ViewModel en utilisant le Locator. Dans votre UserControl, vous mettiez quelque chose comme ça dans la déclaration:

   DataContext="{Binding YourViewModel, Source={StaticResource Locator}}" 
   

2. je suivais les conseils de Brennan Vincent. Je crée généralement une interface de service (note: pas une classe, mais une interface) qui définit les méthodes que mon DAL (couche d'accès aux données) aura.Je fais ceci pour permettre Blendability, alias des données de temps de conception. Si vous n'êtes pas familier avec les interfaces, peut-être qu'une simple classe DAL est une bonne façon de commencer. Ensuite, j'utilise l'injection de dépendance (DI) pour injecter une instance de mon service DAL. DI est assez simple - dans le ViewModelLocator vous devez ajouter (instancier) votre classe de service DAL & passer à travers votre appel vm = New ViewModel(MyDALService dalService). Vous devez également, de toute évidence, accepter une référence MyDALService dans votre constructeur ViewModel. Voici un exemple de mon constructeur EquipmentViewModel sur un projet que j'ai travaillé sur:

   public EquipmentViewModel(Services.IEquipmentService equipmentService) 
   { 
       EquipmentService = equipmentService; 
       LoadData(); 
   } 
   

Ce ViewModel accepte un paramètre de type IEquipmentService (ce qui est mon interface). Dans la méthode LoadData, j'appelle la méthode EquipmentService.GetEquipment() de ma couche d'accès aux données qui touche ma couche de base de données.

Toutes les questions me le font savoir. MVVM peut être une douleur, mais je suis très content d'y être resté. Bonne chance. :)

Answer 2

Josh Smith a donné la description définitive de comment utiliser MVVM to simplify the TreeView Je ne peux pas ajouter grand-chose.