Discussion :

[bobybob06]

Bonjour à tous,

Je travail sur un détail dans une de mes applications et ne comprends pas vraiment comment réagit le binding avec les images. J'ai une class Item qui contient une propriété PhotoPath qui est le chemin d'accès à ma photo. Ces informations sont stockés dans une table sur une instance SQL server.

J'ai une balise dans le XMAL qui permet d'afficher la propriété PhotoPath de mon objet pour que l'utilisateur est une représentation visuelle de celui-ci. Le chemin indiqué est Images/MonImage.png (ou .jpg). Mais je n'arrive pas à afficher l'image. Il faut préciser je pense également que cet objet est intégré à une ListBox permettant d'afficher de multiples objets Item.

Je vous donne un extrait du XMAL simplifié pour que vous puissiez vous rendre compte de la situation.

Code xaml :

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

1
2
3
4
5
6
7
<ListBox>
   <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Name="imageItem" Height="100" Width="100" Source="{Binding PhotoPath}" Stretch="None" />
        </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Pour finir je précise bien que j'ai défini un datacontext.

En fait pour simplifier l'affaire, mon problème est d'afficher une image via un binding qui peut être modifiée dynamiquement. En conséquence, si quelqu'un pourrait m'expliquer comment gérer les chemins d'accès aux images svp. J'avoue que je suis un peu désorienté dans la manière dont WPF gère celles-ci avec un binding.

Merci pour l'aide que vous pourrez m'apporter.

[koyot3]

Bonjour boby

Pour ton soucis, tu peux passer par une propriété telle que

Code c# :

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

1
2
3
4
5
public BitmapImage GetMyImage
{
get 
{ new BitmapImage(new Uri("tonchemin, UriKind.AbsoluteOrRelative)); 
}

Tu le bindes comme tu l'as fais dans ton extrait de code
En implémentant INotify, le changement se fera automatiquement dans ton IHM lorsque ton chemin changera.

Sinon tu peux passer par un Converter.
Voici un exemple

Bon courage

@+

[bobybob06]

Bonjour koyot,

tout d'abord merci! J'ai envie de te répondre que ça marche mais ça ne marche pas tout à fait comme prévu avec ta première technique énoncée.

Je m'explique. Cela prend en compte le changement dynamique puisque l'image change mais au lieu d'avoir la nouvelle... il n'y a plus rien! Ma question maintenant cela vient-il du format de l'image, de ces dimensions? Si tu veux je peux t'inclure des screenshots si ça peut t'aider à voir plus clair.

Dernier point les images qui s'affichent sont des images qui avaient été chargées dans l'application comme étant des component. Cela a-t-il une influence?

[koyot3]

Re,

J'ai du mal à bien comprendre : tu charges par défaut une image et ensuite tu veux quelle change après une action particulière ?

Tu as vérifié le path que tu mets ?
Tes images sont en quel format ? Et quand tu dis qu'il n'y a plus rien, c'est à dire ? (finalement je veux bien une capture d'écran )

Et si tu peux mettre un peu de ton code lors du changement de la propriété GetMyImage...

@+

[bobybob06]

Ah je pense avoir trouvé une piste de recherche. Je crois ne pas avoir implémenté le INotify...

Comment cela fonctionne-t-il?

[koyot3]

Re,

Tu mets le code suivant dans ta ViewModel

Code c# :

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

1
2
3
4
5
6
 public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propname)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propname));
        }

en implémentant l'interface INotifyPropertyChanged

Ensuite sur chacune des propriétés, tu fais un OnPropertyChanged("NomdetaPropriété")

Ce qui donne par exemple

Code c# :

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

1
2
3
4
5
6
protected string _str
public string str
{
get {return _str;}
set { _str = value ; OnPropertyChanged("str");}
}

Cet event permet de notifier à tous ceux qui sont abonnés (via le binding) que la source de données à changée et donc qu'il faut rafraichir l'affichage ..

En espérant t'avoir aider...

[bobybob06]

Koyot,

voici les screenshots demandés pour répondre à ta question.
Sinon, les images sont au format .png soit en .jpg.

Pour finir, tu as bien compris je charge une image par défaut et pour des raisons de personnalisation on peut être amené à changer cette image. Donc lorsque cela est changé dans la bdd il doit y avoir une répercussion sur l'appli.

