Cara mudah menampilkan gambar ke dalam StringGrid

Ada banyak cara yang bisa dilakukan untuk menampilkan gambar di dalam StringGrid. Nah, berikut ini adalah salah satu caranya yang termasuk sangat mudah.

Seperti biasa, buatlah terlebih dahulu project baru, kemudian tambahkan 1 TStringGrid dan 1 TImage ke dalam Form, seperti gambar di bawah ini.



Selanjutnya, kita load gambar ke dalam komponen Image1. Klik komponen Image1, cari dan klik property Picture (tombol ...), maka akan muncul kotak dialog untuk memilih gambar.
 
 
Klik Load, lalu silahkan anda cari gambar yang anda inginkan. Tekan Ok untuk selesai.

  

NOTE:
Anda bisa memilih sembarang gambar dengan sembarang ukuran pula. Akan tetapi, yang perlu menjadi catatan, sebaiknya ukuran lebar kolom dan tinggi baris StringGrid lebih besar atau sama dengan ukuran gambar. Pada contoh ini, tinggi baris adalah 24 pixel, oleh karena itu saya memilih gambar dengan ukuran tinggi 24 pixel.

Untuk menampilkan gambar tersebut ke dalam StringGrid, kita akan menggunakan Event OnDrawCell dari StringGrid. Klik komponen StringGrid1, lalu pilih tab events, cari dan double klik pada event tersebut.


Tambahkan kode ini.

procedure TForm1.StringGrid1DrawCell(Sender: TObject; aCol, aRow: Integer;
  aRect: TRect; aState: TGridDrawState);
begin
  // "masukkan" gambar ke dalam canvas StringGrid
  // dengan menggunakan prosedur Draw
  StringGrid1.Canvas.Draw(aRect.Left,aRect.Top,Image1.Picture.Bitmap);
end;

Hasilnya adalah seperti gambar di bawah ini.



OK, gambar sudah berhasil dimunculkan di dalam StringGrid. Selanjutnya, lakukan modifikasi kode agar gambar hanya muncul pada kolom ke-3 (index ke-2) dan tidak muncul pada baris judul. Ah iya, jangan lupa set property Visible dari Image1 dari True menjadi False.

procedure TForm1.StringGrid1DrawCell(Sender: TObject; aCol, aRow: Integer;
  aRect: TRect; aState: TGridDrawState);
begin
  // Gambar hanya boleh muncul pada kolom ke-3 dan
  // tidak boleh muncul pada baris judul
  if (aCol=2) and (aRow>0) then
  begin
    // "masukkan" gambar ke dalam canvas StringGrid
    // dengan menggunakan prosedur Draw
    StringGrid1.Canvas.Draw(aRect.Left,aRect.Top,Image1.Picture.Bitmap);
  end;
end;

Ok, cukup bagus. Tetapi tampak gambar tersebut posisinya rata kiri, akan lebih bagus jika posisinya bisa di tengah. Oleh karena itu, modifikasi kode untuk men-centre posisi gambar.

procedure TForm1.StringGrid1DrawCell(Sender: TObject; aCol, aRow: Integer;
  aRect: TRect; aState: TGridDrawState);
var

  // variable ini menyimpan posisi X dari gambar  

  lX : integer;
begin
  // Gambar hanya boleh muncul pada kolom ke-3 dan
  // tidak boleh muncul pada baris judul
  if (aCol=2) and (aRow>0) then
  begin
    // Hitung posisi X dari gambar agar tepat di tengah kolom
    // Caranya adalah :
    //    Lebar kolom - lebar gambar lalu dibagi 2
    // NOTE:
    //   X shr 1 artinya sama dengan X div 2
    lX := (aRect.Right-aRect.Left-Image1.Picture.Width) shr 1;


    // "masukkan" gambar ke dalam canvas StringGrid
    // dengan menggunakan prosedur Draw
    StringGrid1.Canvas.Draw(aRect.Left+lX,aRect.Top,Image1.Picture.Bitmap);
  end;
end;

Hasilnya adalah :


Sip.


Sekarang kita coba lagi lakukan modifikasi sedikit. Misalnya saya ingin agar Gambar menyesuaikan dengan kategori. Maksud saya, jika kategorinya adalah 1, maka akan muncul gambar A, kategori 2 akan muncul gambar B dan Gambar C untuk kategori 3.

Langkah pertama adalah, tambahkan 2 komponen TImage lagi, masing-masing untuk menyimpan gambar B dan C. Seperti sebelumnya, load masing-masing gambar ke dalam komponen TImage tersebut.

Kemudian, ubah kode menjadi seperti di bawah ini.

procedure TForm1.StringGrid1DrawCell(Sender: TObject; aCol, aRow: Integer;
  aRect: TRect; aState: TGridDrawState);
var
  // variable ini menyimpan posisi X dari gambar
  lX : integer;


  // variable ini untuk menyimpan gambar yang akan ditampikan
  // ke stringgrid, sesuai dengan kategori
  // inisialisasi dengan nil
  lBitmap : TBitmap=nil;

  // variable ini untuk menyimpan nilai dari kolom kategori
  lKategori : string;

begin
  // Gambar hanya boleh muncul pada kolom ke-3 dan
  // tidak boleh muncul pada baris judul
  if (aCol=2) and (aRow>0) then
  begin
    // pilih gambar sesuai dengan nilai kolom kategori
    lKategori:=StringGrid1.Cells[0,aRow];
    if lKategori='1' then
       lBitmap :=Image1.Picture.Bitmap
    else if lKategori='2' then
         lBitmap :=Image2.Picture.Bitmap
    else if lKategori='3' then
         lBitmap :=Image3.Picture.Bitmap
    else
       lBitmap :=nil;

    // lanjutkan proses hanya jika bitmap tidak nil
    if (lBitmap<>nil) then
    begin
      // Hitung posisi X dari gambar agar tepat di tengah kolom
      // Caranya adalah :
      //    Lebar kolom - lebar gambar lalu dibagi 2
      // NOTE:
      //   X shr 1 artinya sama dengan X div 2
      lX := (aRect.Right-aRect.Left-lBitmap.Width) shr 1;


      // "masukkan" gambar ke dalam canvas StringGrid
      // dengan menggunakan prosedur Draw
      StringGrid1.Canvas.Draw(aRect.Left+lX,aRect.Top,lBitmap);
    end;
  end;
end;

Hasilnya :


OK, selesai.

Sekali lagi, ini adalah hanya salah satu yang bisa dilakukan untuk memasukkan gambar ke dalam StringGrid. Sangat mungkin ada cara lain yang mungkin saja lebih baik.

Sekian tip dan trik kali ini, semoga yang sedikit ini bermanfaat dan selamat mencoba.