WPF: Liaison TreeView dans MVVM chemin étape par étape tutoriel

Introduction

Le droit chemin, j'avais trouvé la lecture cette article

C'est une longue histoire, la plupart de vous ne pouvez l'ignorer 🙂 Mais ceux, qui veulent comprendre le problème et la solution doit lire tout cela !

Je suis QA, et il y a quelques temps était devenu responsable de l'Automatisation d'un produit que je clique sur. Heureusement, cet automate n'a pas lieu, dans certains Test de l'Outil, mais dans Visual Studio, il est aussi étroites que possible au développement.

Pour nos automatismes, nous utilisons un cadre qui se composent de MbUnit (Gallion en tant que coureur) et de la MENTHE (plus de MbUnit, qui est écrit par le client, nous travaillons avec). MbUnit nous donne d'appareils de Test et les Tests, et à la MENTHE ajoute une petite couche -- Actions à l'intérieur de tests. Exemple. Le luminaire est appelé "FilteringFixture'. Il s'agit de la quantité de tests comme "TestingFilteringById", ou "TestingFilteringWithSpecialChars", etc. Chaque test consiste en actions, qui sont en unité atomique de notre test. Exemple d'actions sont: "Ouvrir l'app (paramètre)', 'OpenFilterDialog", etc.

Nous avons déjà un grand nombre de tests, qui contiennent beaucoup d'actions, c'est un gâchis. Ils utilisent des API interne du produit, nous QA. Aussi, nous commençons l'enquête une nouvelle approche d'Automatisation - UI automation via Microsoft UI Automation (désolé pour la tautologie). Donc, la nécessité de certaines "exportateur" ou "reporter" de l'outil est devenu grave pour les gestionnaires.

Il y a quelques temps, j'ai eu la tâche de développer une application, qui peut analyser une DLL (qui contient tous les accessoires, des tests et des actions), et l'exportation de sa structure dans le format lisible par l'homme (TXT, HTML, CSV, XML, tout les autres). Mais, juste après, je suis allé pour les vacances (2 semaines).

Il arrive donc que ma petite amie est allé à sa famille jusqu'en vacances (elle a également eu), et je suis restée à la maison seul. La pensée de ce que je faire de tout ce temps (2 semaines), je me souviens à ce sujet "écrire exportateur outil de tâche" et combien de temps j'ai été la planification pour commencer à apprendre à WPF. Donc, j'ai décidé de faire ma tâche pendant les vacances, et aussi de s'habiller d'une application WPF. À l'époque, j'ai entendu quelque chose à propos de MVVM, et j'ai décidé de la mettre en œuvre à l'aide de pure MVVM.

DLL qui peut analyser DLL avec fixrtures etc qui avait été écrit plutôt rapide (~1-2 jours). Après que j'avais commencé avec WPF, et cet article va vous montrer comment il a fini.

J'ai passé une grande partie de mes vacances (presque 8 jours!), en essayant de trier c'est dans ma tête et le code, et enfin, c'est fait (ou presque). Ma copine ne voulait pas croire ce que je faisais tout ce temps, mais j'ai une preuve!

Partage ma solution étape par étape dans le pseudo-code, pour aider les autres à éviter des problèmes similaires. Cette réponse est plus ressemble tutoriel =) (Vraiment?). Si vous êtes intéressé quelles étaient les choses les plus compliquées lors de l'apprentissage de WPF à partir de zéro, je dirais -- faire tout cela vraiment MVVM et f*g TreeView liaison!

Si vous voulez un fichier archivé avec la solution, je peux lui donner un peu plus tard, juste au moment où j'ai pris une décision, qu'il vaut la peine de cela. Une limite, je ne suis pas sûr que je puisse partager l'MINT.dll qui apporte Actions, comme il a été développé par le client de notre société. Mais je peux juste l'enlever, et de partager l'application, qui peut afficher des informations sur les Luminaires et les Tests seulement, mais pas sur les actions.

