Retrieving image from binary data (OLE object, access database) and display it in datagrid column in WPF (by C#)

Question

0.00/5 (No votes)

See more:

First and foremost, I apologize for my grammatical errors; my first language is Persian (Iran).
I want to display the images in the DataGrid column where the binary are stored in Access.
The following method converts the image to binary:

C#

private static byte[] ImageToBytes(BitmapImage image)
{
 byte[] Data;
 JpegBitmapEncoder JpegEncoder = new JpegBitmapEncoder();
 JpegEncoder.Frames.Add(BitmapFrame.Create(image));
 using (System.IO.MemoryStream MS = new System.IO.MemoryStream())
 {
  JpegEncoder.Save(MS);
  Data = MS.ToArray();
 }
 return Data;
}

I receive the Bitmap image from the method below and then display it in the Image control:

C#

private BitmapImage GetImageFromBytes(byte[] bytes)
{
 System.IO.MemoryStream Stream = new System.IO.MemoryStream();
 Stream.Write(bytes, 0, bytes.Length);
 Stream.Position = 0;
 System.Drawing.Image img = System.Drawing.Image.FromStream(Stream);
 BitmapImage bitImage = new BitmapImage();
 bitImage.BeginInit();
 System.IO.MemoryStream MS = new System.IO.MemoryStream();
 img.Save(MS, System.Drawing.Imaging.ImageFormat.Jpeg);
 MS.Seek(0, System.IO.SeekOrigin.Begin);
 bitImage.StreamSource = MS;
 bitImage.EndInit();
 return bitImage;
}

https://docs.microsoft.com/en-us/answers/storage/attachments/114731-first-image.jpg

C#

public OleDbConnection OleDbConnect = new 
OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + 
System.Windows.Forms.Application.StartupPath + @"\Database.accdb");
private void Window_Loaded(object sender, RoutedEventArgs e)
{
 OleDbConnect.Open();
 OleDbDataAdapter OleDA = new OleDbDataAdapter("Select * From 
 MemberTable", OleDbConnect);
 DataTable DT = new DataTable();
 OleDA.Fill(DT);
 for (int i = 0; i < DT.Rows.Count; i++)
 {
  //I want to convert all the cells in this column (members images column)
  //from the byte array to the bitmap image
  var Temp = DT.Rows[i][12];
  byte[] T = (byte[])Temp;
  DT.Rows[i][12] = GetImageFromBytes(T);
 }
 MemberDataGrid.DataContext = DT;
}

But the above method for displaying the image in the DataGrid does not work properly:
https://docs.microsoft.com/en-us/answers/storage/attachments/114732-second-image.jpg
Thanks

What I have tried:

C#

public OleDbConnection OleDbConnect = new 
OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + 
System.Windows.Forms.Application.StartupPath + @"\Database.accdb");
private void Window_Loaded(object sender, RoutedEventArgs e)
{
 OleDbConnect.Open();
 OleDbDataAdapter OleDA = new OleDbDataAdapter("Select * From 
 MemberTable", OleDbConnect);
 DataTable DT = new DataTable();
 OleDA.Fill(DT);
 for (int i = 0; i < DT.Rows.Count; i++)
 {
  //I want to convert all the cells in this column (members images column)
  //from the byte array to the bitmap image
  var Temp = DT.Rows[i][12];
  byte[] T = (byte[])Temp;
  DT.Rows[i][12] = GetImageFromBytes(T);
 }
 MemberDataGrid.DataContext = DT;
}

Posted 14-Jul-21 9:41am

Reza jafery

Updated 5-Apr-22 7:35am

v6

Add a Solution

Comments

[no name] 15-Jul-21 1:07am

So, you can display in an image control but not in a grid. You show none relevant database code and no relavant grid code. We're just supposed to assume the cell is actually capable of receiving an image.

Reza jafery 25-Jul-21 18:09pm

Thank you for your attention, please share my answer.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Reza jafery · Accepted Answer · 2021-07-25T11:44:00

I found the solution.
First, add the database to your project as shown below:
https://docs.microsoft.com/en-us/answers/storage/attachments/117722-adding-database.gif
Note: set the "Copy to Output Direct" property to "Copy if newer".
Next, add the following XAML code to the window where you want the Data Grid to be displayed (You can add or remove columns as you wish):

<Window.Resources>
   <local:DatabaseDataSet x:Key="Database_DataSet"/>
   <CollectionViewSource x:Key="MemberTableViewSource" Source="{Binding MemberTable, Source= {StaticResource Database_DataSet}}"/>
</Window.Resources>
<Grid DataContext="{StaticResource MemberTableViewSource}">
  <DataGrid x:Name="MemberDataGrid" HeadersVisibility="Column" EnableRowVirtualization="True" AutoGenerateColumns="False" ItemsSource="{Binding}" Width="500" Height="400">
    <DataGrid.Columns>
      <DataGridTextColumn x:Name="FirstName" Binding="{Binding FirstName}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="LastName" Binding="{Binding LastName}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="IDNumber" Binding="{Binding IDNumber}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="PhoneNumber" Binding="{Binding PhoneNumber}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="MobilePhoneFirstNumber" Binding="{Binding MobilePhoneFirstNumber}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="MobilePhoneSecondNumber" Binding="{Binding MobilePhoneSecondNumber}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="LoanDate" Binding="{Binding LoanDate}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="NumberOfBooksTaken" Binding="{Binding NumberOfBooksTaken}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="BookReturnDate" Binding="{Binding BookReturnDate}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="MembershipDate" Binding="{Binding MembershipDate}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="RegistrationFee" Binding="{Binding RegistrationFee}" Width="SizeToHeader"/>
      <DataGridTextColumn x:Name="QR" Binding="{Binding QR}" Width="auto"/>
      <DataGridTemplateColumn x:Name="MemberImage" Width="SizeToHeader">
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <Image Source="{Binding MemberImage}"/>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
    </DataGrid.Columns>
  </DataGrid>
</Grid>

Then, add the following code to the window where you want the database information to be displayed in the Data Grid:

C#

public void DatagridRefresh()
{
 DatabaseDataSet Database_DataSet =
 ((DatabaseDataSet)TryFindResource("Database_DataSet"));
 DatabaseDataSetTableAdapters.MemberTableTableAdapter MemberTable_TableAdapter = new
 DatabaseDataSetTableAdapters.MemberTableTableAdapter();
 MemberTable_TableAdapter.Fill(Database_DataSet.MemberTable);
 CollectionViewSource MemberTableViewSource =
 ((CollectionViewSource)TryFindResource("MemberTableViewSource"));
 MemberTableViewSource.View.MoveCurrentToFirst();
}
public MainWindow()
{
InitializeComponent();
DatagridRefresh();
}

Note: DatagridRefresh method must be used to update DataGrid (after inserting, editing and deleting).
For example:

C#

private void Delete_Button_PreviewMouseLeftButtonDown(object sender,
MouseButtonEventArgs e)
{
 OleDbConnection OleDbConnect = new
 OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source="
 + System.Windows.Forms.Application.StartupPath + @"\Database.accdb");
 OleDbConnect.Open();
 OleDbCommand OleDbCommand_Delete = new OleDbCommand("Delete From [MemberTable]
 Where
 [IDNumber]=" + IDNumber_TextBox.Text.Trim(), OleDbConnect);
 OleDbCommand_Delete.ExecuteNonQuery();
 OleDbConnect.Close();
 var MainWindow = Application.Current.MainWindow;
 (MainWindow as MainWindow).MemberDatagridRefresh();
}

The result picture:
https://docs.microsoft.com/en-us/answers/storage/attachments/117731-result.gif
Thanks