Display Image in a Window using Gtkmm-3.0 and C++

Display Image in window using GTKmm-3.0 and C++ language
In this post I'am going to show you, how you can display an image in a Gtk window and at the end of this post, you will be able to make a little gallery by yourself.
So let's get started:
First you need to create a project and a window class in it, just set the title and the size as shown below.
 

#ifndef MAINWINDOW_H  
#define MAINWINDOW_H  
   
#include <gtkmm.h>  
#include "drawimage.h"  
   
   
 class MainWindow : public Gtk::Window  
 {  
   public:  
     MainWindow();  
     virtual ~MainWindow();  
   protected:  
     Gtk::Box m_Vbox;  
 };  
   
 #endif // MAINWINDOW_H  

...

#include "mainwindow.h"  
   
MainWindow::MainWindow() : 
m_Vbox(Gtk::ORIENTATION_VERTICAL)
{  
   set_title("Display Image");  
   set_size_request(400,400);  
 }  
   
 MainWindow::~MainWindow()  
 {  
   //dtor   
 }  
   

Now we have a blank window with title set to "Display Image". To display an image we need a drawing area, let's create a class and name it "DrawImage" and inherit the Gtk::DrawingArea class, and add in, an instance of Glib::RefPtr<Gdk::Pixbuf> as your image.At the end override the function on_draw from DrawingArea class. Your code should look something  like this:

#ifndef DRAWIMAGE_H  
#define DRAWIMAGE_H  
   
#include <gtkmm/drawingarea.h>  
#include <gdkmm/pixbuf.h>  
   
   
 class DrawImage : public Gtk::DrawingArea  
 {  
   public:  
     DrawImage(const std::string& filename);  
     virtual ~DrawImage();  
   protected:  
     Glib::RefPtr<Gdk::Pixbuf> myImage;  
     bool on_draw(const Cairo::RefPtr<Cairo::Context>& cr) override;  
 };  
   
 #endif // DRAWIMAGE_H  
   

Here follows the class implementation:
 

#include "drawimage.h"  
 #include <cairomm/context.h>  
 #include <giomm/resource.h>  
 #include <gdkmm/general.h>  
 #include <glibmm/fileutils.h>  
 #include <iostream>  
   
   
 DrawImage::DrawImage(const std::string& filename)  
 {  
   try{  
     myImage = Gdk::Pixbuf::create_from_file(filename);  
   }catch(...)  
   {  
     std::cerr<<"An error occured while loading the image file."<<std::endl;  
   }  
   
   if(myImage)  
     set_size_request(myImage->get_width(), myImage->get_height());  
   set_halign(Gtk::ALIGN_CENTER);  
   set_valign(Gtk::ALIGN_CENTER);  
 }  
   
 DrawImage::~DrawImage()  
 {  
   //dtor  
 }  
   
 bool DrawImage::on_draw(const Cairo::RefPtr<Cairo::Context>& cr)  
 {  
   if(!myImage)  
     return false;  
   
   Gtk::Allocation allocation = get_allocation();  
   const int height = allocation.get_height();  
   const int width = allocation.get_width();  
   
   Gdk::Cairo::set_source_pixbuf(cr, myImage, width-myImage->get_width(), height-myImage->get_height());  
   
   cr->paint();  
   return true;  
 }  
   

Now we are almost done here, the only thing remaining is to instantiate our DrawImage class in the window. Go to MainWindow class declaration and add under protected.

 DrawImage myImage;  

Write this pieces of code in the MainWindow implementation in constructor :
 

MainWindow::MainWindow():
m_Vbox(Gtk::ORIENTATION_VERTICAL), myImage("Bimage.png")
{
    set_title("Display Image");
    set_size_request(400,400);
   
    add(m_Vbox);  
   
    m_Vbox.pack_start(myImage, Gtk::PACK_SHRINK);  
   
    show_all_children();
}    

 You can download the source code at https://github.com/Bakary-baktech/Gtkmm-3.0-tuto.

Next: Image Gallery