Je vous propose de voir dans cette troisi\u00e8me partie :<\/p>\n
- \n
- La mise en cache des images (am\u00e9liorons l\u2019interface utilisateur encore un petit peu)<\/li>\n
- Le Drag and Drop avec une s\u00e9lection multiple d\u2019\u00e9l\u00e9ments<\/li>\n<\/ul>\n
Optimisation avec mise en cache<\/h1>\n
Impl\u00e9mentation d\u2019un syst\u00e8me de cache<\/h2>\n
Le but est de garder les x derni\u00e8res images d\u00e9j\u00e0 charg\u00e9e afin d\u2019\u00e9viter un rechargement permanent de ces images.<\/p>\n
Pour cela nous mettons en place une liste partag\u00e9e en appel static, ainsi que son verrou (nous sommes dans un environnement multi-thread) afin de garantir l\u2019\u00e9criture correcte des donn\u00e9es.<\/p>\n
\nconst int maxThumbnailInCache = 300;\nprivate static readonly List<ImageFileViewModel> _cacheThumbnail \n= new List<ImageFileViewModel>();\nprivate static readonly object _lockCacheThumbnail = new object();\n<\/pre>\n<\/div>\n
Puis nous impl\u00e9mentons la m\u00e9thode static AddThumbnailInCache<\/strong><\/p>\n
<\/p>\n
\nprivate static void AddThumbnailInCache(ImageFileViewModel p)\n{\n if (p == null) return;\n if (_cacheThumbnail.Contains(p))\n {\n lock (_lockCacheThumbnail)\n {\n _cacheThumbnail.Remove(p);\n }\n }\n\n lock (_lockCacheThumbnail)\n {\n _cacheThumbnail.Add(p);\n if (_cacheThumbnail.Count > maxThumbnailInCache)\n lock (_lockCacheThumbnail)\n {\n _cacheThumbnail.Remove(_cacheThumbnail[0]);\n }\n }\n}<\/pre>\n<\/div>\nLa m\u00e9thode teste si l\u2019\u00e9l\u00e9ment est pr\u00e9sent. Si il est pr\u00e9sent, l\u2019\u00e9l\u00e9ment est replac\u00e9 \u00e0 la fin de la liste.<\/p>\n
Si le nombre d\u2019\u00e9l\u00e9ments d\u00e9passe le maximum d\u2019\u00e9l\u00e9ment fix\u00e9s dans le cache (maxThumbnailInCache<\/strong>), l\u2019\u00e9l\u00e9ment en haut (le plus ancien) est supprim\u00e9.<\/p>\n
Cette m\u00e9thode est appel\u00e9e lorsque l\u2019image est charg\u00e9e en m\u00e9moire.<\/p>\n
\npublic ImageSource Thumbnail\n{\n get\n {\n if (_thumbnail == null)\n {\n LoadImage();\n return null;\n }\n\n AddThumbnailInCache(this);\n return _thumbnail;\n }\n}<\/pre>\n<\/div>\nNous modifions maintenant l\u2019instruction de lib\u00e9ration des \u00e9l\u00e9ments pour ne supprimer que ceux absent de la liste<\/p>\n
\ninternal bool CleanUp()\n{\n if (!_cacheThumbnail.Contains(this))\n {\n lock(_lockCacheThumbnail)\n { lock (_lockListThumbnail)\n {\n _listThumbnail.Remove(this);\n _loading = false;\n _thumbnail = null;\n }\n }\n return false;\n }\n else\n return true;\n}<\/pre>\n<\/div>\nPuis dans la partie View, nous demandons \u00e0 ne pas d\u00e9charger l\u2019\u00e9l\u00e9ment si CleanUp n\u2019a pas r\u00e9ussi (cas o\u00f9 l\u2019on garde l\u2019\u00e9l\u00e9ment en cache).<\/p>\n
<\/p>\n
\nnamespace wpfListViewSample03.View\n{\n public partial class ImageFileListView : UserControl\n {\n public ImageFileListView()\n {\n InitializeComponent();\n }\n\n private void ListViewImage_CleanUpVirtualizedItem\n (object sender, CleanUpVirtualizedItemEventArgs e)\n {\n if (e.Value is ImageFileViewModel)\n {\n e.Cancel = (e.Value as ImageFileViewModel).CleanUp();\n }\n } \n }\n}\n<\/pre>\n<\/div>\nEx\u00e9cution :<\/p>\n
![\"tmp31B\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-tmp31b-thumb-png.png\" "\\"tmp31B\\"")
<\/a><\/p>\nEt voila, 316 \u00e9l\u00e9ments (300 en cache + 16 affich\u00e9s) sont gard\u00e9s en cache, la vignette (thumbnail)<\/strong> ne sera pas ainsi constamment r\u00e9g\u00e9n\u00e9r\u00e9e.<\/p>\n
Les tests unitaires<\/h2>\n
Les tests unitaires associ\u00e9s sont assez simples. Il faudra penser \u00e0 ajouter le vidage de la liste _CacheThumbnail<\/strong>.<\/p>\n
\n[TestInitialize()]\npublic void MyTestInitialize()\n{\n \/\/ Clear Thread processus\n ImageFileViewModel_Accessor._loaderThreadThumbnail.Abort();\n \/\/ call the static constructor \n Type staticType = typeof(ImageFileViewModel);\n ConstructorInfo ci = staticType.TypeInitializer;\n object[] parameters = new object[0];\n ci.Invoke(null, parameters);\n \/\/ and clear static attribute _ListThumbnails and _cacheThumbnails\n ImageFileViewModel_Accessor._listThumbnail.Clear();\n ImageFileViewModel_Accessor._cacheThumbnail.Clear();\n}<\/pre>\n<\/div>\nLe Drag And Drop dans une ListBox WPF avec M-V-VM<\/h1>\n
Drag and Drop, Quoi de plus ?<\/h2>\n
Le drag and drop de ListBox (ou ListView) a d\u00e9j\u00e0 \u00e9t\u00e9 trait\u00e9 dans de nombreux articles de qualit\u00e9 dont je me suis inspir\u00e9 pour r\u00e9aliser cette prochaine version.<\/p>\n
Voici la liste de ces articles<\/p>\n
- \n
- http:\/\/geekswithblogs.net\/hinshelm\/archive\/2009\/08\/14\/wpf-drag-amp-drop-behaviour.aspx<\/a><\/li>\n
- http:\/\/bea.stollnitz.com\/blog\/?p=53<\/a><\/li>\n
- http:\/\/www.codeproject.com\/KB\/WPF\/ListViewDragDropManager.aspx<\/a><\/li>\n
- http:\/\/blogs.msdn.com\/jaimer\/archive\/2007\/07\/12\/drag-drop-in-wpf-explained-end-to-end.aspx<\/a><\/li>\n
- http:\/\/geekswithblogs.net\/sonam\/archive\/2009\/03\/02\/listview-dragdrop-in-wpfmultiselect.aspx<\/a><\/li>\n<\/ul>\n
Ce qui manquait, une version g\u00e9n\u00e9rale (chaque petit bout \u00e9tant dans dans la plupart de ces articles) avec<\/p>\n
- \n
- La gestion du d\u00e9placement d\u2019un Item dans une ListBox ou ListView. La plupart font une copie des \u00e9l\u00e9ments mais ne g\u00e8rent pas les d\u00e9placements<\/li>\n
- La multi-s\u00e9lection, la copie ou le d\u00e9placements de plusieurs \u00e9l\u00e9ments s\u00e9lectionn\u00e9s.<\/li>\n
- Le scroll automatique lorsque l\u2019on d\u00e9place les \u00e9l\u00e9ments en dehors de la fen\u00eatre<\/li>\n
- Une s\u00e9paration entre la gestion du drag and drop et la couche visuelle d\u2019affichage des Adorners (Aspect graphique indiquant la position des \u00e9l\u00e9ments gliss\u00e9s)<\/li>\n<\/ul>\n
J\u2019ai donc r\u00e9alis\u00e9 un premier \u201cDragAndDropManager<\/strong>\u201d sans les fioritures graphiques puis un h\u00e9ritier qui va uniquement impl\u00e9menter les aspect d\u2019affichage (\u00ab\u00a0Adorners\u00a0\u00bb).<\/p>\n
Organisation du projet Drag And Drop Manager.<\/h2>\n
Toute la gestion du drag and drop se retrouve dans un projet unique DragDropManager<\/strong> qui pourra \u00eatre repris dans un projet ind\u00e9pendant pour vos ListView ou ListBox.<\/p>\n
L\u2019organisation du projet est la suivante<\/p>\n
![\"tmpAA\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-tmpaa-thumb-png.png\" "\\"tmpAA\\"")
<\/a><\/p>\nLa partie Model n\u2019est pas sp\u00e9cifique WPF.<\/p>\n
Elle contient 2 classes<\/p>\n
- \n
- DragDropManagerList<\/strong> Le gestionnaire de DragAndDrop<\/strong> permettant de g\u00e9rer des ensembles, et les m\u00e9canismes de d\u00e9but, fin d\u2019op\u00e9rations de DragAndDrop.<\/li>\n
- MouseUtilities<\/strong> inclue une fonction permettant de localiser le curseur de la souris au moment du Drag. Il faut savoir que la grosse difficult\u00e9 lors du drag and drop est de pouvoir g\u00e9rer la position du curseur. Microsoft en effet n\u2019a pas pr\u00e9vu jusqu\u2019\u00e0 la version 3.5 de pouvoir suivre le mouvement de la souris lors de cette op\u00e9ration.<\/li>\n<\/ul>\n
La partie ViewModel contient 2 classes principales<\/p>\n
- \n
- DragDropManagerListBoxViewModel<\/strong> g\u00e8re les fonctions de drag et drop de la souris avec les composants WPF ListBox. Elle d\u00e9rive de la classe DragDropManagerList<\/strong> en utilisant ces fonctionnalit\u00e9s de base de DragDropManagerList. Cette classe peut \u00eatre utilis\u00e9e si vous n\u2019avez pas besoin des Adorners<\/li>\n
- DragDropManagerListBoxAdornerViewModel<\/strong> g\u00e8re l\u2019affichage des 2 Adorners<\/li>\n<\/ul>\n
2 classes d\u00e9finissent les Adorners<\/p>\n
- \n
- DropAdorner affiche la partie visuelle (vignette + libell\u00e9 de la s\u00e9lection) en transparence sous le curseur de la souris<\/li>\n
- InsertionAdorner affiche une ligne noire indiquant l\u2019emplacement destination des \u00e9l\u00e9ments \u00e0 ins\u00e9rer dans la liste.<\/li>\n<\/ul>\n
Les 2 classes Adorners ont \u00e9t\u00e9 reprises des projets cit\u00e9s plus haut. Il est possible d\u2019\u00e9crire ses propres Adorners pour personnaliser le type d\u2019affichage<\/p>\n
![\"image\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-image-thumb-69de545397b2fad8f6f582266469836a-png.png\" "\\"image\\"")
<\/a><\/p>\nL\u2019ensemble des classes permettant la gestion du DragAndDrop sont r\u00e9sum\u00e9es ici<\/p>\n
<\/p>\n
![\"image\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-image-thumb-69cdbddd1536716611a5430175cc2786-png.png\" "\\"image\\"")
<\/a><\/p>\n<\/p>\n
La gestion des \u00e9l\u00e9ments multiples dans le Drag en Drop<\/h2>\n
Le drag and drop d\u2019\u00e9l\u00e9ments multiples va passer par une structure Dictionary _draggedItems<\/strong>.<\/p>\n
La cl\u00e9 du dictionnaire va contenir la position de l\u2019\u00e9l\u00e9ment et sa valeur contiendra l\u2019objet de type T G\u00e9n\u00e9rique.<\/p>\n
\nprotected Dictionary<int, T> _draggedItems = new Dictionary<int, T>();<\/pre>\n<\/div>\n
La classe DragDropManagerList impl\u00e9mente ensuite 3 m\u00e9thodes statiques permettant de g\u00e9rer le Drop des \u00e9l\u00e9ments s\u00e9lectionn\u00e9s (_draggedItems<\/strong>).<\/p>\n
- \n
- DoDrop<\/strong> sera appel\u00e9 au moment du Drop des \u00e9l\u00e9ments dans la liste. Il retourne les nouveaux \u00e9l\u00e9ments copi\u00e9s sous forme d\u2019un dictionnaire (SI les \u00e9l\u00e9ments sont d\u00e9plac\u00e9s retourne null). En fonction de la touche de clavier Ctrl utilis\u00e9, les \u00e9l\u00e9ments seront soit copi\u00e9s soit d\u00e9plac\u00e9s.<\/li>\n
- CopyDraggedItems<\/strong> g\u00e8re la copie des \u00e9l\u00e9ments<\/li>\n
- MoveDraggedItems<\/strong> g\u00e8re le d\u00e9placement des \u00e9l\u00e9ments<\/li>\n<\/ul>\n
\nprotected static Dictionary<int, T> DoDrop(ObservableCollection<T> itemsSource, Dictionary<int, T> draggedItems\n , int index, DragDropEffects effects, DragDropKeyStates keyStates)\n{\n T dropTarget = itemsSource[index];\n if (draggedItems.ContainsValue(dropTarget)) return null;\n\n if ((DragDropEffects.Move & effects) == DragDropEffects.Move\n && (DragDropKeyStates.ControlKey & keyStates) \n != DragDropKeyStates.ControlKey)\n effects = DragDropEffects.Move;\n if ((DragDropEffects.Copy & effects) == DragDropEffects.Copy)\n effects = DragDropEffects.Copy;\n\n switch (effects)\n {\n case DragDropEffects.Move:\n {\n MoveDraggedItems(itemsSource, draggedItems, index);\n draggedItems.Clear();\n return null;\n }\n\n case DragDropEffects.Copy:\n {\n Dictionary<int, T> newItems = CopyDraggedItems(itemsSource, draggedItems, index);\n draggedItems.Clear();\n return newItems;\n }\n }\n return null;\n}\n\nprotected static Dictionary<int, T> CopyDraggedItems(ObservableCollection<T> itemsSource, Dictionary<int, T> draggedItems, int index)\n{\n Dictionary<int, T> newItems = new Dictionary<int, T>();\n int i = 0;\n foreach (int key in draggedItems.Keys.OrderBy(ii => ii))\n {\n T draggedItemClone = draggedItems[key].Clone() as T;\n if (draggedItemClone != null)\n {\n itemsSource.Insert(index + i, draggedItemClone);\n newItems.Add(index + i, draggedItemClone);\n i++;\n }\n }\n return newItems;\n}\n\nprotected static void MoveDraggedItems(ObservableCollection<T> itemsSource, Dictionary<int, T> draggedItems, int index)\n{\n int dest = index;\n int origin = 0;\n Dictionary<int, T> completedDraggedItems = draggedItems;\n T ModelDest = itemsSource[dest];\n foreach (int key in completedDraggedItems.Keys)\n {\n origin = itemsSource.IndexOf(completedDraggedItems[key]);\n if (itemsSource[dest] != completedDraggedItems[key])\n {\n if (draggedItems.ContainsKey(key))\n { \n ModelDest = draggedItems[key];\n }\n if (key > index)\n dest++;\n itemsSource.Move(origin, dest);\n }\n }\n}<\/pre>\n<\/div>\nLa classe impl\u00e9mente le m\u00e9canisme de gestion du d\u00e9placement visuel des \u00e9l\u00e9ments durant le Drag.<\/p>\n
Les m\u00e9thodes seront surcharg\u00e9es dans les classes h\u00e9rit\u00e9es pour g\u00e9rer les particularit\u00e9s visuelles (ListBox, Adorners,\u2026).<\/p>\n
\nprotected void DoDragOperation()\n{\n InitializeDragOperation();\n try\n {\n PerformDragOperation();\n }\n finally\n {\n FinishDragOperation();\n }\n}<\/pre>\n<\/div>\nLa gestion du Drag and Drop en M-V-VM<\/h2>\n
L\u2019initialisation du DragAndDropManager va se faire de la fa\u00e7on suivante dans la couche View.<\/p>\n
\npublic ImageFileListView()\n{\n InitializeComponent();\n new DragDropManagerListBoxViewModel\n <ImageFileViewModel>(ListViewImage);\n}\n<\/pre>\n<\/div>\n<\/p>\n
Le constructeur initialise le composant visuel ListBox ListViewImage avec le type objet ImageFileViewModel.<\/p>\n
Dans la classe DragDropManagerListBoxViewModel, les \u00e9v\u00e8nements suivants sont attrap\u00e9s et redirig\u00e9s pour la gestion du Drag and Drop.<\/p>\n
<\/p>\n
\npublic virtual ListBox ListBox\n{\n get {return _listBox;}\n set\n {\n if (_listBox != null)\n {\n _listBox.PreviewMouseMove -= listBoxPreviewMouseMove;\n _listBox.PreviewMouseLeftButtonDown -= listBoxPreviewMouseLeftButtonDown;\n _listBox.PreviewMouseLeftButtonUp -= listBoxPreviewMouseLeftButtonUp;\n _listBox.DragOver -= listBoxDragOver;\n _listBox.Drop -= listBoxDrop;\n }\n _listBox = value;\n _listBox.AllowDrop = true;\n if (_listBox != null)\n {\n if (!_listBox.AllowDrop)\n _listBox.AllowDrop = true;\n _listBox.PreviewMouseMove += listBoxPreviewMouseMove;\n _listBox.PreviewMouseLeftButtonDown += listBoxPreviewMouseLeftButtonDown;\n _listBox.PreviewMouseLeftButtonUp += listBoxPreviewMouseLeftButtonUp;\n _listBox.DragOver += listBoxDragOver;\n _listBox.Drop += listBoxDrop;\n\n }\n }\n}<\/pre>\n<\/div>\n- \n
- PreviewMouseLeftButtonDown<\/strong> : Bouton de la souris enfonc\u00e9 : utilis\u00e9 pour initialis\u00e9 l\u2019op\u00e9ration de glisser (drag) et d\u00e9terminer les \u00e9l\u00e9ments \u00e0 placer dans _draggedItems.<\/li>\n
- PreviewMouseMove<\/strong> : d\u00e9placement de la souris :\u00a0 utilis\u00e9 pour l\u2019affichage des Adorners, l\u2019affichage du curseur (selon appuie du bouton CTRL et la s\u00e9lection de l\u2019item de destination<\/li>\n
- DragOver<\/strong> : Survol des \u00e9l\u00e9ments lorsque les items sont s\u00e9lectionn\u00e9s. Permet de rafraichir les Adorners et de g\u00e9rer le d\u00e9placement de la barre de scrolling lorsque le curseur est proche des limites Haut et Bas.<\/li>\n
- Drop<\/strong> : Action d\u00e9finitive du Drag and Drop, Copie ou d\u00e9placement des \u00e9l\u00e9ments<\/li>\n
- PreviewMouseLeftButtonUp<\/strong> : Bouton de la souris rel\u00e2ch\u00e9, vide les \u00e9l\u00e9ments s\u00e9lectionn\u00e9s (_draggedItems.Clear) .<\/li>\n<\/ul>\n
Le d\u00e9placement automatique des \u00e9l\u00e9ments durant le Drag and Drop<\/h2>\n
\nprotected virtual void listBoxDragOver(object sender, DragEventArgs e)\n{\n AutoScrollCursorBounds();\n}\n\nprivate void AutoScrollCursorBounds()\n{\n Point ptMouse = DragDropManager.MouseUtilities.GetMousePosition(_listBox);\n Rect bounds = VisualTreeHelper.GetDescendantBounds(_listBox);\n if (ptMouse.Y > bounds.Height - 10 || ptMouse.Y < 10)\n _listBox.ScrollIntoView(GetCurrentListBoxItem());\n}<\/pre>\n<\/div>\nDurant le d\u00e9placement des \u00e9l\u00e9ments s\u00e9lectionn\u00e9s, la m\u00e9thode AutoScrollCursorBounds()<\/strong> est appel\u00e9e. Cette m\u00e9thode regarde la position de la Souris, la compare aux bords de la liste et r\u00e9alise le scroll sur l\u2019\u00e9l\u00e9ment s\u00e9lectionn\u00e9 si elle est proche d\u2019un bord.<\/p>\n
La gestion des Adorners (InsertionAdorner et DropAdorner)<\/h2>\n
Elle s\u2019effectue avec la classe DragDropManagerListBoxAdornerViewModel.<\/strong><\/p>\n
InsertionAdorner<\/strong> et DropAdorner<\/strong> sont 2 classes trouv\u00e9es sur les diff\u00e9rents forums.<\/p>\n
Josh Smith a \u00e9crit le DropAdorner<\/strong> et l\u2019InsertionAdorner<\/strong> provient du site de bea Stollnitz.<\/p>\n
<\/a><\/p>\nLa cr\u00e9ation de ces 2 descendants de Adorners intervient \u00e0 2 moment diff\u00e9rents.<\/p>\n
Le DropAdorner est cr\u00e9\u00e9 d\u00e8s le d\u00e9but de l\u2019op\u00e9ration de Drag (PreviewMouseMove appelle DoDragOperation qui lance InitializeDragOperation()) pour afficher la vignette des \u00e9l\u00e9ments en d\u00e9placement.<\/p>\n
<\/p>\n
\nprotected override void InitializeDragOperation() \n{\n base.InitializeDragOperation();\n if (ListBox.SelectedItem != null)\n {\n T draggeditem = ListBox.SelectedItem as T;\n if (draggeditem != null)\n {\n ListBoxItem lvi = GetVisualItem(draggeditem) as ListBoxItem;\n if (lvi != null)\n CreateAdornerLayer(lvi);\n }\n }\n}<\/pre>\n<\/div>\nLe InsertionAdorner<\/strong> est cr\u00e9\u00e9 uniquement au survol d\u2019un \u00e9l\u00e9ment s\u00e9lectionnable et d\u00e9truit d\u00e8s que le curseur change de ligne.<\/p>\n
\nprivate void ListBoxDragEnter(object sender, DragEventArgs e)\n{\n if (dragAdorner != null && dragAdorner.Visibility != Visibility.Visible)\n {\n UpdateDragAdornerLocation();\n dragAdorner.Visibility = Visibility.Visible;\n }\n\n object draggedItem = e.Data.GetData(format.Name);\n if (draggedItem != null)\n {\n CreateInsertionAdorner();\n }\n}\n\nprivate void ListBoxPreviewDragLeave(object sender, DragEventArgs e)\n{\n object draggedItem = e.Data.GetData(format.Name);\n if (draggedItem != null)\n {\n RemoveInsertionAdorner();\n }\n}<\/pre>\n<\/div>\n<\/p>\n
Lors de l\u2019arr\u00eat de la suppression du d\u00e9placement par rel\u00e2chement de la souris, les Adorners sont supprim\u00e9s.<\/p>\n
\nprotected override void FinishDragOperation()\n{\n RemoveDragAdorner();\n RemoveInsertionAdorner();\n base.FinishDragOperation();\n}<\/pre>\n<\/div>\nAu cours du d\u00e9placement du pointeur de la souris, la position du DropAdorner est mise \u00e0 jour.<\/p>\n
Le nouveau positionnement est calcul\u00e9 et pass\u00e9 \u00e0 l\u2019objet Adorner (dragAdorners.SetOffsets(left, top);<\/p>\n
\nprivate void UpdateDragAdornerLocation()\n{\n if (this.dragAdorner != null)\n {\n Point ptCursor = DragDropManager.MouseUtilities.GetMousePosition(ListBox);\n double left = ptCursor.X - ptMouseDown.X;\n double top = ptCursor.Y;\n dragAdorner.SetOffsets(left, top);\n }\n}<\/pre>\n<\/div>\nLe DragAndDrop avec Adorners s\u2019utilise simplement, vous devez utiliser la classe DragDropManagerListBoxAdornerViewModel<\/strong> dans le constructeur de la fa\u00e7on suivante :<\/p>\n
\npublic ImageFileListView()\n{\n InitializeComponent();\n new DragDropManagerListBoxAdornerViewModel\n <ImageFileViewModel>(ListViewImage);\n}\n<\/pre>\n<\/div>\nLe probl\u00e8me de s\u00e9lection avec la multi-s\u00e9lection et le Drag and Drop<\/h2>\n
Vous l\u2019avez peut \u00eatre d\u00e9j\u00e0 remarqu\u00e9, la multi-s\u00e9lection pose un probl\u00e8me avec le Drag and Drop dans une LisView.<\/p>\n
Le bouton de la souris lorsqu\u2019il est press\u00e9 au moment du Drag sur un \u00e9l\u00e9ment d\u00e9j\u00e0 s\u00e9lectionn\u00e9 provoque la d\u00e9-s\u00e9lection de tous les autres \u00e9l\u00e9ments.<\/p>\n
![\"image\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-image-thumb-0c71151b4a6a2d8edd6c80ef48e3940e-png.png\" "\\"image\\"")
<\/a> ![\"image\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-image-thumb-4c3d9d39fbc7ced19a1d3cdc591ba771-png.png\" "\\"image\\"")
<\/a><\/p>\nComme il s\u2019agit d\u2019un probl\u00e8me de composant visuel WPF, nous allons traiter ce disfonctionnement dans la partie View en modifiant le comportement du ListViewItem.<\/p>\n
Pour cela il faut surcharger la classe ListViewItem et modifier le type d\u2019\u00e9l\u00e9ments renvoy\u00e9 par le ListView<\/p>\n
\npublic class ListViewMultiSelect : ListView\n{\n protected override DependencyObject GetContainerForItemOverride()\n {\n return new ListViewItemMultiSelect();\n }\n}<\/pre>\n<\/div>\nEnsuite, le nouveau ListViewItem (ici ListViewItemMultiSelect) modifie le comportement du click.<\/p>\n
- \n
- Si l\u2019\u00e9l\u00e9ment n\u2019est pas d\u00e9j\u00e0 s\u00e9lectionn\u00e9, la s\u00e9lection est faite normalement \u00e0 la pression du bouton de la souris<\/li>\n
- Si l\u2019\u00e9l\u00e9ment est s\u00e9lectionn\u00e9, rien n\u2019est fait au moment de\u00a0 la pression du bouton (afin de garder les autres \u00e9l\u00e9ments s\u00e9lectionn\u00e9s) et la gestion de la s\u00e9lection est report\u00e9e au moment du rel\u00e2chement du bouton de la souris.<\/li>\n<\/ul>\n\n
public class ListViewItemMultiSelect : ListViewItem\n{\n private bool _mouseWasDownAndSelected = false;\n protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)\n {\n if (!IsSelected)\n {\n \/\/ it wasn't selected, so just do the normal thing\n base.OnPreviewMouseLeftButtonDown(e);\n return;\n }\n \/\/ it was selected, so we're going to totally ignore the mouse down...\n e.Handled = true;\n \/\/ but we will mark it ...\n _mouseWasDownAndSelected = true;\n }\n\n protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)\n {\n \/\/ if we were watching this one, we'll unselect it if it were already selected\n if (IsSelected && _mouseWasDownAndSelected)\n {\n IsSelected = _mouseWasDownAndSelected = false;\n }\n base.OnMouseLeftButtonUp(e);\n }\n}\n<\/pre>\n<\/div>\nIl ne reste plus qu\u2019\u00e0 modifier le UserControl ImageFileListView.xaml de la partie View du projet pour utiliser ce nouveau composant Multi Select.<\/p>\n
\n<local:ListViewMultiSelect SelectionMode=\"Extended\" ... ><\/pre>\n<\/div>\n
<\/p>\n
Tests unitaires<\/h1>\n
Les tests unitaires du Drag and Drop<\/h2>\n
Le drag and drop peut \u00eatre test\u00e9 avec les tests unitaires gr\u00e2ce au d\u00e9coupage MVVM.<\/p>\n
Une classe SimpleTestClass<\/strong> a \u00e9t\u00e9 sp\u00e9cialement cr\u00e9\u00e9e afin de r\u00e9aliser les tests<\/p>\n
\npublic class SimpleTestClass : Object, ICloneable\n{\n public object Clone()\n {\n return new SimpleTestClass();\n }\n}<\/pre>\n<\/div>\nLe test unitaire peut ainsi \u00eatre impl\u00e9ment\u00e9<\/p>\n
\n[TestMethod()]\n[DeploymentItem(\"DragDropManager.dll\")]\npublic void MoveDraggedItemsTest()\n{ \n ObservableCollection<SimpleTestClass> collection = \n new ObservableCollection<SimpleTestClass>();\n SimpleTestClass a1 = new SimpleTestClass();\n SimpleTestClass a2 = new SimpleTestClass();\n SimpleTestClass a3 = new SimpleTestClass();\n SimpleTestClass a4 = new SimpleTestClass();\n collection.Add(a1);\n collection.Add(a2);\n collection.Add(a3);\n collection.Add(a4);\n Dictionary<int, SimpleTestClass> newItems =\n new Dictionary<int, SimpleTestClass>();\n newItems.Add(3, collection[3]);\n newItems.Add(1, collection[1]);\n \/\/ Test Count and Order moved Items\n DragDropManagerList_Accessor<SimpleTestClass>\n .MoveDraggedItems(collection, newItems, 2);\n Assert.AreEqual(4, collection.Count);\n Assert.AreEqual(a1, collection[0]);\n Assert.AreEqual(a3, collection[1]);\n Assert.AreEqual(a4, collection[2]);\n Assert.AreEqual(a2, collection[3]);\n}<\/pre>\n<\/div>\nLes autres tests unitaires se retrouvent dans le projet zip.<\/p>\n
Les tests unitaires de la partie View WPF<\/h2>\n
Ce type de test n\u2019est pas courant car normalement le mod\u00e8le M-V-VM doit nous permettre d\u2019\u00e9viter de tester un comportement WPF.<\/p>\n
Seulement ici dans le cas du drag and drop, nous souhaitons tester un comportement essentiel de la fonction GetVisualItem<\/strong>.<\/p>\n
Cette fonction est tr\u00e8s utilis\u00e9e pour faire le lien entre le curseur de la souris et la donn\u00e9e point\u00e9e par ce curseur.<\/p>\n
GetVisualItem<\/strong> permet de r\u00e9cup\u00e9rer l\u2019\u00e9l\u00e9ment visuel WPF correspondant \u00e0 la donn\u00e9e object<\/strong> \u201cBind\u00e9\u201d dans le composant visuel. Exemple GetVisualItem(data1) va retourner le sous \u00e9l\u00e9ment de type ListBoxItem<\/strong> contenant l\u2019objet data1.<\/p>\n
Pour tester de fa\u00e7on unitaire cette fonction, il faut donc cr\u00e9er un ObservableCollection<\/strong> qui contiendra les donn\u00e9es et une ListBox UI WPF qui contiendra les \u00e9l\u00e9ments affich\u00e9s. Comme nous sommes dans un test unitaire, il n\u2019y a malheureusement pas cr\u00e9ation de fen\u00eatre WPF ni donc de g\u00e9n\u00e9ration interne des composants ListBoxItem<\/strong> li\u00e9s \u00e0 l\u2019ObservableCollection. Ainsi le code suivant ne fonctionnera pas car le composant ListBox ne contiendra pas d\u2019UI \u00e9l\u00e9ments g\u00e9n\u00e9r\u00e9s.<\/p>\n
\npublic void GetVisualItemTest1Helper<T>()\n where T : class, ICloneable\n{\n ListBox listbox = new ListBox();\n T testClass = new Object() as T;\n ObservableCollection<T> collection = new ObservableCollection<T>();\n collection.Add(testClass);\n listbox.ItemsSource = collection;\n\n DragDropManagerListBoxViewModel<T> dragdropManagerListBoxViewModel = new DragDropManagerListBoxViewModel<T>(listbox);\n PrivateObject param0 = new PrivateObject(dragdropManagerListBoxViewModel); \n DragDropManagerListBoxViewModel_Accessor<T> target = new DragDropManagerListBoxViewModel_Accessor<T>(param0);\n Assert.IsTrue(target.GetVisualItem(testClass) is ListBoxItem);\n}<\/pre>\n<\/div>\n<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Afin de simuler l\u2019affichage WPF, j\u2019ai construit une m\u00e9thode qui va s\u2019occuper de la g\u00e9n\u00e9ration des sous ensembles WPF comme si nous \u00e9tions au moment de la construction d\u2019une fen\u00eatre WPF.<\/p>\n
\nprivate static void PrepareUIItems(ListBox listbox)\n{\n IItemContainerGenerator itemContainerGenerator = ((IItemContainerGenerator)(listbox.ItemContainerGenerator));\n using (itemContainerGenerator.StartAt(new GeneratorPosition(-1, 0), GeneratorDirection.Forward, true))\n {\n DependencyObject cntr = null;\n do\n {\n cntr = itemContainerGenerator.GenerateNext();\n if (cntr != null)\n itemContainerGenerator.PrepareItemContainer(cntr);\n } while (cntr != null);\n }\n}<\/pre>\n<\/div>\nRemarque 1<\/span> : Le \u201cusing \u2026 StartAt<\/strong>\u201d est tr\u00e8s important car c\u2019est uniquement \u00e0 la sortie de ce using<\/strong> que le ItemContainerGenerator<\/strong> WPF aura termin\u00e9 enti\u00e8rement la pr\u00e9paration de l\u2019organisation de ces \u00e9l\u00e9ments internes.<\/p>\n
Remarque 2<\/span>: Il est imp\u00e9ratif d\u2019utiliser l\u2019interface IItemContainerGenerator<\/strong> pour pouvoir appeler StartAt,\u2026<\/p>\n
En ins\u00e9rant cette m\u00e9thode dans le code \u00e0 tester, la fonction appelant du composant WPF peut \u00eatre test\u00e9e et le test unitaire fonctionne maintenant correctement.<\/p>\n
\npublic void GetVisualItemTestHelper<T>()\n where T : class, ICloneable\n{\n ListBox listbox = new ListBox();\n T testClass = new Object() as T;\n DragDropManagerListBoxViewModel<T> dragdropManagerListBoxViewModel = new DragDropManagerListBoxViewModel<T>(listbox);\n PrivateObject param0 = new PrivateObject(dragdropManagerListBoxViewModel);\n DragDropManagerListBoxViewModel_Accessor<T> target = new DragDropManagerListBoxViewModel_Accessor<T>(param0);\n Assert.IsNull((target.GetVisualItem(0) as ListBoxItem));\n \n ObservableCollection<T> collection = new ObservableCollection<T>();\n collection.Add(testClass);\n listbox.ItemsSource = collection;\n \/\/ Generate WPF UI Items\n PrepareUIItems(listbox);\n Assert.IsTrue(target.GetVisualItem(0) is ListBoxItem);\n Assert.IsNull((target.GetVisualItem(1) as ListBoxItem));\n}\n\n[TestMethod()]\n[DeploymentItem(\"DragDropManager.dll\")]\npublic void GetVisualItemTest()\n{\n GetVisualItemTestHelper<GenericParameterHelper>();\n}<\/pre>\n<\/div>\nRemarque <\/span>: Le helper<\/strong> cr\u00e9\u00e9 avec l\u2019assistant de test unitaire Visual Studio nous simplifie la t\u00e2che et nous permet de ne pas devoir cr\u00e9er une classe sp\u00e9cifique : le test peut ainsi \u00eatre effectu\u00e9 avec le Generic .<\/p>\n
Conclusion<\/h1>\n
Nous venons de voir comment impl\u00e9menter le DragAndDrop suivant le mod\u00e8le MVVM pour une ListView ou ListBox.<\/p>\n
La Multi-S\u00e9lection est pr\u00e9sent, la s\u00e9lection et la destination des \u00e9l\u00e9ments est am\u00e9lior\u00e9e avec des Adorners, la copie ainsi que le d\u00e9placement des \u00e9l\u00e9ments sont g\u00e9r\u00e9s et le scroll est automatique avec le d\u00e9placement de la souris sur les bords.<\/p>\n
Dans les prochaines parties, nous verrons comment g\u00e9rer ces m\u00eames fonctionnalit\u00e9s avec un look TreeView.<\/p>\n
Voici le lien pour t\u00e9l\u00e9charger la solution avec le code source du projet et les tests unitaires<\/p>\n
![\"download32x32\"](\"http:\/\/dev.bratched.fr\/fr\/wp-content\/uploads\/sites\/2\/importedmedia\/blogmedia-download32x32-b64acb5051597c4460f5796cc7975efe-gif.gif\" "\\"download32x32\\"")
<\/a> wpfListView03.zip [174 ko]<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Introduction Vu pr\u00e9c\u00e9demment Nous avons vu dans la premi\u00e8re partie comment impl\u00e9menter une liste de fichiers en WPF avec le pattern MVVM. Dans la deuxi\u00e8me partie, nous avons vus comment optimiser l\u2019interface utilisateur avec le VirtualizingStackPanel, le multi Thread, les animations d\u2019attente WPF. Nous avons eu \u00e9galement un aper\u00e7u de la manipulation des images pour […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[16,17,18,19,2,20,21,4,22,23],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/472"}],"collection":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/comments?post=472"}],"version-history":[{"count":0,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/posts\/472\/revisions"}],"wp:attachment":[{"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/media?parent=472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/categories?post=472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bratched.com\/fr\/wp-json\/wp\/v2\/tags?post=472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- PreviewMouseMove<\/strong> : d\u00e9placement de la souris :\u00a0 utilis\u00e9 pour l\u2019affichage des Adorners, l\u2019affichage du curseur (selon appuie du bouton CTRL et la s\u00e9lection de l\u2019item de destination<\/li>\n
- CopyDraggedItems<\/strong> g\u00e8re la copie des \u00e9l\u00e9ments<\/li>\n
- DoDrop<\/strong> sera appel\u00e9 au moment du Drop des \u00e9l\u00e9ments dans la liste. Il retourne les nouveaux \u00e9l\u00e9ments copi\u00e9s sous forme d\u2019un dictionnaire (SI les \u00e9l\u00e9ments sont d\u00e9plac\u00e9s retourne null). En fonction de la touche de clavier Ctrl utilis\u00e9, les \u00e9l\u00e9ments seront soit copi\u00e9s soit d\u00e9plac\u00e9s.<\/li>\n
- DragDropManagerListBoxAdornerViewModel<\/strong> g\u00e8re l\u2019affichage des 2 Adorners<\/li>\n<\/ul>\n
- MouseUtilities<\/strong> inclue une fonction permettant de localiser le curseur de la souris au moment du Drag. Il faut savoir que la grosse difficult\u00e9 lors du drag and drop est de pouvoir g\u00e9rer la position du curseur. Microsoft en effet n\u2019a pas pr\u00e9vu jusqu\u2019\u00e0 la version 3.5 de pouvoir suivre le mouvement de la souris lors de cette op\u00e9ration.<\/li>\n<\/ul>\n
- DragDropManagerList<\/strong> Le gestionnaire de DragAndDrop<\/strong> permettant de g\u00e9rer des ensembles, et les m\u00e9canismes de d\u00e9but, fin d\u2019op\u00e9rations de DragAndDrop.<\/li>\n
- http:\/\/bea.stollnitz.com\/blog\/?p=53<\/a><\/li>\n
- http:\/\/geekswithblogs.net\/hinshelm\/archive\/2009\/08\/14\/wpf-drag-amp-drop-behaviour.aspx<\/a><\/li>\n
![\"tmp31B\"](\"http:\/\/www.bratched.com\/images\/stories\/tmp31B.png\" "\\"tmp31B\\"")
<\/a><\/p>\n