Images dans ListView

Version imprimable

Bonjour,

Je crée un ListView, dans le code, et relie ce ListView aux données :

Code:

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
 
Hashtable[] data;
string[] fields;
string[] types;
// ... remplissage de 'data', 'fields' et 'types'
 
ListView listView = new ListView();
 
ArrayList arrayList = new ArrayList();
 
// création <GridViewColumn>
for (int i = 0; i < fields.Length; i++)
{
   GridViewColumn gvc = new GridViewColumn();
   Binding binding = new Binding(fields[i].ToUpper());
   if ( types[i] == "date" ) binding.StringFormat = "dd/MM/yyyy HH:mm:ss";
   gvc.DisplayMemberBinding = binding;
   gvc.Header = fields[i];
   gridView.Columns.Add(gvc);
}
 
// création <ListView.View>
listView.View = gridView;
 
// rajout des données
for (int i = 0; i < data.Length; i++)
{
   DataObject dataObject = new DataObject();
   for (int j = 0; j < fields.Length; j++)
   {
      dataObject.store(fields[j], data[i][fields[j]]);
   }
   arrayList.Add(dataObject);
}
listView.ItemsSource = arrayList;
 
 
public class DataObject 
{
        public string title;
        public DateTime date;
        public string photo;
 
        public void store(string key, string value)
        {
            switch (key)
            {
                case "title":
                    title = value;
                    break;
                case "date":
                    date = DateTime.ParseExact(value, "dd/MM/yyyy HH:mm:ss", new CultureInfo("fr-FR", true), DateTimeStyles.None);
                    break;
                case "photo":
                    photo = value;
                    break;
              }
        }
        public string TITLE
        {
            get { return this.title; }
        }
        public DateTime DATE
        {
            get { return this.date; }
        }
        public string PHOTO
        {
            get{ return this.photo; }
        }
}

Presque toutes les données sont des chaines de caractères, sauf quelqu'unes qui sont des adresses URL d'images.
Pour l'instant elles apparaissent sous forme de texte et j'aimerais qu'une image apparaissent à la place.

J'ai essayé de modifier le type de sortie de PHOTO.get() en renvoyant un System.Windows.Controls.Image, mais alors au lieu de voir s'afficher le texte de l'URL dans le ListView, je vois apparaître le texte "System.Windows.Controls.Image" sur chaque ligne, ce qui correspond au ToString() qui est effectué.

Je ne sais pas si ce que je désire faire est possible en conservant la méthode actuellement employée ou s'il faut utiliser une autre méthode.

Une idée ?

Merci d'avance.

29/01/2010, 20h58
Thomas Lebrun

Utilise un convertisseur, dans ton binding, qui va convertir le Path en image :)
30/01/2010, 13h41
altropus

Réponse

Si il s'agit d'utiliser un convertisseur implémentant l'interface IValueConverter, j'ai essayé mais cela ne fonctionne pas.

Car au moment de l'affichage la fonction ToString() est appelée, et donc je vois apparaître la chaîne de caractères "System.Windows.Controls.Image" au lieu de l'image attendue.

N'y aurait-il pas une solution avec les DataTemplate ?
30/01/2010, 14h57
ikeas

faut mettre une image dans le xaml en tenplate qui prend sa source
sur le binding du nom avec le converter

Je rajoute dans le XAML l'espace de nom :

Code:

1
2
3
4
5
 
<Window 
...
xmlns:local="clr-namespace:myApplication"
...

Je rajoute dans <Window.Resources> :

Code:

1
2
3
4
5
6
 
<local:BitmapConverter x:Key="myBitmapConverter">
</local:BitmapConverter> 
<DataTemplate DataType="System.Windows.Media.Imaging.BitmapImage">
<Image Source="{Binding Path=photo, Converter={StaticResource myBitmapConverter}}" />
</DataTemplate>

Mon convertisseur est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
[ValueConversion(typeof(String), typeof(System.Windows.Media.Imaging.BitmapImage))]
public class BitmapConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      string source = (string)value;
      System.Windows.Media.Imaging.BitmapImage bitmapImage = new System.Windows.Media.Imaging.BitmapImage();
      if (source.Trim().Length == 0) source = "http://mywebsite/image/nopic.jpg"; 
      bitmapImage.BeginInit();
      bitmapImage.UriSource = new Uri(source);
      bitmapImage.DecodePixelWidth = 50;
      bitmapImage.EndInit();
       return bitmapImage;
   }
   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
      throw new NotImplementedException();
   }
}

