Datagrid not binding the image

Question

I need to show an image in the datagrid, but its showing like below

System.windows.controls.Image System.windows.controls.Image

The datatable i am adding the column with type as Image, and the row is contrcuted with reading the bytes[] and converting to an image then assigning to the datatable.

//Creating the column type

 if (header.ColumnDescription == "ActiveStatus")
    {
      dc = new DataColumn(header.ColumnDescription, typeof(Image));
      dt.Columns.Add(dc);
   }
//Filling the data column
foreach (DataColumn col in dt.Columns)
    {                        
      dr[col] = GetRowItem(device, col.Caption);
    }
dt.Rows.Add(dr);

//Logic for getting the image
 Image img=new Image();
 BitmapImage logo = new BitmapImage();
 logo.BeginInit();
 logo.UriSource = new Uri("pack://application:,,,/Resources/Images/cloud_logon_radio_btn_green.png"); 
  logo.EndInit();
  img.Source = logo

What is the issue?

Answer 1

Use AutoGeneratingColumn Event of the dataGrid to set the image .

Define Datatemplate in xaml

 <DataTemplate x:Key="ActivaStatusColumnTemplate">
            <Image DataContext="{Binding}"   >
                <Image.Style>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Source" Value="red.png" />
                        <Style.Triggers>
                            <DataTrigger Value="On" Binding="{Binding}">
                                <Setter Property="Source" Value="green.png"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </DataTemplate>

//Code behind

private void dgView_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
        {
            if (e.Column.Header.ToString() == "ActiveStatus")
            {
                // Create a new template column.
                MyDataGridTemplateColumn templateColumn = new MyDataGridTemplateColumn();
                templateColumn.CellTemplate = (DataTemplate)Resources["ActivaStatusColumnTemplate"];
                templateColumn.ColumnName = e.PropertyName; // so it knows from which column to get binding data
                e.Column = templateColumn;
                e.Column.Header = "ActiveStatus";
            }

        }

//Define the class to override the DataGridTemplateColumn

 /// <summary>
        /// Custom class derieved fromt the DataGridTemplateColumn to set the property name.
        /// </summary>
        public class MyDataGridTemplateColumn : DataGridTemplateColumn
        {
            public string ColumnName
            {
                get;
                set;
            }

            protected override System.Windows.FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
            {
                // The DataGridTemplateColumn uses ContentPresenter with your DataTemplate.
                ContentPresenter cp = (ContentPresenter)base.GenerateElement(cell, dataItem);
                // Reset the Binding to the specific column. The default binding is to the DataRowView.
                BindingOperations.SetBinding(cp, ContentPresenter.ContentProperty, new Binding(this.ColumnName));
                return cp;
            }
        }

refer http://social.msdn.microsoft.com/Forums/en/wpf/thread/8b2e94b7-3c44-4642-8acc-851de5285062

Answer 2

if you want to show image into browser you have to generate a url . you cannot show image directly from binary .

you can try using a handler file (.ashx) put the code form your page_load in that file and in you handler code like

public void ProcessRequest (HttpContext context) {
    //Get the picture id by url
        //Query here
        byte[] picture = queryoutput;
        Response.ContentType = "images/jpeg";
        Response.BinaryWrite(picture);
    }

    public bool IsReusable {
    get {
        return false;
    }
    }