Discussion :

[Krustig]

Bonjour,

Je souhaite remplir mon rectangle avec une image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<Rectangle Height="80" Width="80" Stroke="{StaticResource SquareBorder}" RadiusY="5" RadiusX="5">
            <Rectangle.Fill>
                <ImageBrush x:Name="Content" ImageSource="/Images/MonImage.png"/>
            </Rectangle.Fill>
        </Rectangle>

Dans le designer de VS ou de Blend, l'image s'affiche parfaitement bien dans le rectangle.

Or, dans IE, mon image ne s'affiche pas...

Cependant, si je remplace mon image par une couleur, la couleur s'affiche sous IE.

Quelqu'un a une idée ?

Merci de votre aide,
Steven

[Skyounet]

C'est pas un problème avec la localisation de ton image ?

Tu l'as mise où ?

[Krustig]

J'ai crée un dossier directement dans le projet.

Je ne pense pas que ce soit la localisation de l'image, car elle se charge bien dans le designer. Sauf si lors de l'execution mon chemin relatif n'a plus comme père le projet Silverlight ?

[Skyounet]

J'ai crée un dossier directement dans le projet.

Je ne pense pas que ce soit la localisation de l'image, car elle se charge bien dans le designer. Sauf si lors de l'execution mon chemin relatif n'a plus comme père le projet Silverlight ?

Regarde si à l'exécution tu n'as pas une erreur du style AG_E_NETWORK Image not found, un truc dans le genre, si oui c'est un problème avec le chemin de ton image.

[Krustig]

En effet, j'ai régardé sur la page internet et j'ai bien une erreur de type AG_E_NETWORK - ImageError.

Etonnant... Je vais modifier le chemin d'accès à mon image.

Y a t-il de bonnes habitudes à prendre pour éviter ce genre d'erreurs?

Merci Skyounet

[Skyounet]

En effet, j'ai régardé sur la page internet et j'ai bien une erreur de type AG_E_NETWORK - ImageError.

Etonnant... Je vais modifier le chemin d'accès à mon image.

Y a t-il de bonnes habitudes à prendre pour éviter ce genre d'erreurs?

En fait il y a 2 solutions pour les images en Silverlight :
stocker dans le xap ou stocker dans un repertoire du site web.

Il me semble qu'il faille même les placer dans le repertoire ClientBin.

Par exemple si tu as un repertoire Images dans ClientBin, tu peux y accéder à partir de ton appli Silverlight en faisant /Images/xxx.png (ou Images/xxx.png je ne me souviens plus).

Quand elles sont stockées dans le xap en tant que ressources, je crois bien que tu peux y accéder par un chemin relatif ou absolu.

Je n'ai pas re-vérifié tout ça depuis un ptit moment, je vais ptet faire un billet blog du coup.

A vérifier donc.

[Thomas Lebrun]

Il me semble qu'il faille même les placer dans le repertoire ClientBin.

Non, tu n'es pas obligé: les images peuvent-être stocké dans un autre répertoire

[Skyounet]

Non, tu n'es pas obligé: les images peuvent-être stocké dans un autre répertoire

Pas pour un chemin relatif.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
ClientBin
Images
   |--absolut.jpg

Si je fais <Image Source="../Images/absolut.jpg" /> ça ne fonctionne pas
Ni même /Images/absolut.jpg. Par contre avec un chemin absolu ça fonctionne bien évidemment.

En revanche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
ClientBin
    |--Images
        |--absolut.jpg

Avec Source="Images/absolut.jpg" fonctionne.

[mlebreton]

Lorsque l’on parle d’une Uri relative, à quoi est-elle relative ?

Au fichier XMAL/VB/C# dans lequel le lien se trouve. La réponse parait simple mais elle mérite attention.

1. Cela change nos habitude car nous sommes souvent plus familliés avec les Uri relatives au site Web
2. L'écriture de nos Uri dépend de la position de nos fichier XAML/VB/C#

Actions de génération (Build Action)
L’explorateur de propriété permet de définir une ‘action de génération’ pour chaque fichier. Par défaut, lorsque l’on intègre une image dans un projet Silverlight, l’action de génération est ‘Ressource’.


Trois types d’action de génération sont à retenir :

• Ressource (Resource)
• Contenu (Content)
• Aucun (None)

En imaginant que :

• le nom de l’assembly est ‘Test’ (Pour retrouver le nom, voir dans les propriétés du projet, onglet Silverlight).
• Le nom du fichier est ‘monimage.jpg’
• Que le fichier est dans un dossier ‘Images’ (un dossier dans le projet, pas un dossier dans le site Web).

Si action de génération = Ressource
Le fichier sera inclus dans l’assembly en tant que ressource.

