listview

5 articles

Migration du LongListSelector en Universal Apps – 2ème Partie

Nous poursuivons l’article sur la migration du LongListSelector (WP8 et WP8.Silverlight) vers les Universal Apps (WP8 et W8.x)

Nous avons vu dans le précédent article la migration des listes simples et des listes regroupées.

Dans cet article nous allons voir maintenant la migration du « JumpList ».

Le JumpList permet d’offrir des raccourcis de navigation lors du clic (ou tap) sur un regroupement.

Migrer le Jumplist en Universal Apps - Liste regtroupée wp_ss_20140925_0004

Avant avec le LongListSelector

En WP8.0 Silverlight, la gestion du JumpList passe obligatoirement par la définition du style associé à la propriété JumpListStyle. Sans cette association, la Jumplist ne fonctionnait pas.

Poursuivre la lecture

Migration du LongListSelector en Universal Apps

Après les ressources destinées aux traductions, nous continuons le tour d’horizon des éléments nécessaires pour migrer d’un projet Windows Phone 8.0 en Universal apps.

LongListSelector WP81

Le LongListSelector est un élément de liste très souvent utilisé : Il est apparu en 8.0 mais existait déjà dans la version 7.0 sous forme d’un composant tiers du Windows Phone Toolkit.

Avec les Universal Apps, ce composant disparaît au profit d’autres composants déjà présents dans Windows 8.0 : Listbox, ListView, GridView.

Liste Simple

Le cas le plus simple est lorsque LongListSelector est utilisé en mode simple Liste (sans regroupement).

Exemple de code :

<phone:LongListSelector
   ItemsSource="{Binding AllItemsViewModel}"    
   IsGroupingEnabled="False"
   ItemTemplate="{StaticResource ItemTemplate}" />

Poursuivre la lecture

WPF, ListView d’images, MVVM et Drag and Drop… – Fin

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

Application M-V-VM exemple avec Liste en arbre de type TreeView

Il vous faudra :

  1. Ajouter les assemblies
  2. Définir un objet possédant l’Interface IImageFile (et IParentItem si vous souhaiter des structures hiérarchiques)
  3. Définir un objet ViewModel dérivant de CustomImageFileViewModel si vous voulez gérer le DragAndDrop provenant d’applications externes
  4. 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"

Poursuivre la lecture

WPF, ListView d’images, MVVM et Drag and Drop… – Partie 2

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.

alt

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.

Ajout de ImageFileViewModel.cs dans le ViewModel

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

Ajout de l'image dans ImageFileListView

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…

Premier résultat catastrophique

et pleurer… SmileyCry parce que c’est très Lennnnnt…

Poursuivre la lecture

WPF, ListView d’images, MVVM et Drag and Drop… – Partie 1

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 !!!

MVVM Pattern

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.

Draft MVVM application

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

Poursuivre la lecture