How do I really make a GTK+ 3 GtkLayout transparent/draw theme background?

Question

If I create a normal GtkWindow with nothing inside or a GtkWindow with a GtkDrawingArea inside (or that inside a GtkScrolledWindow), I get a window with the theme's background, as in this picture.

But if I use a GtkLayout, I get a window with a solid color background, as in this picture.

The only resource anyone (myself included) could find so far was this other Stack Overflow question, but when I do what it says to do, I get a fully black background, like in this picture, even if I get a cairo context for the GtkLayout's bin window.

So how exactly do I get the GtkLayout to be transparent, or if that's not an option, to use the theme's background?

Though I am running with GTK+ 3.10, I need to target GTK+ 3.4, so gtk_widget_set_opacity() won't work. The theme shown in my screenshots is the gtk-oxygen theme; I am using KDE.

Sample program below. It has options to cover all the cases I described above. I also tried variations of the various cairo calls in draw() (commenting some out, adding another alpha color selection after setting CLEAR, not setting a clip rect, etc.); that didn't work either.

Thanks!

/* pietro gagliardi - 7-8 april 2014 */
#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#define GDK_VERSION_MIN_REQUIRED GDK_VERSION_3_4
#define GDK_VERSION_MAX_ALLOWED GDK_VERSION_3_4
#include <gtk/gtk.h>

gboolean windowonly = FALSE;
gboolean drawingarea = FALSE;
gboolean viewport = FALSE;
gboolean drawsig = FALSE;
gboolean binwin = FALSE;

void parseargs(int argc, char *argv[])
{
    if (argc != 2 && argc != 3)
        goto usage;

#define extra(str) (argc == 3 && strcmp(argv[2], str) == 0)
#define noextra(cond) if (!(cond) && argc == 3) goto usage;
    if (strcmp(argv[1], "windowOnly") == 0) {
        noextra(FALSE);
        windowonly = TRUE;
        return;
    } else if (strcmp(argv[1], "drawingArea") == 0) {
        drawingarea = TRUE;
        viewport = extra("viewport");
        noextra(viewport);
        return;
    } else if (strcmp(argv[1], "layout") == 0) {
        binwin = extra("drawbin");
        drawsig = binwin || extra("draw");
        noextra(drawsig);
        return;
    }

usage:
    fprintf(stderr, "usage:\n");
    fprintf(stderr, "\t%s windowOnly\n", argv[0]);
    fprintf(stderr, "\t%s drawingArea [viewport]\n", argv[0]);
    fprintf(stderr, "\t%s layout [draw|drawbin]\n", argv[0]);
    exit(1);
}

gboolean draw(GtkWidget *widget, cairo_t *cr, gpointer data)
{
    double x, y, w, h;

    if (binwin)
        cr = gdk_cairo_create(gtk_layout_get_bin_window((GtkLayout *) widget));

    cairo_clip_extents(cr, &x, &y, &w, &h);
    cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
    cairo_rectangle(cr, x, y, w, h);
    cairo_fill(cr);
    cairo_set_operator(cr, CAIRO_OPERATOR_OVER);
    cairo_set_source_rgba(cr, 0, 0, 0, 0);
    cairo_rectangle(cr, x, y, w, h);
    cairo_fill(cr);

    if (binwin)
        cairo_destroy(cr);

    return FALSE;
}

int main(int argc, char *argv[])
{
    GtkWidget *w;
    GtkWidget *q;

    parseargs(argc, argv);
    gtk_init(NULL, NULL);

    w = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    g_signal_connect(w, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    if (!windowonly) {
        if (drawingarea) {
            q = gtk_drawing_area_new();
            if (viewport) {
                GtkWidget *sw;

                sw = gtk_scrolled_window_new(NULL, NULL);
                gtk_scrolled_window_add_with_viewport(GTK_SCROLLED_WINDOW(sw), q);
                q = sw;
            }
        } else {
            q = gtk_layout_new(NULL, NULL);
            if (drawsig)
                g_signal_connect(q, "draw", G_CALLBACK(draw), NULL);
        }
        gtk_container_add(GTK_CONTAINER(w), q);
    }

    gtk_widget_show_all(w);

    gtk_main();
    return 0;
}

Answer 1

Add a GtkCssProvider to your window with one or both of

GtkLayout {
  background-color: transparent;
}

GtkViewport {
  background-color: transparent;
}

loaded in it. You may also be able to do this with gtk_widget_override_background_color().

Answer 2

They key is to set a proper RGBA visual for the window

w = //some GtkWidget, I used the GtkWindow to test
gtk_widget_set_app_paintable (w, TRUE); // important or you will get solid color
GdkScreen *screen = gtk_widget_get_screen (w);
GdkVisual *visual = gdk_screen_get_rgba_visual (screen);
gtk_widget_set_visual(w, visual);
gtk_widget_show_all(w);

Note: Also do

g_signal_connect(G_OBJECT(w), "screen-changed", G_CALLBACK(screen_changed_contaniing_above_code), NULL);

or weird things might happen on certain multi screen setups (could not reproduce with my local), but well.. just do it, you can't know how Xinerama or other X extensions react when dragging the window between screens...

See this SO question which has a complete compileable example.

---

Also I'd recommend to draw only once using CAIRO_OPERATOR_SOURCE.

---

#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#define GDK_VERSION_MIN_REQUIRED GDK_VERSION_3_4
#define GDK_VERSION_MAX_ALLOWED GDK_VERSION_3_4
#include <gtk/gtk.h>


gboolean draw(GtkWidget *widget, cairo_t *cr, gpointer data)
{
    double x, y, w, h;
    cairo_clip_extents(cr, &x, &y, &w, &h);
    cairo_set_source_rgba (cr, 1., 0., 0., 0.25); //translucent red
    cairo_set_operator(cr, CAIRO_OPERATOR_SOURCE);
    cairo_rectangle(cr, x, y, w, h);
    cairo_fill(cr);

    return FALSE;
}


void fix_visual(GtkWidget *w)
{
    GdkScreen *screen = gtk_widget_get_screen (w);
    GdkVisual *visual = gdk_screen_get_rgba_visual (screen);
    gtk_widget_set_visual(w, visual);
    //FIXME cleanup maybe
}


void screen_changed (GtkWidget *widget, GdkScreen *screen, gpointer user_data)
{
    fix_visual (widget);
}

int main(int argc, char *argv[])
{



    GtkWidget *w;
    GtkWidget *q;

    gtk_init(&argc, &argv);

    w = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    g_signal_connect(w, "destroy", G_CALLBACK(gtk_main_quit), NULL);


    q = gtk_layout_new(NULL, NULL);

    g_signal_connect(w, "screen-changed", G_CALLBACK(screen_changed), NULL);
    g_signal_connect(q, "draw", G_CALLBACK(draw), NULL);

    gtk_container_add(GTK_CONTAINER(w), q);

    gtk_widget_set_app_paintable (w, TRUE);

    fix_visual (w);

    gtk_widget_show_all(w);


    gtk_main();
    return 0;
}