Dans ce cas, un simple chemin relatif à la ressource suffit parfois (par relatif il faut entendre, relatif à la position du fichier XAML/VB/C# dans lequel est utilisé l’Uri). Mais cela peut très vite devenir compliqué surtout si vous créez et utilisez des contrôles (utilisateurs ou non). Je vous recommande donc les syntaxes suivantes.

Uri en XAML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"Test;component/Images/monimage.jpg"

Uri en c# :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Uri("Test;component/Images/Saisie_ monimage.png", UriKind.Relative);

Note : Cette façon de procéder permet en fait de toujours écrire des Uri relatives à la racine de l’assembly.

Si action de génération = Contenu
Le fichier sera inclus dans le XAP. Dans notre exemple, cela implique q’un dossier ‘Images’ sera créé dans le XAP (qui pour le rappeler n’est en fait qu’un fichier zip), et que le fichier ‘monimage.jpg’ y sera placée.

Dans ce cas, les syntaxes suivantes peuvent être utilisées.

Uri en XAML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"/Images/monimage.jpg"

Uri en c# :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

new Uri("/Images/monimage.png", UriKind.Relative);

Note : Notez la présence du ‘/’ en début d’Uri. Cette fois ci, l’Uri est relative à la racine du fichier XAP.

Si action de génération = Aucun
Dans ce cas, en plus de définir ‘action de génération’, définissez aussi ‘Copier dans le répertoire de sortie’. Le fichier sera copié dans ClientBin.

Les syntaxes suivantes peuvent être utilisées.

Uri en XAML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"/Images/monimage.jpg"

Uri en c# :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

new Uri("/Images/monimage.png", UriKind.Relative);

Note : J’ai plusieurs fois eu des soucis de copie de fichiers non effectués avec cette méthode. Je préfère généralement copier moi-même mes fichiers dans le site Web (dans ClientBin), sans les inclure dans le projet Silverlight.

Note : Vous remarquerez que la syntaxe pour accéder à un fichier dans le XAP ou dans le ClientBin est la même. En cas de conflit de nom, c’est le XAP qui gagne.

Note : Pour remonter l’arborescence du site Web en amont de ClientBin, il faut utiliser une Uri absolue. Le mieux c’est de la construire via le code en utilisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Application.Current.Host.Source.AbsolutePath

Conclusion
Cette description demande sans doute à être complètée, je suis preneur de toute nouvelle info.

[Krustig]

Très intéressant ! Merci pour vos réponses

Et au niveau des performances pour le chargement d'images y a t-il une solution mieux adapté que l'autre ?

[mlebreton]

En ce qui concerne les performances, tout dépend où vous voulez trouver les performences .

D'une manière ou d'une autre, les médias doivent parvenir sur le client. Il faudra donc downloader le même nombre d'octets... Quoi que...

Dans le XAP

Et oui, si le média est dans l'assembly ou dans le XAP (ce qui sous ce rapport revient à peu près au même puisque l'assembly est dans le XAP) on download alors un média compressé, vu que le XAP est en fait un ZIP.

L'intéret peut être moindre si le média est déjà lui même compressé. Ce qui est tout de même souvent le cas des images ou des vidéos. Mais cela peut être intéressant si le média est un bitmap, ou un document XML par exemple.

Par contre, si le média est dans le XAP, soulignons que plus le XAP est gros, plus il faudra du temps pour le downloader sur le client, plus l'utilisateur devra attendre avant de pouvoir commencer à travailler avec l'application.

Il peut dans ce cas être intéressant de créer des packages de ressources en parallèle du XAP principal et de les downloader en fonction des besoins. Cela demande plus de travail, mais l'utilisateur y trouve un confort non négligeable.

Sur le serveur Web

Sinon, l'idée d'utiliser des médias déjà compressés, à disposition sur le serveur Web, peut s'avérer bien souvent la plus simple.

Remarque générale

Quand tout est dans le XAP principal, au moins, une chose est certaine : quand l'application démare sur le client, toutes les ressources (médias et autres) sont en place et disponibles. Dans les autres cas, c'est moins certain.

Sans entrer dans les détails, mais si par exemple, au démarage de l'application vous lancez une animation sur une image dont l'Uri fait référence à une image sur le serveur web, qu'est-ce qui garanti que l'image sera pleinement chargée dès le démarage de l'animation ? Nous comprenons là qu'il nous faudra parfois implémenter des mécanismes plus sophistiqués pour répondre à nos besoins. Et dans ce cas, les indices de performence 'temps de développement' et 'complexité de code' peuvent ne pas être au rendez-vous

[mlebreton]

J'aimerais apporter une nuance à mon post de 8h08 pour éviter les ambiguité. Je me site :

Question :
Lorsque l’on parle d’une Uri relative, à quoi est-elle relative ?
Réponse :
Au fichier XMAL/VB/C# dans lequel le lien se trouve.

Cette affirmation ne se vérifie que dans le contexte qui concerne cette discussion et plus particulièrement quand il s'agit de référencer une ressource dans l'assembly.

Cette affirmation ne se vérifie plus quand par exemple on fait un appel WebClient. En effet, dans un tel cas, c'est l'Url à laquelle le navigateur a trouvé le XAP qui sert de référence aux Uri relatives.

[Krustig]

