CODEWITHSUNDEEP
cgtkcairo
merajsahebdar
merajsahebdar

Reputation: 58

Force child widgets to respect parent widget drawing area (like rounded corners)

I'm looking for something like what overflow: hidden does in HTML & CSS in GTK.

Example

As you can see in the image below, We have a box that has 2 children, The parent widget got rounded corners by border-radius: 20px, but since We didn't provide border-radius to the children, They overflowed from the parent drawing area.

Example Image

I know that I can easily provide border-radius to the children, but it works just in this example :| Imagine we have 100000 hierarchy of child widgets, So I'm looking for a way to force children respect their parent drawing area.

I don't think this become possible with CSS, So we should make a solution using GTK and Cairo to do this.

Thanking you in anticipation.

Code that produced the image

#include <gtk/gtk.h>

static void
app_activate(GtkApplication *app)
{
    GtkWidget       *window;
    GtkWidget       *parentbox;
    GtkWidget   *childbox1;
    GtkWidget   *childbox2;

    window = gtk_application_window_new(app);
    gtk_window_set_default_size(GTK_WINDOW(window), 540, 360);

    parentbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 16);
    childbox1 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 16);
    childbox2 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 16);

    GtkStyleContext *parentcontext;
    parentcontext = gtk_widget_get_style_context(GTK_WIDGET(parentbox));
    gtk_style_context_add_class(GTK_STYLE_CONTEXT(parentcontext), "parentbox");

    GtkStyleContext *child1context;
    child1context = gtk_widget_get_style_context(GTK_WIDGET(childbox1));
    gtk_style_context_add_class(GTK_STYLE_CONTEXT(child1context), "childbox");

    GtkStyleContext *child2context;
    child2context = gtk_widget_get_style_context(GTK_WIDGET(childbox2));
    gtk_style_context_add_class(GTK_STYLE_CONTEXT(child2context), "childbox");

    gtk_box_pack_start(GTK_BOX(parentbox), childbox1, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(parentbox), childbox2, TRUE, TRUE, 0);
    gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(parentbox));

    gtk_widget_show_all(window);
}

int
main(int argc, char *argv[])
{
    GtkApplication *app;
    int status;

    app = gtk_application_new(
    "com.myapp",
    G_APPLICATION_FLAGS_NONE
    );
    g_signal_connect(app, "activate", G_CALLBACK(app_activate), NULL);
    status = g_application_run(G_APPLICATION(app), argc, argv);
    g_object_unref(app);

    return status;
}

Styles

.parentbox {
    margin: 40px;
    background-color: rgba(120, 80, 40, 0.5);
    border-radius: 20px;
}

.childbox {
    background-color: rgba(40, 80, 120, 0.5);
}

Upvotes: 0

Views: 299

Answers (1)

user3629249
user3629249

Reputation: 16540

The idea for your desired action, is to layer the drawing. The parent on top and the children behind.

Graphic images (of multiple objects) are generated in layers.

Each layer that is 'in front of' another layer will coverup items in layers that are further back.

Just like, if your car is parked in such a manner that your house is beside the car and you look at the car from the side that is not beside the house, then the car covers up some of the house.

you)) car)) house))

Then you will be able to see the whole side of the car, but not all of the house.

I have never used GTK, so I cannot tell you exactly how to write your code, I can only tell you the basic premise of how the objects need to be organized in the overall image

Upvotes: 0

Related Questions