locked
Contrôle <Image>, possibilité de précharger en basse résolution ? => Correction : basse qualité RRS feed

  • Question

  • Bonjour à tous, je m'explique :

    Par exemple est-il possible de faire en sorte d'afficher une image 800x480px dans un carré 90x90 par exemple sans charger l'intégralité de l'image mais seulement une version "basse résolution", afin de faire en sorte que si on demande à l'afficher en grande, on ait déjà une version pixelisée avant qu'elle soit complètement téléchargée.

    J'ai cru voir des attributs "cachemode" ou des trucs comme ça mais je connais pas, je commence à bien connaître et comprendre le système, mais je pêche dans la connaissance des contrôles Silverlight.

    Merci par avance :)


    • Modifié Neo33ASM mardi 6 septembre 2011 23:52
    dimanche 4 septembre 2011 14:03

Réponses

  • et c'est parti pour le cours sur le BitmapCache :D

     

    En fait cette property permet de guider un peu le système de cache natif au Silverlight, par exemple, en écrivant 

     

     

    <StackPanel>

    <Image.../>

    <Image.../>

    <Image.../>

    </StackPanel>

     

    Le GPU va trouver ca intéressant de regrouper les 3 images pour en faire qu'une seule texture à garder en mémoire, sauf que si tu bouges une des images, bah il recalculer pas mal de textures intermédiaire, alors qu'avec

     

    <StackPanel>

    <Image.../>

    <Image CacheMode="BitmapCache" .../>

    <Image.../>

    </StackPanel>

     

    Il va créer 1 texture spécialement pour l'image central, et une autre regroupant les 2 autres images (ou 2 autres textures, il est assez difficile de prévoir son comportement). Donc si je bouge l'image du milieu, il va juste utiliser la texture existante et la bouger, aucun calcul, rien, donc des meilleurs perfs en animation

     

    Pour voir cela, 

    décommente 

     Application.Current.Host.Settings.EnableRedrawRegions = true;

    dans App.xaml.cs
    il va colorer les textures, pour bien les différencier, dès qu'une texture change de couleur, c'est qu'il le redessine, tu pourras voir aussi comment il regroupe les controles pour en faire des textures ;)


    S'il vous plaît n'oublier pas de marquer la ou les réponses qui aident à résoudre votre problème. Pour que la discussion puisse être marquée comme résolue
    • Proposé comme réponse Pascal Saille mardi 6 septembre 2011 19:03
    • Marqué comme réponse Neo33ASM mercredi 7 septembre 2011 15:20
    mardi 6 septembre 2011 13:40
  • oublie le cachemode, ca n'a aucun rapport ;)

     

    En fait tu as tout pour le faire, utilise ta miniature en tant que version degradé !

     

    <Grid>

    <Image Source="{Binding TnUrl}" /> <!-- l'image ne sera pas rechargé, car utilisera le cache silverlight-->

    <Image Source="{Binding ImgUrl}" />

    </Grid>

     

    Qd on arrive on verra direct la miniature, la vrai version viendra par dessus ;)


    S'il vous plaît n'oublier pas de marquer la ou les réponses qui aident à résoudre votre problème. Pour que la discussion puisse être marquée comme résolue
    • Marqué comme réponse Neo33ASM mercredi 7 septembre 2011 15:19
    mercredi 7 septembre 2011 14:48