Je rajoute aussi dans le code décrit dans le premier post :

Code:

1
2
 
binding.Converter = new BitmapConverter();

Mais cela ne fonctionne toujours pas...

normalement le code
Code:

1 2 binding.Converter = new BitmapConverter();
n'est pas nécessaire
puisque le converter est instancier directement dans le xaml

ensuite dans
Code:

1 2 3 4 5 6 7 public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { string source = (string)value; if (source.Trim().Length == 0) source = "http://mywebsite/image/nopic.jpg"; return new Uri(source); }
essai ca j'ai pas vérifié le targettype pour le moment (je vais contrôler ca)
mais normalement dans value tu doit trouver theoriquement l'adresse lié a ton image

de meme au niveau de ton datatemplate ca me semble etre mauvais
t'aurais pas un visuel de ce que tu veux faire ca me donnerais une idee

30/01/2010, 22h19
altropus
J'ai changé le convertisseur.

Mais étrangement c'est la ligne :
Code:

1 2 binding.Converter = new BitmapConverter();
qui déclenche l'appel du convertisseur, alors que le <DataTemplate> ne fait rien du tout !?

Mais j'obtiens toujours l'URL en chaîne de caractère au lieu d'avoir une image.

J'avais aussi oublié la ligne
Code:

1 2 listView.ItemTemplate = Resources["PhotoTemplate"] as DataTemplate;
mais cela ne change rien...

Pour le visuel, je n'en ai pas car je ne sais pas si ce que je désire faire est faisable...

voici un exemple tu vas voir c'est simple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<Window x:Class="ListboxImage.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="416" Width="594">
    <Grid>
        <ListBox HorizontalAlignment="Left" Margin="30,22,0,70" Name="listBox1" Width="217" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Path}" Height="50" Width="50" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Height="55" Margin="263,78,190,0" Name="button1" VerticalAlignment="Top" Click="button1_Click">Button</Button>
    </Grid>
</Window>

et le code cs

Code:

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
 
namespace ListboxImage
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            ArrayList al = new ArrayList();
            al.Add(new ZImage { Path = "http://actu.football.fr/public/images/Juin%202008/bianca-gascoigne%20bell%20fille%20de%20paul%20gascoigne.jpg" });
            al.Add(new ZImage { Path="http://college-de-vevey.vd.ch/auteur/Inedits/mutation_des_signes/fille_au_turban.jpg"});
            this.listBox1.ItemsSource = al;
        }
    }
 
    public class ZImage
    {
        public string Path {get; set;}
    }
}

j'ai mis la taille des image a 50/50
tu notera que dans ce cas il est inutil d'avoir un converter

pour avoir les noms avec tu fais

Code:

1
2
3
4
5
6
7
 
<DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path}" Height="50" Width="50" />
                        <TextBlock Text="{Binding Path}" VerticalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>

voila j'espere que ca va t'aider

En fait je voudrais effectivement faire quelque chose d'équivalent.

J'ai essayé le code XAML suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <Window.Resources> <DataTemplate x:Key="PhotoTemplate"> <Image Source="{Binding Path}" Height="50" Width="50" /> </DataTemplate> <DataTemplate x:Key="TextTemplate"> <TextBlock Text="{Binding Path}" VerticalAlignment="Center" /> </DataTemplate> </Window.Resources> <Grid> <ListView Name="ListView1"> <ListView.View> <GridView> <GridViewColumn Header="Image" CellTemplate="{StaticResource PhotoTemplate}"></GridViewColumn> <GridViewColumn Header="Titre" CellTemplate="{StaticResource TextTemplate}"></GridViewColumn> </GridView> </ListView.View> </ListView> </Grid>
Et cela fonctionne parfaitement.

Mais, comme les colonnes sont créées dynamiquement, je suis obligé de traduire cela en C#, je rajoute donc, au code décrit plus haut, la ligne suivante :
Code:

1 2 if (types[i] == "photo") gvc.CellTemplate = Resources["PhotoTemplate"] as DataTemplate;
mais cela ne fonctionne pas.