none
DataGridView – comment afficher une icône et du texte dans la même cellule RRS feed

  • Discussion générale

  • Le contrôle DataGridView n'a pas de support intégré pour afficher une icône et le texte dans la même cellule. À travers les événements de personnalisation de peinture différents, tels que l'événement CellPaint, vous pouvez facilement afficher une icône à côté du texte dans la cellule. L'exemple suivant étend la DataGridViewTextColumn et la cellule pour peindre une image à côté du texte. L'exemple utilise la propriété DataGridViewCellStyle.Padding pour régler la position du texte et remplace la méthode Paint pour peindre une icône. Cet exemple peut être simplifié en gérant l'événement CellPainting et en effectuant un code similaire.

     

      public class TextAndImageColumn:DataGridViewTextBoxColumn
      {
        private Image imageValue;
        private Size imageSize;
     
        public TextAndImageColumn()
        {
          this.CellTemplate = new TextAndImageCell();
        }
     
        public override object Clone()
        {
          TextAndImageColumn c = base.Clone() as TextAndImageColumn;
          c.imageValue = this.imageValue;
          c.imageSize = this.imageSize;
          return c;
        }
     
        public Image Image
        {
          get { return this.imageValue; }
          set
          {
            if (this.Image != value) {
              this.imageValue = value;
              this.imageSize = value.Size;
     
              if (this.InheritedStyle != null) {
                Padding inheritedPadding = this.InheritedStyle.Padding;
                this.DefaultCellStyle.Padding = new Padding(imageSize.Width,
                            inheritedPadding.Top, inheritedPadding.Right, 
                            inheritedPadding.Bottom);
              }
            }
          }
        }
        private TextAndImageCell TextAndImageCellTemplate
        {
          get { return this.CellTemplate as TextAndImageCell; }
        }
        internal Size ImageSize
        {
          get { return imageSize; }
        }
      }
     
      public class TextAndImageCell : DataGridViewTextBoxCell
      {
        private Image imageValue;
        private Size imageSize;
        
        public override object Clone()
        {
          TextAndImageCell c = base.Clone() as TextAndImageCell;
          c.imageValue= this.imageValue;
          c.imageSize = this.imageSize;
          return c;
        }
     
        public Image Image
        {
          get {
            if (this.OwningColumn == null || 
                  this.OwningTextAndImageColumn == null) {
     
              return imageValue;
            }
            else if (this.imageValue != null) {
              return this.imageValue;
            }
            else {
              return this.OwningTextAndImageColumn.Image;
            }
          }
          set {
            if (this.imageValue != value) {
              this.imageValue = value;
              this.imageSize = value.Size;
     
              Padding inheritedPadding = this.InheritedStyle.Padding;
              this.Style.Padding = new Padding(imageSize.Width, 
                            inheritedPadding.Top, inheritedPadding.Right, 
                            inheritedPadding.Bottom);
            }
          }
        }
        protected override void Paint(Graphics graphics, Rectangle clipBounds,
              Rectangle cellBounds, int rowIndex, DataGridViewElementStates cellState,
              object value, object formattedValue, string errorText, 
              DataGridViewCellStyle cellStyle, 
              DataGridViewAdvancedBorderStyle advancedBorderStyle,
              DataGridViewPaintParts paintParts)
        {
          // peindre le contenu de base
          base.Paint(graphics, clipBounds, cellBounds, rowIndex, cellState, 
                    value, formattedValue, errorText, cellStyle,
                    advancedBorderStyle, paintParts);
     
          if (this.Image != null) {
            // peindre l’image attachee a la cellule
            System.Drawing.Drawing2D.GraphicsContainer container = 
                       graphics.BeginContainer();
            
            graphics.SetClip(cellBounds);
            graphics.DrawImageUnscaled(this.Image, cellBounds.Location);
     
            graphics.EndContainer(container);
          }
        }
     
        private TextAndImageColumn OwningTextAndImageColumn
        {
          get { return this.OwningColumn as TextAndImageColumn; }
        }
      }

     

     

     

     

    Pour plusieurs questions sur la bibliothèque de classes .NET, visitez Foire aux Questions  -  Bibliothèque de classes .NET Framework

    mercredi 30 juin 2010 12:31

