Image + Text dans un DataGrid

**scharly3** · 28/03/2011, 13h39

Bonjour,

J'aimerais intégrer dans un datagrid une image en plus du text au sein d'une cellule.

Je voudrais donc savoir s'il existe un type Mixte et un type image qui me permet de faire au sein de mon code C# quelque chose comme ceci:

Code :

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

var maCellule = "Test" + new Image("/data/monImage.jpg");

Merci de votre aide.

**Nathanael Marchand** · 28/03/2011, 13h49

Il faut définir une DataGridTemplateColumn pour ta colonne.
Du coup, tu peux ensuite définir ton Template avec un StackPanel qui contient une image et un texte

**scharly3** · 28/03/2011, 14h03

Bonjour et merci pour ta réponse, toutefois, ce n'est pas si simple ...
Mon datagrid est généré dynamiquement et je n'ai donc pas la main sur les colonnes (AutoGenerateColumns = true)
Donc il faudrait que je puisse uniquement modifier ma dataSource.

**Nathanael Marchand** · 28/03/2011, 14h10

Enfait, tu n'as pas trop le choix dans ce cas la!

**scharly3** · 28/03/2011, 15h19

Hum me voici totalement démoralisé ... je peux peut-être jour sur le background, est-ce possible de définir un background-img sur mon datagrid sur chaques cells ? (En jouant avec l'event qui charge mes cells)

**Lapinpanda** · 28/03/2011, 16h20

Il faut définir une DataGridTemplateColumn pour ta colonne.
Du coup, tu peux ensuite définir ton Template avec un StackPanel qui contient une image et un texte

Je vois pas ce qu'il te faut de plus. Peux être ne comprends tu pas trop le fonctionnement de Silverlight, mais on ajoute pas une image via une property. Tu va devoir faire un template du contrôle, a savoir ici, une cellule. Tu as deux possibilités, soit revoir le template du DataGridTemplateColumn; soit revoir le style CellStyle pour lui donner une image, et encore je sais ps si c'est possible car tu auras une image dynamique donc un style dynamique, mais pk pas

**Nathanael Marchand** · 28/03/2011, 16h34

Je ne vois pas ce qui te gene dans le fait de definir une colone.
Ca n'empeche pas de laisser autogeneratecolumns a true. Les deux s'additionnent.

**scharly3** · 28/03/2011, 17h32

Envoyé par Lapinpanda

Je vois pas ce qu'il te faut de plus. Peux être ne comprends tu pas trop le fonctionnement de Silverlight.

Oui en effet j'ai du raté un passage de silverlight ...
Je vais détailler mon problème et ainsi j'éspère que vous pourez détailler votre solution

Je travaille avec les librairies Telerik pour datagrid, ce qui me donne pour la partie xaml:

Code xml :

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

1
2
 
<telerik:RadGridView x:Name="radGridView" CanUserDeleteRows="False" CanUserInsertRows="False" EditTriggers="None" Grid.ColumnSpan="2" />

Ensuite re source ma RadGridView avec un IEnumerable<IDictionary> généré dynamiquement depuis un fichier XML:

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
29
30
31
32
33
34
35
36
37
38
39
 
     public IEnumerable<IDictionary> GenerateData(string filter)
        {
            XElement sheets = XElement.Load(UrlFile);
            if (filter == null)
            {
                return
                    from row in sheets.Elements("row")
                    select MakeDictionary(row);
            }
            else
            {
                return
                    from row in sheets.Elements("row")
                    where row.Attribute("filter").Value.Contains(filter)
                    select MakeDictionary(row);
            }
        }
        IDictionary MakeDictionary(XElement row)
        {
            var dict = row.Elements().ToDictionary(e => e.Name.LocalName, ParseValue);
            return dict;
        }
        object ParseValue(XElement e)
        {
            float value;
            if (float.TryParse(e.Value, out value))
            {
                if (Math.Abs(value) < 1 && value!=0)
                {
                    return value.ToString("#0.##%", CultureInfo.InvariantCulture);
                }
                else
                {
                    return value;
                }
            }
            return e.Value;
        }

Et j'ai donc dans ma vue.xaml.cs le code suivant.

Code :

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

this.radGridView.ItemsSource = XmlContentFile.getDataSource();

Donc a aucun moment je ne définie mes templates car tous est auto généré a partir d'une collection d'objet.

Merci de votre aide.

**Julien_G** · 28/03/2011, 17h47

Salut,
tu peux ajouter des columns via C# :
http://www.telerik.com/help/aspnet/g...ngcolumns.html

On PageInit:
C#

Code :

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

1
2
3
4
5
6
GridBoundColumn boundColumn;
 boundColumn = new GridBoundColumn();
 boundColumn.UniqueName = "CustomerID";
 boundColumn.DataField = "CustomerID";
 boundColumn.HeaderText = "CustomerID";
 this.RadGrid1.MasterTableView.Columns.Add(boundColumn);

On PageLoad when !Page.IsPostBack:
C#

Code :

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

1
2
3
4
5
6
GridBoundColumn boundColumn;
 boundColumn = new GridBoundColumn();
 this.RadGrid1.MasterTableView.Columns.Add(boundColumn);
 boundColumn.UniqueName = "CustomerID";
 boundColumn.DataField = "CustomerID";
 boundColumn.HeaderText = "CustomerID";

EDIT : Oups autant pour moi j'avais pas vu qu'on était en Silverlight Pas la bonne solution en effet ..

**Lapinpanda** · 28/03/2011, 18h32

Que tu set ton item source à un temps T ou un temps T +1 ne change strictement rien avec le concept de colonne Template.

Tu conçois tes colonnes dans le xaml. Si ton itemsource est null --> cela ne change rien.

Silverlight va attendre que ton itemsource soit modifié, et une fois fait, il va envoyé les property de ta datatable dans les colonnes au endroits que tu as indiqué dans le xaml.

**scharly3** · 28/03/2011, 19h25

Merci beaucoup, je vais faire avec tout ça.

**Nathanael Marchand** · 28/03/2011, 20h35

Ne pas écouter la solution de Julien_G, c'est de l'ASP.Net

Pour en revenir au sujet, ca n'est pas parceque tu déclares ta source dans le code-behind que tu ne peux pas déclarer tes colonnes dans le xaml.
Par ailleurs, il existe un pattern de conception plutot efficace pour Silverlight et WPF: c'est le MVVM. Je te suggère de regarder un peu la dessus (même si ca n'a pas un lien direct avec ton problème)

