Image + Text dans un DataGrid

Version imprimable

28/03/2011, 13h39
scharly3

Image + Text dans un DataGrid

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:

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

Merci de votre aide.
28/03/2011, 13h49
Nathanael Marchand

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
28/03/2011, 14h03
scharly3

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.
28/03/2011, 14h10
Nathanael Marchand

Enfait, tu n'as pas trop le choix dans ce cas la!
28/03/2011, 15h19
scharly3

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)
28/03/2011, 16h20
Lapinpanda

Citation:

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 ;)
28/03/2011, 16h34
Nathanael Marchand

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.

Citation:

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:

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:

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:

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.

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

On PageInit:
C#
Citation:
Code:

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#
Citation:
Code:

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 :ccool: Pas la bonne solution en effet ..

28/03/2011, 18h32
Lapinpanda

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.
28/03/2011, 19h25
scharly3

Merci beaucoup, je vais faire avec tout ça.
28/03/2011, 20h35
Nathanael Marchand

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

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)
28/03/2011, 21h15
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 :)
28/03/2011, 23h38
Nathanael Marchand

Citation:

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 :?

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:

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:

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

Merci Beaucoup.

Dans ton usercontrol:

Code:

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:

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 :)

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

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

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 ?

Code:

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