Vous auriez un site ou un exemple à partager concernant l'utilisation des packages de ressources en parallèle du XAP ?

L'approche est intéressante et je ne suis pas sur de mes résultat de recherches sur Google.

Merci beaucoup,
Steven

[mlebreton]

On peut dire que vous avez de la chance. Je suis en plein dedant car je suis en train de préparer une formation Silverlight avancé. J'ai donc pris quelques instants pour vous rédiger une classe implémentant un mécanisme permettant le chargement dynamique d'un package (xap ou zip). Il ne s'agit que d'une implémentation de base, cela prendrait trop de temps pour présenter toutes les implications et techniques, à vous d'imaginer les reste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
/// <summary>
/// Classe permetant le chargement dynamique d'un package
/// </summary>
public class Package
{
    private string _PackageRelativeUri = null;
    private System.IO.Stream _PackageStream = null;
 
    /// <summary>
    /// Evènement appelé après le chargement
    /// </summary>
    public event EventHandler<EventArgs> Loaded = null;
 
    /// <summary>
    /// Instanciation.
    /// </summary>
    /// <param name="PackageRelativeUri">Uri relative du package par rapport au XAP principal.</param>
    public Package(string PackageRelativeUri)
    {
        _PackageRelativeUri = PackageRelativeUri;
    }
 
    /// <summary>
    /// Déclanchement du chargement. Abonnez-vous à Loaded avant d'appeler cette méthode.
    /// </summary>
    public void Load()
    {
        Uri uri = new Uri(_PackageRelativeUri, UriKind.Relative);
        WebClient webClient = new WebClient();
        webClient.OpenReadCompleted += new OpenReadCompletedEventHandler(Load_Completed);
        webClient.OpenReadAsync(uri);
    }
 
    private void Load_Completed(object sender, OpenReadCompletedEventArgs e)
    {
        _PackageStream = e.Result;
        if (Loaded != null) Loaded(this, new EventArgs());
    }
 
    /// <summary>
    /// Retourne vrai si le package est chargé.
    /// </summary>
    public bool IsReady
    {
        get { return _PackageStream != null; }
    }
 
    /// <summary>
    /// Retourne un flux pour une ressource donnée.
    /// </summary>
    /// <param name="PackageRelativeUriString">Uri relative de la resource, par rapport au package.</param>
    /// <returns>Flux</returns>
    public System.IO.Stream GetStream(string RelativeUriString)
    {
        if (IsReady)
        {
            Uri uri = new Uri(RelativeUriString, UriKind.Relative);
            var ri = new System.Windows.Resources.StreamResourceInfo(_PackageStream, null);
            var rs = Application.GetResourceStream(ri, uri);
            if(rs!=null) return rs.Stream;
            throw new Exception(string.Format("La ressource '{1}' est introuvable dans le package '{0}'.", _PackageRelativeUri, RelativeUriString));
        }
        throw new Exception(string.Format("La package '{0}' n'est pas chargé.", _PackageRelativeUri));
    }
 
    /// <summary>
    /// Retourne une image pour une ressource donnée.
    /// </summary>
    /// <param name="relativeUriString">Uri relative de la resource, par rapport au package.</param>
    /// <returns>Image</returns>
    public Image GetImage(string relativeUriString)
    {
        var bi = new System.Windows.Media.Imaging.BitmapImage();
        bi.SetSource(GetStream(relativeUriString));
        return new Image() { Source = bi };
    }
}

Voici comment exploiter cette classe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
private Package MonPackage = null;
private void Button_Click(object sender, RoutedEventArgs e)
{
    //---> Création du Package, il doit référencer, de façon relative
    // au XAP principal, soit un fichier .zip, soit un fichier .xap
    // (rappelons qu'un .xap peut être vu comme .zip dont l'extension 
    // a été changée). Ce fichier .zip contient autant de fichiers
    // que voulu, de tout type, organisés en dossiers et sous dossiers
    // si besoin est.
    MonPackage = new Package("MonPackage.zip");
    //---> On s'abonne à l'évènement qui sera appelé quand le chargement
    // du package sera terminé
    MonPackage.Loaded += new EventHandler<EventArgs>(MonPackage_Loaded);
    //---> On déclanche le chargement
    MonPackage.Load();
}
 
void MonPackage_Loaded(object sender, EventArgs e)
{
    //---> Le package est chargé, nous pouvons accéder
    // à son contenu. Dans mon exemple, mon package ne contient
    // qu'un dossier 'Images' et dans se dossier se trouve un
    // fichier 'about.png'
    this.Content = MonPackage.GetImage("Images/about.png");
}

Il existe plusieurs autres méthodes. J'ai présenté celle qui me parait la plus simple, d'autant qu'il suffit de réutiliser la classe Package. Il est de façon similaire, possible de charger synamiquement des Assemblies et ensuite d'instancier les objets qu'elles contiennent.

Quoi qu'il en soit, Silverlight c'est puissant.

[Krustig]

Merci bien mlebreton