**scharly3** · 28/03/2011, 21h15

Le problème c'est que mes colonnes varient en type et en nombre donc je ne peux pas les déclarer dans mon XAML non ?

Je vais jeter un oeil au MVVM

**Nathanael Marchand** · 28/03/2011, 23h38

Envoyé par scharly3

Le problème c'est que mes colonnes varient en type et en nombre donc je ne peux pas les déclarer dans mon XAML non ?

Je vais jeter un oeil au MVVM

Huhu! Effectivement, c'est un problème. Ben la effectivement y'a pas trop de solutions

**scharly3** · 29/03/2011, 12h25

Bonjour,

Après quelques recherches sur les DataTemplates ... voici un nouveau lot de questions:

Je peux donc afficher une image dans une colonne avec par exemple le code suivant:

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
       <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Landing}" Header="Landing" UniqueName="Landing" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Landing}"
                                      VerticalAlignment="Center" />
                                <Image Stretch="Fill"
                                      Source="../Data/icon.jpg"
                                      Margin="0,0,5,0" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

Deux problèmes ce posent à partir de là:

Comment puis-je faire en sorte de faire changer mon image en fonction du contenu de mes données ?

Est-il possible d'appliquer ces DataTemplate à des colonnes générées via C# comme dans l'exemple ci-dessous:

Code c# :

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

1
2
3
            GridViewDataColumn maColumn;
            maColumn = new GridViewDataColumn();
            this.radGridView.Columns.Add(maColumn);

Merci Beaucoup.

**Nathanael Marchand** · 29/03/2011, 13h21

Dans ton usercontrol:

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<UserControl.Resources>
     <DataTemplate x:Key="MyCellTemplate">
          <StackPanel Orientation="Horizontal">
               <TextBlock Text="{Binding Landing}"
                               VerticalAlignment="Center" />
               <Image Stretch="Fill"
                          Source="../Data/icon.jpg"
                          Margin="0,0,5,0" />
          </StackPanel>
     </DataTemplate>
</UserControl.Resource>

et dans le codebehind:

Code c# :

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

1
2
3
4
5
 
GridViewDataColumn maColumn;
maColumn = new GridViewDataColumn();
maColumn.CellTemplate = this.Resources["MyCellTemplate"] as DataTemplate;
this.radGridView.Columns.Add(maColumn);

J'ai pas vérifié, ca marchera peut être pas du premier coup mais c'est un début de piste

**scharly3** · 29/03/2011, 13h44

Merci beaucoup Nathanael voila la réponse que j'attendais !!!

Voici la solution que je vais adopter tiré de ton idée:

Code c# :

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

1
2
3
4
 public DataTemplate Create()
        {
            return (DataTemplate)XamlReader.Load(@"<DataTemplate xmlns=""http://schemas.microsoft.com/client/2007"">  <StackPanel Orientation=""Horizontal""><TextBlock Text=""{Binding "+ Variable1 +"}"" VerticalAlignment=""Center"" /> <Image Stretch=""Fill"" Source=""../Data/icon.jpg"" /></StackPanel></DataTemplate>");
        }

Ce qui me permet donc de modifier mes templates de colonnes dynamiquement ...

Il va me rester la question :
Comment puis-je faire en sorte de faire changer mon image en fonction du contenu de mes données ?

**Lapinpanda** · 29/03/2011, 13h55

Code xml :

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

1
2
3
4
5
<TextBlock Text="{Binding Landing}"
                               VerticalAlignment="Center" />
               <Image Stretch="Fill"
                          Source="{Binding UrlImage}"
                          Margin="0,0,5,0" />

Image + Text dans un DataGrid

Silverlight

Discussions similaires

Partager

Partager