Mais comme tu viens de me le demander à propos du bout de code lors du changement de propriété... cela me fait penser que je l'ai pas implémenté donc le soucis doit sans doute venir de là...

[koyot3]

Pour si tes images préchargées sont de la même extension/taille/format/... il n'y a pas de raison que ça ne marche pas ...

Essaie avec le INotify ça peut aider

[bobybob06]

Koyot,

Merci pour ton aide. C'est bon ça marche avec des images "préchargés" (si par préchargés tu entends ajoutées dans visual studio dans l'onglet que je mets en PJ) dans l'application.

Par contre si j'ajoute des images et qu'elles ne sont pas préchargés cela ne marche pas. Ma dernière question sera donc : est-il possible de gérer le cas non préchargé?

[koyot3]

Si tu veux brancher une image externe oui, ça doit marcher à partir du moment ou le path est correct.

Les images qui sont chargées de base lors du lancement de ton application sont-elles intégrées dans ton projet (comme sur ta miniature) ou externe (fichier physique sur le disque) ?

Vérifie ton path dans ta prorpiété GetMyImage peut être

[bobybob06]

En fait toutes les images sont dans le même dossier Images. Il y en a des préchargées et d'autres non (fichier physique sur le disque). Avec les préchargées ca marche tout le temps. Avec les autres non. Pourtant le Path sont bons je ne comprends pas du coup...

Edit
Désolé je n'ai que partiellement répondu à ta question. Au chargement, les images sont intégrées au projet.

[koyot3]

Bon je viens de tester chez moi :

View.xaml :

Code xml :

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

1
2
<Image x:Name="img" Source="{Binding Path=bmp}" />
        <Button Content="Test" Click="Button_Click" Width="50" Height="30" VerticalAlignment="Bottom"/>

View.xaml.cs :

Code c# :

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
//la propriété
private BitmapImage _bmp;
public BitmapImage bmp
{
	get
	{
		return _bmp;                
	}
	set 
	{ 
		_bmp = value; 
		OnPropertyChanged("bmp"); 
	}
}
 
//le constructeur
public MainWindow()
{
	InitializeComponent();            
	DataContext = this;
	bmp = new BitmapImage(new Uri(@"C:\photo.png", UriKind.RelativeOrAbsolute));
}
 
//changement au click
 private void Button_Click(object sender, RoutedEventArgs e)
  {
 bmp = new BitmapImage(new Uri(@"C:\photo2.png", UriKind.RelativeOrAbsolute));
}

Essaie de voir les différences par rapport à toi ...
En espérant que cette fois tu arrives à faire ce que tu veux

[bobybob06]

Après avoir regarder ton code, je l'ai adapté au mien cela fonctionne dans mon application quand je déclare le path de la même manière que toi même avec des images non préchargées. Sauf avec une (très grande peut être que les dimensions jouent un rôle...). J'aurai quelques modifs à effectuer lundi pour gérer directement le path depuis la bdd. Je tiens au courant sur la finalité de la fonctionnalité. En tout cas merci pour les tuyaux et bon w-e. @+

[MABROUKI]

bonjour bobybob06
Pour de grandes dimensions cela consomme de la memoire inutimelemnt et mets du temps au chargement du bitmap....Pour diminuer la consommation memoire tu peux redimensionner l'image à une taille reduite au chargement...
avec soit DecodePixelWidth ou soit DecodePixelHeight
le code xaml:

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<Image Width="200">
  <Image.Source>
    <!-- To save significant application memory, set the DecodePixelWidth or  
     DecodePixelHeight of the BitmapImage value of the image source to the desired 
     height and width of the rendered image. If you don't do this, the application will 
     cache the image as though it were rendered as its normal size rather then just 
     the size that is displayed. -->
    <!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
         or DecodePixelHeight but not both. -->
    <BitmapImage DecodePixelWidth="200"  
     UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
</Image>

bon code...............

[bobybob06]

Merci Mabrouki pour ces précisions d'optimisation.

Koyot, c'est bon j'ai adapté le code cela fonctionne bien avec un chemin absolu mais j'ai toujours des problèmes avec le relatif... Va savoir. Je vais donc travailler en absolu tout le temps je pense. Si tu as une piste pour résoudre cela sinon je vais marqué résolu pour le topic.

Merci à tous!