C# DataGridView Resim Gösterme

Merhaba, C# DataGridView Resim Gösterme dersim ile C# eğitim setime devam ediyorum. Bu dersimizde veritabanında yolunu kaydettiğimiz bir resmi DataGridView ‘de bir hücrede nasıl göstereceğimize bakacağız.

C# DataGridView Resim Gösterme

Bana gelen bir soru üzerine bu dersi ekleme gereği gördüm. C# eğitim setimde yer alamayan bir ders olduğundan ve biraz sıkıntılı bir konu olduğundan dolayı bu dersi eklemek istedim. Bir çok kişinin bu konuda biraz sıkıntı çektiğini düşünüyorum. Ama merak etmeyin bu dersten sonra bu işlemi hızlıca yapabileceğinizi düşünüyorum.

Öncelikle bize bir veri kümesi gerekiyor. Bu ders için bir veritabanı bağlantısı yapmakla uğraşmamıza gerek yok. C# DataTable Example – C# Örnek DataTable yazımda zaten örnek 3 tane veri kümesi vermiştim. Bu dersimizde de onlardan birini kullanacağız.

C# DataGridView Resim Gösterme

Bize resim gerekli olduğundan Cariler veri kümesini kullanacağım.

public static DataTable DataTable_Cari_Example()
        {
            DataTable table = new DataTable("Cariler");
            table.Columns.Add(new DataColumn("CariID", typeof(int)));
            table.Columns.Add(new DataColumn("CariKodu", typeof(string)));
            table.Columns.Add(new DataColumn("CariAdi", typeof(string)));
            table.Columns.Add(new DataColumn("CariTipi", typeof(string)));
            table.Columns.Add(new DataColumn("CariVergiNo", typeof(string)));
            table.Columns.Add(new DataColumn("CariUlke", typeof(string)));
            table.Columns.Add(new DataColumn("CariCins", typeof(string)));
            table.Columns.Add(new DataColumn("CariResimYol", typeof(string)));

            table.Rows.Add(1, "C001", "Mustafa BÜKÜLMEZ", "Alıcı,Satıcı", "11111111111", "TÜRKİYE", "Kişi", "C:\\img\\araba.png");
            table.Rows.Add(2, "C002", "Google", "Satıcı", "2222222222", "ABD", "Şirket", "C:\\img\\araba.png");
            table.Rows.Add(3, "C003", "Microsoft", "Satıcı", "3333333333", "ABD", "Şirket", "C:\\img\\araba.png");
            table.Rows.Add(4, "C004", "Koç Holding", "Alıcı, Satıcı", "4444444444", "TÜRKİYE", "Holding", "C:\\img\\araba.png");
            table.Rows.Add(5, "C005", "Doğan Holding", "Alıcı", "5555555555", "TÜRKİYE", "Holding", "C:\\img\\arama.png");
            table.Rows.Add(6, "C006", "Bim Market", "Alıcı", "6666666666", "TÜRKİYE", "Şirket", "C:\\img\\araba.png");
            table.Rows.Add(7, "C007", "A 101 Market", "Alıcı", "7777777777", "TÜRKİYE", "Şirket", "C:\\img\\arama.png");

            return table;
        }

Bu hazır tablo da resim kolonu var ancak ben burada bir yolu değil, sadece resmin ismini tutmak istiyorum. O yüzden resim yol bilgilerini aşağıdaki gibi düzeltelim.

            table.Rows.Add(1, "C001", "Mustafa BÜKÜLMEZ", "Alıcı,Satıcı", "11111111111", "TÜRKİYE", "Kişi", "1.png");
            table.Rows.Add(2, "C002", "Google", "Satıcı", "2222222222", "ABD", "Şirket", "1.png");
            table.Rows.Add(3, "C003", "Microsoft", "Satıcı", "3333333333", "ABD", "Şirket", "2.png");
            table.Rows.Add(4, "C004", "Koç Holding", "Alıcı, Satıcı", "4444444444", "TÜRKİYE", "Holding", "2.png");
            table.Rows.Add(5, "C005", "Doğan Holding", "Alıcı", "5555555555", "TÜRKİYE", "Holding", "1.png");
            table.Rows.Add(6, "C006", "Bim Market", "Alıcı", "6666666666", "TÜRKİYE", "Şirket", "2.png");
            table.Rows.Add(7, "C007", "A 101 Market", "Alıcı", "7777777777", "TÜRKİYE", "Şirket", "2.png");

