Greg est en panne sur l’interface du scrollbar…
Recherche sur Google! (voir 2ème lien)
On y est !
Cables OK.
On aurait du penser aux tapis de souris…
On y est presque, l’équipe est constituée, les dernières idées sont presque arrêtées.
Portable, câbles, oreiller, sac de couchage sont prêts.
Une dernière interrogation avant la dernière nuit de sommeil, Il y aura-t-il moyen de prendre un douche dans les prochaines 36 heures ?
Le résultat du concours est tombé et mon jeu Jour-J (pour Windows 8) termine 2ème du classement.
« Simple, prenant, efficace : une très bonne appli! » : ça fait très plaisir après ces nombreuses nuits de développement et de mise au point .
Jour J est un jeu où il faut resituer les évènements chronologiques qui apparaissent aléatoirement dans des cartes. Des Bonus et un temps limité pimentent la compétition.
Pour le découvrir :
Je gagne Mes enfants gagnent donc une console Xbox-One, une voiture télécommandée Bluetooth et une Webcam.
C’est encore Noël !
Merci au site du zéro et à Microsoft pour ce concours !
Introduction
Les projets précédents ont été redécoupés afin de fournir 2 assemblies directement utilisable.
Pour ceux qui souhaitent ajouter rapidement un treeview d’images avec une gestion de Drag&Drop (Voir les 4 précédents chapitres ) voici les étapes de réalisation.
L’exemple suivant montre comment réaliser une application respectant l’architecture M-V-VM avec les briques Drag and Drop et Listview d’images
Il vous faudra :
- Ajouter les assemblies
- Définir un objet possédant l’Interface IImageFile (et IParentItem si vous souhaiter des structures hiérarchiques)
- Définir un objet ViewModel dérivant de CustomImageFileViewModel si vous voulez gérer le DragAndDrop provenant d’applications externes
- Initialiser les images dans CollectionImageViewModel
Implémentation
Ajouts des assemblies
La première étape est de télécharger ou compiler les assemblies suivantes (à la fin de l’article) :
- ImageFileListView : Contient la partie visuelle, le View Model et les interfaces du modèle à implémenter
- DragDropManager : Contient les mécanismes de Drag and Drop qui pourront être appliqués sur la lise
Ajout de la liste dans la View
Pour ajouter la liste dans la View vous devez définir une référence dans le XAML à l’assemblie ImageFileListView.
xmlns:m="clr-namespace:ImageFileListView.View;assembly=ImageFileListView"
Introduction
Vu précédemment
Nous avons vu dans la première partie comment implémenter une liste de fichiers en WPF avec le pattern MVVM.
Dans la deuxième partie, nous avons vus comment optimiser l’interface utilisateur avec le VirtualizingStackPanel, le multi Thread, les animations d’attente WPF. Nous avons eu également un aperçu de la manipulation des images pour utiliser lorsqu’elles existent les informations EXIF ou encore une transformation classique de ces images.
Je vous propose de voir dans cette troisième partie :
- La mise en cache des images (améliorons l’interface utilisateur encore un petit peu)
- Le Drag and Drop avec une sélection multiple d’éléments
Optimisation avec mise en cache
Implémentation d’un système de cache
Le but est de garder les x dernières images déjà chargée afin d’éviter un rechargement permanent de ces images.
Pour cela nous mettons en place une liste partagée en appel static, ainsi que son verrou (nous sommes dans un environnement multi-thread) afin de garantir l’écriture correcte des données.
const int maxThumbnailInCache = 300; private static readonly List<ImageFileViewModel> _cacheThumbnail = new List<ImageFileViewModel>(); private static readonly object _lockCacheThumbnail = new object();
Puis nous implémentons la méthode static AddThumbnailInCache
private static void AddThumbnailInCache(ImageFileViewModel p)
{
if (p == null) return;
if (_cacheThumbnail.Contains(p))
{
lock (_lockCacheThumbnail)
{
_cacheThumbnail.Remove(p);
}
}
lock (_lockCacheThumbnail)
{
_cacheThumbnail.Add(p);
if (_cacheThumbnail.Count > maxThumbnailInCache)
lock (_lockCacheThumbnail)
{
_cacheThumbnail.Remove(_cacheThumbnail[0]);
}
}
}
La méthode teste si l’élément est présent. Si il est présent, l’élément est replacé à la fin de la liste.
Si le nombre d’éléments dépasse le maximum d’élément fixés dans le cache (maxThumbnailInCache), l’élément en haut (le plus ancien) est supprimé. Poursuivre la lecture
Introduction
Vu précédemment
Nous avons vu dans la première partie comment implémenter une liste de fichiers en WPF avec le pattern M-V-VM. Nous allons voir dans cette partie comment ajouter les vignettes images “Thumbnails” représentant les images miniatures de ces fichiers.
L’exemple utilisé reprend l’application précédente (sans les vignettes) qui sera complétée au fur et à mesure.
Pour revoir la première partie :
WPF, ListView d’images, MVVM et Drag and Drop… – Partie 1
Ajout des vignettes
Le premier réflex est de modifier la partie View-Modèle pour exposer la lecture du fichier image. Nous avons besoin du nom de fichier complet avec le chemin sur le disque dur. Nous ajoutons pour cela une nouvelle classe ImageFileViewModel qui va hériter de FileViewModel. Cette classe va s’occuper uniquement de l’affichage des vignettes.
Il nous faut ensuite ajouter la propriété FileName dans la classe ImageFileViewModel. La propriété va renvoyer le nom complet de l’objet ImageFile contenu dans _imageFile.
ImageFileCollectionViewModel retourne désormais une collection d’objet ImageFileViewModel.
public string FileName
{
get { return _imageFile.FileName; }
}
Puis dans la partie View, nous ajoutons l’image dans le UserControl ImageFileListView.xaml
Le Binding est fait sur la propriété Source de l’Image avec {Path=FileName}
<ListView SelectionMode="Extended" x:Name="ListViewImage"
ItemsSource="{Binding Path=AllImages}" Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=FileName}" Width="25" Height="25"/>
<TextBlock Text="{Binding Path=ShortName}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Nous pouvons lancer l’application qui fonctionne…
et pleurer… 
parce que c’est très Lennnnnt…
Introduction
Pour les besoins d’un logiciel orienté « Photos », j’ai eu besoin des fonctionnalités essentielles suivantes :
- Affichage des images sous forme de vignettes dans une liste et dans une arborescence de type TreeView
- Cet affichage doit permettre de gérer un nombre imposant de photos (>5000 !) sans générer de débordement mémoire ou de ralentissement
- L’affichage et la génération des vignettes doit pouvoir se faire en mode asynchrone (en lisant les informations EXIF si elles existent,…)
- La multi-sélection doit permettre de sélectionner plusieurs éléments.
- Les éléments sélectionnés doivent pouvoir être déplacés ou copiés dans la liste (ou l’arbre) par Drag And Drop
Et le tout en DotNet WPF respectant le pattern MVVM !!!
Je ne ferai pas un gros article sur la nécessité de développer en WPF selon une architecture MVVM (Séparation des fonctions, réutilisation, rôle des objets mieux ciblés, accès déclaratifs…). Voici quelques liens au cas où vous ne seriez toujours pas convaincus…
http://www.orbifold.net/default/?p=550
http://japf.developpez.com/tutoriels/dotnet/mvvm-pour-des-applications-wpf-bien-architecturees-et-testables/
http://msdn.microsoft.com/fr-fr/magazine/dd419663.aspx
http://www.c2i.fr/Article/Detail/a3809f7b-196a-4d8c-bb48-164f591920bb
MVVM et ListView
Cette première partie présente l’implémentation de la liste d’images avec le modèle MVVM.
Exemple d’application
Voici le descriptif fonctionnel de l’exemple que nous allons mettre en place : Un petit croquis vaut mieux qu’un long discours.
L’application est extrêmement simpliste. La saisie d’un répertoire se fait en haut, le click sur le bouton affiche la liste des images et leur nombre total.
Découpage de l’application
L’application est découpée en 4 parties :
- Model : l’objet “métier” image
- ViewModel : les objets nécessaires à la manipulation des objets “Model” images par la couche “View” (Détail de l’image et liste des images)
- View : L’affichage XAML-WPF de la liste des images
- Controler : Les actions nécessaires : Remplissage de la liste par exemple
L’application Techdays goodies a été mise à jour. Comme la version 2012, elle permet toujours d’afficher et de soumettre les goodies offerts par les partenaires de Microsoft durant les techdays de Paris (du 12, 13, 14 février 2013).
L’application est toujours disponible en téléchargement sur le store même si sont intérêt est désormais limité (sauf à regretter de ne pas avoir vu la balle rebondissante lumineuse de Soat ou la plante verte offerte par le site du zéro…) .
Je vais utiliser l’exemple de cette application pour décrire les mécanismes mis en place pour arriver à mutualiser le code entre les plateformes Windows Phone (wp7 et wp8) et Windows 8 (WinRT).
Le code source sera diffusé à l’issu de cette série d’article.
Goodies Techdays Paris (WinRT) et Freebox Record (Windows phone 8) ont remportées le concours en catégorie “Débutant”.
J’ai reçu hier ce magnifique bras articulé.
L’application “Armada” remporte le Nokia Lumia 820 dans la catégorie “Les stars – Windows Phone”
Merci à Microsoft et au site du zéro!