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

Introduction

wp_ss_20141223_0001

Cet article traite des résultats des différentes méthodes pour lire une image provenant d’un site Http.

Les différentes implémentations ont été décrites dans l’article

Image depuis http avec C# Xaml – comparatifs et performances.

Mesures

L’image étalon fait 19ko et mesure 400×240 pixels. Elle est présente notamment sur les serveurs de Bing à l’adresse suivante :

http://www.bing.com/az/hprichbg/rb/ChristmasMarketNurnberg_FR-FR11351563819_1280x768.JPG

Le premier test va charger 10 fois la même image suivante :

Poursuivre la lecture →

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

Universal Apps Windows 8 Windows Phone

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 →

Mise en cache d’image dans l’isolated storage avec Windows XAML et SemaphoreSlim

Universal Apps Windows 8 Windows Phone

Ecriture dans l’isolated Storage d’un fichier image

Il est parfois fort utile de sauvegarder les images provenant d’un serveur HTTP dans un cache afin d’éviter de les charger à chaque fois.

En implémentant ce système de cache en asynchrone, je me suis rendu compte de plusieurs problèmes causant systématiquement un UnauthorizedAccessException: Access is denied (0x80070005).

Poursuivre la lecture →

Migration du RoundButton en Universal App

Universal Apps Windows 8 Windows Phone

Introduction

En Windows Phone, les Round Button (Bouton antouré d’un cercle) étaient utilisés à travers un Framework additionnel le Coding4Fun Toolkit.

Exemple d’utilisation en Windows Phone Silverlight :

Ajout de l’espace de nommage dans la page

xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

Utilisation dans la page Xaml

<c4f:RoundButtonImageSource="Images/EditImage.png"
    Content="Edition"
    Command="{Binding EditCommand}" />

Avec les Universal Apps, ce Framework se fait malheureusement encore un peu attendre et de nombreux composants standards peuvent remplacer en natif ce fameux Round Button.

AppBarButtoon

Le AppbarButton est un bouton rond qui s’affiche normalement dans la barre de tâche en bas de l’écran.Mais il est également possible de l’utiliser n’importe où dans la page comme l’ancien RoundButton. 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 →

Utilisation des Images resources avec Windows Phone

Windows Phone

Je vous propose un petit retour d’expérience sur l’utilisation des ressources dans le développement Windows Phone dans un modèle M-V-VM.

Différentes façon de coder

L’image que l’on souhaite afficher provient des ressources et devrait pouvoir s’afficher à travers une propriété Image de type BitmapImage dans un ViewModel. A noter que le dans l’exemple ci dessous, UIThreadPool permet d’afficher cette image même lorsque celle-ci est alimentée depuis un Thread qui tourne en tâche de fond.

SynchronizationContext UIThread = SynchronizationContext.Current;

public BitmapImage Image
       {
           get { return _image; }
           set
           {
               UIThread.Post(_ =>
                   {
                       _image = value;
                       RaisePropertyChanged("Image");
                   }, null);
           }
       }

Comment afficher une image incluse dans les ressources de l’application ?

Attention les 2 premières méthodes décrites sont à proscrire et à ne surtout pas reproduire. Allez jusqu’à la fin de l’article pour voir comment implémenter correctement l’affichage d’une image ressource. Poursuivre la lecture →