Toutes les réponses

  • Il faut que tu gères toi même les miniatures, impossible de faire cela, désolé.

     

    La seule chose qui se rapproche de cela est le le deepzoom mais n'est pas du tout adapté a ton besoin ;)

     

     


    S'il vous plaît n'oublier pas de marquer la ou les réponses qui aident à résoudre votre problème. Pour que la discussion puisse être marquée comme résolue
    dimanche 4 septembre 2011 17:42
  • ça sert à quoi le cachemode alors ?
    dimanche 4 septembre 2011 21:05
  • Bonjour,

    Cela permet de tirer parti de l'accélération matérielle et si j'ai bien compris de mettre en cache une image ou un objet sans avoir à le restituer à chaque actualisation.

    Et de plus la propriété RenderAtScale permet de diminuer la qualité de l'image pour plus de performance.

    Voici quelques liens pouvant peut-être vous aider :

    http://msdn.microsoft.com/fr-fr/library/ee309563(v=vs.95).aspx

    http://msdn.microsoft.com/en-us/library/system.windows.media.bitmapcache.renderatscale.aspx

    et apparemment sur Windows Phone 7 la propriété

    App.Current.Host.Settings.EnableGPUAcceleration
    

    est toujours à true.

    Voici un petit exemple d'utilisation :

    <Image Source="060510202851_61.jpeg">
                    <Image.CacheMode>
                        <BitmapCache RenderAtScale="100">
                          
                        </BitmapCache>
                    </Image.CacheMode>
                </Image>
    

    Je pense aussi que ce lien peut vous intéresser qi vous recherchez la performance pour votre application :

    http://msdn.microsoft.com/en-us/library/ff967560(v=vs.92).aspx

     


    Cordialement, Pascal.

    Développeur Wpf/SilverLight/WinPhone7

    • Proposé comme réponse Ciprian Duduiala mardi 6 septembre 2011 06:25
    • Marqué comme réponse Neo33ASM mercredi 7 septembre 2011 15:20
    • Non marqué comme réponse Neo33ASM mercredi 7 septembre 2011 15:20
    lundi 5 septembre 2011 06:20
  • Je viens d'essayer mais sans succès, l'image reste full resolution :

    <ListBox x:Name="listboxClubbing"
                                 ItemsSource="{Binding Items}">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <toolkit:WrapPanel />
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Border Style="{StaticResource WrapPanelClubbing}">
                                        <Image x:Name="unePhotoClubbing" ImageOpened="unePhotoClubbing_ImageOpened"
                                               Source="{Binding Path=TnUrl}" Stretch="UniformToFill">
                                            <Image.CacheMode>
                                                <BitmapCache RenderAtScale="0.3" />
                                            </Image.CacheMode>
                                        </Image>
                                    </Border>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
    


    lundi 5 septembre 2011 14:00
  • oui l'image reste full résolution, le CacheMode sert seulement à ameliorer les performances.

    Même chose pour RenderAtScale qui va juste diminuer la qualité de l'image plus on augmente la valeur.

    Pour les miniatures rudyhuyn t'as répondu, malheureusement il n'y a pas trente six solutions.

    Je répondais juste à ta question sur l'utilité de CacheMode.


    Cordialement, Pascal.

    Développeur Wpf/SilverLight/WinPhone7

    lundi 5 septembre 2011 15:08
  • oui je sais bien mais quand je dis "full résolution" c'est que la qualité reste au max malgré le "cachemode".

    je me suis mal exprimé désolé.

    correction => Je viens d'essayer mais sans succès, l'image reste en qualité maximale

    lundi 5 septembre 2011 23:21
  • oui je viens de tester que cela soit avec l'émulator ou directement le device.

    Moi non plus je ne vois pas de différence.

    Donc je ne sais pas trop finalement si cette solution fonctionne sur Windows Phone.

    Et donc la je ne vois pas trop l'utilité du BitmapCache.

    Donc pour le moment je n'ai pas de solution a te proposer.


    Cordialement, Pascal.

    Développeur Wpf/SilverLight/WinPhone7

    mardi 6 septembre 2011 09:33
  • et c'est parti pour le cours sur le BitmapCache :D

     

    En fait cette property permet de guider un peu le système de cache natif au Silverlight, par exemple, en écrivant 

     

     

    <StackPanel>

    <Image.../>

    <Image.../>

    <Image.../>

    </StackPanel>

     

    Le GPU va trouver ca intéressant de regrouper les 3 images pour en faire qu'une seule texture à garder en mémoire, sauf que si tu bouges une des images, bah il recalculer pas mal de textures intermédiaire, alors qu'avec

     

    <StackPanel>

    <Image.../>

    <Image CacheMode="BitmapCache" .../>

    <Image.../>

    </StackPanel>

     

    Il va créer 1 texture spécialement pour l'image central, et une autre regroupant les 2 autres images (ou 2 autres textures, il est assez difficile de prévoir son comportement). Donc si je bouge l'image du milieu, il va juste utiliser la texture existante et la bouger, aucun calcul, rien, donc des meilleurs perfs en animation

     

    Pour voir cela, 

    décommente 

     Application.Current.Host.Settings.EnableRedrawRegions = true;

    dans App.xaml.cs
    il va colorer les textures, pour bien les différencier, dès qu'une texture change de couleur, c'est qu'il le redessine, tu pourras voir aussi comment il regroupe les controles pour en faire des textures ;)


    S'il vous plaît n'oublier pas de marquer la ou les réponses qui aident à résoudre votre problème. Pour que la discussion puisse être marquée comme résolue
    • Proposé comme réponse Pascal Saille mardi 6 septembre 2011 19:03
    • Marqué comme réponse Neo33ASM mercredi 7 septembre 2011 15:20
    mardi 6 septembre 2011 13:40
  • Merci pour ces précisions Rudyhuyn .

    Merci aussi pour le magnifique lecteur de flux rss :)


    Cordialement, Pascal.

    Développeur Wpf/SilverLight/WinPhone7

    mardi 6 septembre 2011 19:03
  • Euh bah merci pour ces précisions, mais ça reste un peu flou pour moi :S

    En fait j'ai album photo représenté par un une ObservableCollection d'objets contenant un attribut "TnUrl" ou "ImgUrl" bindés dans un WrapPanel (voir code plus haut), "TnUrl" étant l'adresse de la miniature générée automatiquement par mon site, et "ImgUrl" l'adresse de la photo en elle même.

    Pour l'instant j'affiche des miniatures "TnUrl" et quand je clique dessus, la page d'affichage plein écran affiche les "ImgUrl" donc, de nouvelles images sont téléchargées pour être affichées.

    Je souhaiterais donc pouvoir supprimer l'utilisation des miniatures en affichant les photos directement, affichées en basse qualité mais dans une miniature (qualité dégradée d'1/10ème, affichée à 1/10ème de sa résolution par exemple). (en uniformtofill centré, merci le tip sur ton blog rudy ^^)

    L'intérêt étant d'avoir déjà une partie de l'image en cache (un peu comme dans l'appli Facebook), comme ça dès qu'on passe en affichage en plein écran, on a déjà une version dégradée d'affichée (en cache) en attendant que le reste de l'image soit téléchargé.

    1) je supprime un attribut devenu superflu
    2) optimisation des performances 

    A première vue le cachemode et son principe de dégradation de qualité a l'air d'être une solution adéquate à mon souci, encore faut-il que je pense juste et que je comprenne son fonctionnement.

    ps : je marquerai toutes les réponses après ;)
    • Modifié Neo33ASM mardi 6 septembre 2011 23:45
    mardi 6 septembre 2011 23:44
  • oublie le cachemode, ca n'a aucun rapport ;)

     

    En fait tu as tout pour le faire, utilise ta miniature en tant que version degradé !

     

    <Grid>

    <Image Source="{Binding TnUrl}" /> <!-- l'image ne sera pas rechargé, car utilisera le cache silverlight-->

    <Image Source="{Binding ImgUrl}" />

    </Grid>

     

    Qd on arrive on verra direct la miniature, la vrai version viendra par dessus ;)


    S'il vous plaît n'oublier pas de marquer la ou les réponses qui aident à résoudre votre problème. Pour que la discussion puisse être marquée comme résolue
    • Marqué comme réponse Neo33ASM mercredi 7 septembre 2011 15:19
    mercredi 7 septembre 2011 14:48