Create DataGridTemplateColumn with Image and Text WPF

2.4k views Asked by At

I am using this code to create a column that shows image and text, but only the text is appearing, what am I doing wrong?

DataGridTemplateColumn col1 = new DataGridTemplateColumn(); col1.Header = "MyHeader";

            FrameworkElementFactory factoryStackPanel = new FrameworkElementFactory(typeof(System.Windows.Controls.StackPanel));
            factoryStackPanel.SetValue(System.Windows.Controls.StackPanel.OrientationProperty, Orientation.Vertical);

            FrameworkElementFactory factoryTextBlock = new FrameworkElementFactory(typeof(System.Windows.Controls.TextBlock));
            Binding bindTextBlock = new Binding("[" + i + "]");
            factoryTextBlock.SetValue(System.Windows.Controls.TextBlock.TextProperty, bindTextBlock);
            factoryTextBlock.SetValue(System.Windows.Controls.TextBlock.TextWrappingProperty, TextWrapping.Wrap);
            factoryTextBlock.SetValue(System.Windows.Controls.TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);

            FrameworkElementFactory factoryImage = new FrameworkElementFactory(typeof(System.Windows.Controls.Image));
            Binding bindImage = new Binding("http://www.pgn.co.id/images/modules/logo_pgn.png");
            factoryImage.SetValue(System.Windows.Controls.Image.SourceProperty, bindImage);

            factoryStackPanel.AppendChild(factoryImage);
            factoryStackPanel.AppendChild(factoryTextBlock);

            DataTemplate cellTemplate = new DataTemplate() { VisualTree = factoryStackPanel };

            col1.CellTemplate = cellTemplate;

            gridViewItens.Columns.Add(col1);
2

There are 2 answers

0
mechanic On

Like Ed Plunkett said, it's much more clean to do it in XAML. Assuming that your DataGrid is bound to an ObservableCollection of some items, and you item class has properties like MyText and MyImage, you could do something like:

<DataGridTemplateColumn Header="My Item">
     <DataGridTemplateColumn.CellTemplate>
      <DataTemplate>
          <StackPanel Orientation="Horizontal">
              <Image Source="{Binding MyImage}" />
              <TextBlock Text="{Binding MyText}" />
          </StackPanel>
      </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
0
mohsen mousavi On

The DataGridTemplateColumn uses a data template, which works in the same way as the data-template features you explored with list controls earlier. The only difference in the DataGridTemplateColumn is that it allows you to define two templates: one for data display (the CellTemplate) and one for data editing (the CellEditingTemplate), which you’ll consider shortly. Here’s an example that uses the template data column to place a thumbnail image of each product in the grid:

<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Stretch="None" Source=
"{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}">
</Image>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>