Resim isimlerini de değiştirdim. Çünkü farklı resimler indirdim ve onları kullanmak istiyorum. Burada tam yol değilde sadece resim adını tutmamızın faydası şudur. Olur da resimlerin yeri değişmek zorunda kalırsa, tablodaki resim yollarını değiştirmekle uğraşmak zorunda kalmayız. Yolu bir metin belgesinden yada veri tabanındaki bir tablodan okuyabiliriz. Böylece resim yolları değişse bile biz sadece ilgili yolu yazdığımız yeri değiştiririz.

Ben bu ders için Bin\Debug klasörü içerisine açtığım img klasörünü kullanacağım.

“Solution Explorer”‘e geldim ve “Add” diyerek “New Folder” dedim ve adını da img yaptım. Kullanacağım ikonları bu klasör içerisinde attım. Resimleri seçtikten sonra “Properties” kısmına geldim ve “Copy to output Directory” özelliğini “AlwaysCopy” yaptım. Artık projemi her build ettiğimde bu klasördeki resimler, Bin\Debug altına otomatik tanımlanacak. Yani img klasörü açılacak ve resimler bu klasöre kopyalanacak.

Şimdi Bin\Debug\img klasör yolunu alacak değişkenimizi tanımlayalım.

 string path = System.Windows.Forms.Application.StartupPath + "\\img\\";

Bu kod ile exe dosyamızın çalıştığı klasör yolunu alabiliriz. Sonuna img klasörünü de eklediğimizde resimlerimize ulaşabiliyoruz.

Şimdi DataTable ‘daki verilerimizi DataGridView’de gösterelim.

 DataTable dt = DataTable_Cari_Example();
            dataGridView1.DataSource = dt;

Verileri gösterme kodlarımız bu kadar. Aşağıdaki görselde gördüğünüz gibi, CariResimYol kolonunda, resimler değil yolları görünüyor.

Bunun sebebi, CariResimYol kolonu bir DataGridViewImageColumn değil. DataTable’ımızda bu kolonun veri tipi string’dir. Bu sebeple yolu görünüyor. Şimdi burada yapmamız gereken şey, bu kolonu gizledikten sonra, bu kolondaki resim adını kullanarak resimleri göstermek olacak.

CariResimYol kolonunu gizleyelim ve bir DataGridViewImageColumn ekleyelim.

            dataGridView1.Columns["CariResimYol"].Visible = false;
            DataGridViewImageColumn col = new DataGridViewImageColumn();
            col.Name = "CariResim";
            dataGridView1.Columns.Add(col);

CariResim adına yeni bir DataGridViewImageColumn ekledik.

C# DataGridView Image Column 

Şimdi bu eklediğimiz DataGridViewImageColumn ‘daki hücrelerin değerlerini, göstermelerini istediğimiz resimlerin atamasını yapmamız gerekiyor.

          try
            {
                foreach (DataGridViewRow row in dataGridView1.Rows)
                {
                    row.Cells["CariResim"].Value = Image.FromFile(path + row.Cells["CariResimYol"].Value);
                }
            }
            catch(System.IO.FileNotFoundException) { }

Bir foreach döngüsü ile satırlarda gezerek, CariResim adlı kolonun hücrelerinin değerlerini, belirlediğimiz path ile birlikte gizlediğimiz CariResimYol kolonundaki hücrelerin değerleri ile eşledik.  DataGridViewImageColumn için bir image gerektiğinden, Image.FromFile() metodunu kullandık.

Şimdi nasıl durduğunu görelim.

Gördüğünüz gibi resimler hücrelerde görünüyor. Bu projedeki resim dosyaları 32×32 olduğundan tam sığmadı. Burada 16×16 ikonlar kullanabilir yada satır genişliğini yükseltebilirsiniz.

Resimleri eşlemek için kullandığımız foreach döngüsünü try catch arasına almamızın sebebi yukarıdaki görselde gördüğünüz kırmızı işaretli yerdir. Burada bizim DataTable’ımızda img adları var ama eğer resimlere bir şekilde ulaşılamaz ise C# FileNotFoundException hatası verecektir. Bu hatayı engellemek için try catch kullandık.

C# DataGridView Resim Gösterme yazımda bu kadardı arkadaşlar.

Bana destek olmak isterseniz, iletişim sayfamda verdiğim sosyal medya hesaplarımı takip edebilirsiniz.

C Sharp Eğitim Seti eğitimi sayfasına gitmek için tıklayınız. Derslerime özel olarak hazırladığım Github Projeme bu bağlantıdan ulaşabilirsiniz… Bu yazıdaki projeyi bağlantıya tıklayarak Drive üzerinden indirebilirsiniz.

Bu yazı, sitemdeki 449. yazıdır… Sağlıcakla ve takipte kalın. ;)