Vantard mots. Avec juste un peu de C# /WinForms /HTML arrière-plan et pas de pratique, j'ai été en mesure de mettre en œuvre cette version de l'application dans presque 1 semaine (et d'écrire cet article). Donc, impossible est possible! Il suffit de prendre un en vacances, comme moi, et de passer à WPF apprentissage!

Étape par étape tutoriel (w/o fichiers joints encore)

Courte répétition de la tâche:

Il y a quelques temps, j'ai eu la tâche de développer une application, qui peut analyser une DLL (qui contient des appareils de test, méthodes d'essais et mesures - unités de notre unité de test d'automatisation à base de cadre), et l'exportation de sa structure dans le format lisible par l'homme (TXT, HTML, CSV, XML, tout les autres). J'ai décidé de la mettre en œuvre à l'aide de WPF et pure MVVM (les deux étaient absolument des choses nouvelles pour moi). 2 la plupart des problèmes difficiles pour moi est devenu MVVM approche elle-même, et puis MVVM de liaison de contrôle TreeView. - Je me passer de la partie sur le modèle MVVM division, c'est un thème pour un article distinct. Les étapes ci-dessous sont sur la liaison vers TreeView dans MVVM.

1. Pas si important: Créer des DLL qui peut ouvrir DLL avec les tests unitaires et trouve des luminaires, des méthodes d'essais et de mesures (plus petit niveau de l'unité de test, écrit dans notre société) à l'aide de la réflexion. Si vous êtes intéressé par la façon dont il a été fait, regardez ici: Fonction d'analyse syntaxique, de méthode, de contenu à l'aide de la Réflexion
2. DLL: Séparée classes sont créées pour les deux installations, des tests et des actions (modèle de données, le modèle d'entité?).Nous allons les utiliser pour la liaison. Vous devriez penser par vous même, ce sera une entité de modèle de votre arbre. L'idée principale - chaque niveau de l'arbre doivent être exposés en classe, avec ces propriétés, qui vous aident à représenter le modèle de l'arbre (et, idéalement, de prendre votre place sur votre MVVM, en tant que modèle ou une partie du modèle). Dans mon cas, j'ai été intéressé par le nom de l'entité, de la liste des enfants et nombre ordinal. Nombre Ordinal est un nombre, ce qui représente de l'ordre d'une entité dans le code à l'intérieur de la DLL. Il m'aide à montrer le numéro de séquence dans le TreeView, toujours pas sûr que c'est une bonne approche, mais ça fonctionne!

public class MintFixutre : IMintEntity
{
private readonly string _name;
private readonly int _ordinalNumber;
private readonly List<MintTest> _tests = new List<MintTest>();
public MintFixutre(string fixtureName, int ordinalNumber)
{
_name = fixtureName;
if (ordinalNumber <= 0)
throw new ArgumentException("Ordinal number must begin from 1");
_ordinalNumber = ordinalNumber;
}
public List<MintTest> Tests
{
get { return _tests; }
}
public string Name { get { return _name; }}
public bool IsParent { get { return true; }  }
public int OrdinalNumber { get { return _ordinalNumber; } }
}
public class MintTest : IMintEntity
{
private readonly string _name;
private readonly int _ordinalNumber;
private readonly List<MintAction> _actions = new List<MintAction>();
public MintTest(string testName, int ordinalNumber)
{
if (string.IsNullOrWhiteSpace(testName))
throw new ArgumentException("Test name cannot be null or space filled");
_name = testName;
if (ordinalNumber <= 0)
throw new ArgumentException("OrdinalNumber must begin from 1");
_ordinalNumber = ordinalNumber;
}
public List<MintAction> Actions
{
get { return _actions; }
}
public string Name { get { return _name; } }
public bool IsParent { get { return true; } }
public int OrdinalNumber { get { return _ordinalNumber; } }
}
public class MintAction : IMintEntity
{
private readonly string _name;
private readonly int _ordinalNumber;
public MintAction(string actionName, int ordinalNumber)
{
_name = actionName;
if (ordinalNumber <= 0)
throw new ArgumentException("Ordinal numbers must begins from 1");
_ordinalNumber = ordinalNumber;
}
public string Name { get { return _name; } }
public bool IsParent { get { return false; } }
public int OrdinalNumber { get { return _ordinalNumber; } }
}

BTW, j'ai également créé une interface ci-dessous, qui met en œuvre toutes les entités. Cette interface peut vous aider dans l'avenir. Toujours pas sûr, si je l'était aussi d'y ajouter Childrens propriété de List<IMintEntity> type, ou quelque chose comme ça?

public interface IMintEntity
{
string Name { get; }
bool IsParent { get; }
int OrdinalNumber { get; }
}

1. DLL - construction du modèle de données: DLL a une méthode qui s'ouvre DLL avec les tests unitaires et l'énumération de données. Au cours de l'énumération, il construit un modèle de données comme ci-dessous. Véritable méthode de l'exemple est donné, la réflexion de base + Mono.Reflection.dll sont utilisés, ne pas confondre avec la complexité. Tout ce que vous avez besoin de regarder la façon dont la méthode remplit _fixtures liste avec les entités.

private void ParseDllToEntityModel()
{
_fixutres = new List<MintFixutre>();
//enumerating Fixtures
int f = 1;
foreach (Type fixture in AssemblyTests.GetTypes().Where(t => t.GetCustomAttributes(typeof(TestFixtureAttribute), false).Length > 0))
{
var tempFixture = new MintFixutre(fixture.Name, f);
//enumerating Test Methods
int t = 1;
foreach (var testMethod in fixture.GetMethods().Where(m => m.GetCustomAttributes(typeof(TestAttribute), false).Length > 0))
{
//filtering Actions
var instructions = testMethod.GetInstructions().Where(
i => i.OpCode.Name.Equals("newobj") && ((ConstructorInfo)i.Operand).DeclaringType.IsSubclassOf(typeof(BaseAction))).ToList();
var tempTest = new MintTest(testMethod.Name, t);
//enumerating Actions
for ( int a = 1; a <= instructions.Count; a++ )
{
Instruction action = instructions[a-1];
string actionName = (action.Operand as ConstructorInfo).DeclaringType.Name;
var tempAction = new MintAction(actionName, a);
tempTest.Actions.Add(tempAction);
}
tempFixture.Tests.Add(tempTest);
t++;
}
_fixutres.Add(tempFixture);
f++;
}
}

1. DLL: un bien Public Fixtures de la List<MintFixutre> type est créé pour revenir venez de créer le modèle de données ( Liste des appareils, qui contiennent des listes de tests, qui contient la liste des Actions ). Ce sera notre source de liaison pour TreeView.

public List<MintFixutre> Fixtures
{
get { return _fixtures; }
}

1. ViewModel de MainWindow (avec TreeView à l'intérieur): Contient de l'objet /classe de DLL qui peut analyser les tests unitaires Dll. Expose également Fixtures propriété publique à partir de la DLL de List<MintFixutre> type. Nous allons lier à elle à partir de XAML de MainWindow. Quelque chose comme ça (en simplifié):

var _exporter = MySuperDllReaderExporterClass ();
//public property of ViewModel for TreeView, which returns property from #4
public List<MintFixture> Fixtures { get { return _exporter.Fixtures; }}
//Initializing exporter class, ParseDllToEntityModel() is called inside getter 
//(from step #3). Cool, we have entity model for binding.
_exporter.PathToDll = @"open file dialog can help";
//Notifying all those how are bound to the Fixtures property, there are work for them, TreeView, are u listening?
//will be faced later in this article, anticipating events
OnPropertyChanged("Fixtures");

1. XAML de MainWindow - les données de Configuration des modèles de: l'Intérieur d'une Grille, qui contient TreeView, nous créons <Grid.Resources> section, qui contient un ensemble de modèles pour nos TreeViewItems. HierarchicalDataTemplate (Montages et Essais) est utilisé pour ceux qui ont les éléments enfants, et DataTemplate est utilisé pour la "feuille de route" des éléments (Actions). Pour chaque modèle, nous spécifier son Contenu (texte, TreeViewItem de l'image, etc.), ItemsSource (dans ce cas, l'objet a des enfants, par exemple, pour les appareils, il est {Binding Path=Tests}), et ItemTemplate (encore une fois, uniquement dans le cas où cet élément a des enfants, ici, nous avons mis le couplage entre les modèles - FixtureTemplate utilise TestTemplate pour ses enfants, TestTemplate utilise ActionTemplate pour ses enfants, des modèles d'Action de ne pas utiliser quoi que ce soit, c'est une feuille!). IMPORTANT: N'oubliez pas, que pour "lien" "un" modèle "d'un autre", l ' "autre" modèle doit être défini dans le code XAML au-dessus de la "une"! (juste l'énumération de mes propres erreurs 🙂 )

2. XAML TreeView lien: Nous l'installation TreeView avec: le lien avec le modèle de données de ViewModel (rappelez-vous bien public?) et avec tout juste préparé des modèles, qui représentent le contenu, l'apparence, les sources de données et de l'imbrication des éléments de l'arborescence! Une note plus importante. Ne définissez pas votre Dernier comme "statique" des ressources à l'intérieur de XAML, comme <Window.Resources><MyViewModel x:Key="DontUseMeForThat" /></Window.Resources>. Si vous le faites, alors vous ne serez pas en mesure de l'informer sur la propriété a changé. Pourquoi? Ressource statique est la ressource statique, elle s'initialise, et après que reste immuable. J'ai peut-être faux, mais c'était un de mes maladresses. Donc, pour TreeView utilisation ItemsSource="{Binding Fixtures}" au lieu de ItemsSource="{StaticResource myStaticViewModel}"

3. ViewModel - ViewModelBase - Propriété a Changé de: Presque tous. Stop!!! Lorsque l'utilisateur ouvre une application, alors qu'initialement TreeView est vide, bien sûr, en tant que l'utilisateur n'a pas ouvert de n'importe quelle DLL encore! Nous devons attendre jusqu'à ce que l'utilisateur ouvre une DLL, et seulement ensuite effectuer la liaison. Il se fait via le OnPropertyChanged événement. Pour rendre la vie plus facile, tout mon Viewmodel sont héritées de ViewModelBase, de quel droit il expose cette fonctionnalité à tous mon ViewModel.

public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}
protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, args);
}        
}

