Image depuis HTTP avec C# XAML – Comparatifs et Performances – Partie 1

Introduction

Voici un article en 2 parties pour décrire les différentes implémentations possibles de la lecture d’images provenant d’un serveur en Http.
En terme de performances, il existe des différences assez conséquentes suivant les implémentations choisies.

Nous allons voir que parfois les résultats sont assez surprenants.

Charger une image depuis XAML

Le moyen le plus simple pour charger une image reste l’implémentation XAML.

<Image Source="{Binding ImageUrl}" Width="400" Height="240"/>

ImageUrl est de type Url et peut être déclarée de cette façon dans le viewModel associé à la Page.

public  Uri ImageUrl
{
    get
    {
        return new Uri(@"http://www.bing.com/az/hprichbg/rb/SnowyCP_FR-FR11972876588_400x240.jpg");
    }
}

Cette implémentation est très efficace, le contrôle XAML gère quasiment tout pour vous :

le chargement en asynchrone : Ne fige pas l’affichage de l’interface lors du chargement
la mise en cache mémoire (un seul chargement)
L’optimisation http (évite un échange serveur si l’image est déjà chargée)

Cependant l’image chargée en XAML sera de nouveau rechargée à chaque lancement de l’application.
Afin de mettre en place un système de cache persisté, il est nécessaire de charger le contenu de l’image et de la sauvegarder sur le téléphone dans l’Isolated Storage.

Quelles sont les méthodes possibles pour charger et afficher une image en asynchrone ?

Voici 9 façons de faire en Universal Apps (Windows Phone XAML ou Windows 8.1). Leurs temps de réponse seront mesurés sur Windows Phone 8.1 et exposés dans la 2ème partie de cet article.

Implémentations

1 – DataWriter

La première implémentation, la plus classique, est d’utiliser un httpClient pour récupérer le flux sous forme de Stream puis de le transférer dans le BitmapImage en passant par un DataWritter.

Windows 8 et les Universal Apps nous obligent à passer par un nouveau type de Stream le InMemoryRandomAccessStream pour l’afficher comme source dans le BitmapImage. Poursuivre la lecture →

Isolated Storage et Images sous Windows Phone 8

Windows Phone

Je vous propose un petit tour d’horizon sur le stockage d’images dans l’Isolated Storage.

Pour rappel, l’Isolated storage est l’emplacement réservé à votre application Windows Phone pour le stockage de fichiers.

Quelles sont les implémentations qui permettent de récupérer une image déjà stockée dans cet espace ? Quelles sont les méthodes les plus efficaces ?

L’implémentation classique (Windows Phone 7)

C’est l’implémentation standard « old school » : j’utilise GetUserStoreForApplication() et OpenFile pour lire un Stream. Le Stream est ensuite lu par le BitmapImage et renvoyé dans une Action.

public static void LoadImageFromStorage(string name, Action<BitmapImage> actionBitmap)
{
    using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
    {
        if (myIsolatedStorage != null && myIsolatedStorage.FileExists(name))
        {
            IsolatedStorageFileStream fileStream = myIsolatedStorage.OpenFile(name, FileMode.Open, FileAccess.Read);
            {
                Deployment.Current.Dispatcher.BeginInvoke(() =>
                {
                    BitmapImage bitmapSource = new BitmapImage();
                    bitmapSource.SetSource(fileStream);
                    if (actionBitmap != null)
                        actionBitmap(bitmapSource);
                });
            }
        }
    }
}

Remarque 1

BitmapImage nécessite de s’exécuter dans le ThreadUI principal, pour cela, on utilise

Deployment.Current.Dispatcher.BeginInvoke(() =>

Poursuivre la lecture →

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

2 commentaires

WPF

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 →