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…

Poursuivre la lecture →