Toutes les réponses

  • Bonjour,

    Merci pour votre code,

    Pouvoir dessiner un icône devant le texte d'une colonne est exactement ce que je recherche (par analogie avec ce que l'on peux faire nativement dans un listview).

    Malheureusement je programme en Vb et je ne suis pas encore familier à l'utilisation de ce type de code "de remplacement"... Disposez-vous du convertisseur C --> Vb afin de fournir un exemple en Vb ?

    Amicalement,

     


    Projet volumineux en cours de migration de Vb6 à VbNet2008 Visual Studio 2008 - VbNET/Vb6(COM)
    mercredi 28 juillet 2010 09:34
  • Bonjour,

     

    Je vous propose ce convertisseur :

    http://converter.telerik.com/

     

    Cordialement,

    Alex

    mercredi 28 juillet 2010 13:43
  • Merci Alex pour le lien,

    J'ai convertis votre exemple en VbNet.

    J'ai du mettre en commentaire le renseignement de la propriété ImageSize de la classe TextAndImageColumn, car la propriété est en ReadOnly...

      Public Overrides Function Clone() As Object
        Dim c As DataGridViewTextAndImageColumn = TryCast(MyBase.Clone(), DataGridViewTextAndImageColumn)
        c.imageValue = Me.imageValue
        'c.ImageSize = Me.m_imageSize
        Return c
      End Function
    
    

    J'ai fais un essai avec le code suivant et ça semble fonctionner.

        'Ajout d'une colonne de Image + Text
        Dim MaColonneTextAndImage = New DataGridViewTextAndImageColumn
        MaColonneTextAndImage.HeaderText = "TxtImage"
        MaColonneTextAndImage.Name = "TxtImage"
        'Pour affecter la même image à toutes les lignes:
        'MaColonneTextAndImage.Image = New Bitmap("E:\Sample\Test_VbNet\DataGridView\Test-DataGridView\Test-DataGridView\Journal.png")
        With Me.MyDataGridView
          .Columns.Add(MaColonneTextAndImage)
        End With
        Dim rnd = New System.Random
        For Each row As DataGridViewRow In Me.MyDataGridView.Rows
          DirectCast(row.Cells("TxtImage"), DataGridViewTextAndImageCell).Image = New Bitmap("E:\Sample\Test_VbNet\DataGridView\Test-DataGridView\Test-DataGridView\ale.gif")
          'DirectCast(row.Cells("TxtImage"), DataGridViewTextAndImageCell).Image = New Bitmap("E:\Sample\Test_VbNet\DataGridView\Test-DataGridView\Test-DataGridView\Journal.png")
          row.Cells("TxtImage").Value = "Mon texte " & rnd.Next.ToString
        Next
    
    

    Si j'ai bien compris, il est nécessaire d'affecter une image qui a les bonnes dimensions (surtout la hauteur) pour tenir dans la cellule ... Cela vous semble-t'il correct ?

    Cordialement,

    Laurent,

     


    Projet volumineux en cours de migration de Vb6 à VbNet2008 Visual Studio 2008 - VbNET/Vb6(COM)
    vendredi 30 juillet 2010 12:28
  • Bonsoir à tous, ça fait une semaine que je cherche un code similaire à celle d'Alex Petrescu que je salut en passant :)  pouvant m'aider à sélectionner la référence d'un article se trouvant dans une autre form (Form2 DatagridView2) et de l'afficher dans ma DataGridView1 qui se trouver dans la Form1. Le code fonctionne parfaitement mais mon soucie est que je n'arrive pas à déclencher l’événement Click sur l'image lorsque je clique dessus. Pouvez vous m'aider s'il vous plait  

    jeudi 13 juin 2013 18:50