[new:16/6/2010] Charger une image depuis un serveur est un sujet que j’ai déjà abordé (voir: Silverlight : Charger une image dynamiquement). Charger une image depuis la machine hôte me semblait simple et je n’avais pas encore abordé le sujet. Pourtant, en lisant certaines questions que je reçois, force est de convenir que cela ne doit pas être si évident. Alors ne restons pas dans le questionnement et passons à la réponse, qui est courte.
Un bref exemple
Cliquez sur le bouton dans l’application SL ci-dessous, cela ouvrira le dialogue d’ouverture de fichier sur votre machine. Choisissiez une image png ou jpg et validez. Elle remplira la zone de l’application. Cliquez à nouveau sur le bouton pour recommencer l’action.
[silverlight:source=/SLSamples/SLLoadImg/SLLoadImg.xap;width=300;height=300]
Le code
je vous fais grâce du code Xaml (un UserControl avec une image et un bouton, c’est pas très compliqué à refaire…), voici plutôt le code C# :
1: namespace SLLoadImg
2: {
3: public partial class MainPage : UserControl
4: {
5: public MainPage()
6: {
7: InitializeComponent();
8: }
9:
10: private void btnLoadImage_Click(object sender, RoutedEventArgs e)
11: {
12: var ofd = new OpenFileDialog
13: {
14: Filter = "Images Files (*.png;*.jpg)|*.png;*.jpg | All Files (*.*)|*.*",
15: FilterIndex = 1
16: };
17: if (ofd.ShowDialog()==true)
18: {
19: var stream = ofd.File.OpenRead();
20: var bi = new BitmapImage();
21: bi.SetSource(stream);
22: imgExt.Source = bi;
23: stream.Close();
24: }
25: }
26: }
27: }
Le code se trouve dans le click du bouton car l’openFileDialog ne peut, pour des raisons de sécurité, qu’être appelé suite à un tel click de l’utilisateur.
Une fois l’instance du dialogue configurée, on l’exécute afin de récupérer le choix de l’utilisateur. C’est là que la partie se complique visiblement puisque c’est le passage du nom de fichier vers une image utilisable comme telle qui pose souci à certains lecteurs.
Mais vous allez voir que ce n’est pas si compliqué. Ligne 19 nous commençons par récupérer un flux (stream) sur le fichier sélectionné. Ce stream nous est fourni par OpenRead de la propriété File du dialogue.
Ensuite, ligne 20, nous créons une instance de BitmapImage. A la ligne suivante nous affectons sa source (SetSource) en lui passant en paramètre le flux récupéré juste avant.
Il ne reste plus qu’à transmettre l’image au composant image déjà présent dans l’application (imgExt) en initialisant sa propriété Source pour la faire pointer vers l’objet BitmapImage obtenu précédemment.
Au passage (ligne 23) on referme poliment le flux obtenu au départ de la séquence.
Conclusion
C’est très simple, mais l’enchainement entre l’obtention du flux, le passage vers un BitmapImage pour revenir sur un composant Image n’est effectivement pas limpide. Je conçois qu’on puisse chercher un moment en tournant autour sans y arriver.
En tout cas c’est maintenant une question réglée :-)
Alors Stay Tuned !