1. XAML OnPropertyChanged et commandant. L'utilisateur clique sur un bouton ouvre la DLL qui contient de l'unité de données de tests. Comme nous l'aide de MVVM, puis cliquez sur sont gérées par le commandant. À la fin de la OpenDllExecuted gestionnaire OnPropertyChanged("Fixtures") est exécutée, en notifiant l'Arbre, que la propriété, à laquelle il est lié à a été changé, et qu'il est maintenant temps pour actualiser lui-même. RelayCommand de la classe helper peut être pris pour exemple de il y). BTW, je sais, il y a quelques bibliothèques d'assistance et d'outils existent quelque Chose comme cela se produit dans le code XAML:

2. Et ViewModel - Commandant

private ICommand _openDllCommand;
//...
public ICommand OpenDllCommand
{
get { return _openDllCommand ?? (_openDllCommand = new RelayCommand(OpenDllExecuted, OpenDllCanExecute)); }
}
//...
//decides, when the <OpenDll> button is enabled or not
private bool OpenDllCanExecute(object obj)
{
return true; //always true for Open DLL button
}
//...
//in fact, handler
private void OpenDllExecuted(object obj)
{
var openDlg = new OpenFileDialog { ... };
_pathToDll = openDlg.FileName;
_exporter.PathToDll = _pathToDll;
//Notifying TreeView via binding that the property <Fixtures> has been changed,
//thereby forcing the tree to refresh itself
OnPropertyChanged("Fixtures");
}

1. Final de l'INTERFACE utilisateur (mais pas de finale pour moi, beaucoup de choses doivent être faites!). Étendue WPF toolkit a été utilisé quelque part: http://wpftoolkit.codeplex.com/

OriginalL'auteur