Custom GtkHeaderBar

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Custom GtkHeaderBar

Takao Fujiwara
I'd like to create a custom GtkHeaderBar in GTK 3.22.

If I use GtkBox as the header, it can draw the background color.
If I use a class inherited from GtkBox, it draws the transparent color.

Seems GtkBox uses rgba from ".titlebar:not(headerbar)" of gtk-contained.css:1736 but the inherited class uses "window.csd > .titlebar:not(headerbar)"  
of gtk-contained.css:2041 from Inspector.

How can I set the non-transparent color in the inherited class?
The following is the test code.

public class CustomHeader : Gtk.Box {
     public CustomHeader(Gtk.Orientation orientation,
                         int             spacing) {
         GLib.Object(
             orientation : orientation,
             spacing : spacing
         );
     }
}

public class TestWindow : Gtk.Window {
     public TestWindow() {
         GLib.Object(
             type : Gtk.WindowType.TOPLEVEL
         );

#if USE_HBOX
         var header = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 0);
#else
         var header = new CustomHeader(Gtk.Orientation.HORIZONTAL, 0);
#endif
         header.set_css_name("headerbar");
         var vvbox = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
         header.pack_start(vvbox, true, true, 0);
         var label = new Gtk.Label("Title");
         label.get_style_context().add_class("title");
         vvbox.pack_start(label, true, false, 0);
         var sub_label = new Gtk.Label("Subtitle");
         sub_label.get_style_context().add_class("subtitle");
         vvbox.pack_start(sub_label, true, false, 0);
         set_titlebar(header);
         var vbox = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
         add(vbox);
         var llabel = new Gtk.Label("test");
         vbox.pack_start(llabel, true, true, 0);
     }

     public static int main (string[] args) {
         Gtk.init (ref args);

         var window = new TestWindow();
         window.show_all();

         Gtk.main();
         return 0;
     }
}
_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
I could resolve this issue to call this.get_style_context().remove_class("csd") after set_titlebar(header) is called.
But not sure why I have to remove "csd" class while it's a custom header.

Fujiwara


On 04/11/17 21:33, Takao Fujiwara-san wrote:

> I'd like to create a custom GtkHeaderBar in GTK 3.22.
>
> If I use GtkBox as the header, it can draw the background color.
> If I use a class inherited from GtkBox, it draws the transparent color.
>
> Seems GtkBox uses rgba from ".titlebar:not(headerbar)" of gtk-contained.css:1736 but the inherited class uses "window.csd > .titlebar:not(headerbar)"
> of gtk-contained.css:2041 from Inspector.
>
> How can I set the non-transparent color in the inherited class?
> The following is the test code.
>
> public class CustomHeader : Gtk.Box {
>     public CustomHeader(Gtk.Orientation orientation,
>                         int             spacing) {
>         GLib.Object(
>             orientation : orientation,
>             spacing : spacing
>         );
>     }
> }
>
> public class TestWindow : Gtk.Window {
>     public TestWindow() {
>         GLib.Object(
>             type : Gtk.WindowType.TOPLEVEL
>         );
>
> #if USE_HBOX
>         var header = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 0);
> #else
>         var header = new CustomHeader(Gtk.Orientation.HORIZONTAL, 0);
> #endif
>         header.set_css_name("headerbar");
>         var vvbox = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
>         header.pack_start(vvbox, true, true, 0);
>         var label = new Gtk.Label("Title");
>         label.get_style_context().add_class("title");
>         vvbox.pack_start(label, true, false, 0);
>         var sub_label = new Gtk.Label("Subtitle");
>         sub_label.get_style_context().add_class("subtitle");
>         vvbox.pack_start(sub_label, true, false, 0);
>         set_titlebar(header);
>         var vbox = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
>         add(vbox);
>         var llabel = new Gtk.Label("test");
>         vbox.pack_start(llabel, true, true, 0);
>     }
>
>     public static int main (string[] args) {
>         Gtk.init (ref args);
>
>         var window = new TestWindow();
>         window.show_all();
>
>         Gtk.main();
>         return 0;
>     }
> }
> _______________________________________________
> gtk-app-devel-list mailing list
> [hidden email]
> https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
>

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Gtk+ - Apps Dev mailing list

Hi Fujiwara,

The GtkBox is going to use the background window for it's color. The box just does the layout. If you create a header bar from a box you will have to draw on the background where your header bar is going to be. This can get a little tricky to get the measurements that you need. A simple case shouldn't be too difficult though. If you pass the box to the main window "draw" callback you can get something going. You can draw with cairo or get your CSS color. I don't have a C# setup to test with so I hope C will do.

By the way, I was just programming something similar looking at cairo meshes. Don't know if you like mesh drawing but there is a little program at the following that changes some background windows from the UI.

https://github.com/cecashon/OrderedSetVelociRaptor/blob/master/Misc/cairo_drawings/draw_mesh1.c

Eric

/*
   gcc -Wall box1.c -o box1 `pkg-config --cflags --libs gtk+-3.0`
   Tested with GTK3.18 on Ubuntu16.04
*/
#include<gtk/gtk.h>

static gboolean draw_box(GtkWidget *widget, cairo_t *cr, gpointer data);

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

    GtkWidget *window=gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Title Bar");
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_widget_set_app_paintable(window, TRUE);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *label1=gtk_label_new("Header");    
    GtkWidget *label2=gtk_label_new("Bar");    

    GtkWidget *box=gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
    gtk_container_set_border_width(GTK_CONTAINER(box), 10);
    gtk_widget_set_hexpand(box, TRUE);
    gtk_box_pack_start(GTK_BOX(box), label1, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(box), label2, TRUE, TRUE, 0);
    g_signal_connect(window, "draw", G_CALLBACK(draw_box), box);

    GtkWidget *label3=gtk_label_new("Main");
    gtk_widget_set_vexpand(label3, TRUE);
    gtk_widget_set_hexpand(label3, TRUE);    
    GtkWidget *label4=gtk_label_new("Window");
    gtk_widget_set_vexpand(label4, TRUE);
    gtk_widget_set_hexpand(label4, TRUE);    

    GtkWidget *grid=gtk_grid_new();
    gtk_grid_attach(GTK_GRID(grid), box, 0, 0, 1, 1);
    gtk_grid_attach(GTK_GRID(grid), label3, 0, 1, 1, 1);
    gtk_grid_attach(GTK_GRID(grid), label4, 0, 2, 1, 1);  

    gtk_container_add(GTK_CONTAINER(window), grid);

    gtk_widget_show_all(window);

    gtk_main();

    return 0;
  }  
static gboolean draw_box(GtkWidget *widget, cairo_t *cr, gpointer data)
  {
    //Paint the main window.
    cairo_set_source_rgb(cr, 0.0, 1.0, 0.0);
    cairo_paint(cr);
    //Get the dimensions to draw header bar.
    gint width=gtk_widget_get_allocated_width(GTK_WIDGET(widget));
    gint height=gtk_widget_get_allocated_height(GTK_WIDGET(data));
    cairo_set_source_rgb(cr, 1.0, 0.0, 1.0);
    //Add 20 to height for 2 time contain width.
    cairo_rectangle(cr, 0.0, 0.0, width, height+20);
    cairo_fill(cr);
    return FALSE;
  }

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
Thanks for the example.
But I'd pull the CSS color of GtkHeaderBar to follow the theme colors instead of the hardcoded draw_box().
As I attached in the previous mail, calling gtk_widget_class_set_css_name(class, "headerbar") can set the themed background-color but the behavior is
different between GtkBox and inherited GtkBox as my test program.

Fujiwara

On 04/14/17 06:44, [hidden email]-san wrote:

>
> Hi Fujiwara,
>
> The GtkBox is going to use the background window for it's color. The box just does the layout. If you create a header bar from a box you will have to
> draw on the background where your header bar is going to be. This can get a little tricky to get the measurements that you need. A simple case
> shouldn't be too difficult though. If you pass the box to the main window "draw" callback you can get something going. You can draw with cairo or get
> your CSS color. I don't have a C# setup to test with so I hope C will do.
>
> By the way, I was just programming something similar looking at cairo meshes. Don't know if you like mesh drawing but there is a little program at the
> following that changes some background windows from the UI.
>
> https://github.com/cecashon/OrderedSetVelociRaptor/blob/master/Misc/cairo_drawings/draw_mesh1.c
>
> Eric
>
> /*
>    gcc -Wall box1.c -o box1 `pkg-config --cflags --libs gtk+-3.0`
>    Tested with GTK3.18 on Ubuntu16.04
> */
> #include<gtk/gtk.h>
>
> static gboolean draw_box(GtkWidget *widget, cairo_t *cr, gpointer data);
>
> int main(int argc, char *argv[])
>   {
>     gtk_init (&argc, &argv);
>
>     GtkWidget *window=gtk_window_new (GTK_WINDOW_TOPLEVEL);
>     gtk_window_set_title(GTK_WINDOW(window), "Title Bar");
>     gtk_window_set_default_size(GTK_WINDOW(window), 200, 200);
>     gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
>     gtk_widget_set_app_paintable(window, TRUE);
>     g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
>
>     GtkWidget *label1=gtk_label_new("Header");
>     GtkWidget *label2=gtk_label_new("Bar");
>
>     GtkWidget *box=gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
>     gtk_container_set_border_width(GTK_CONTAINER(box), 10);
>     gtk_widget_set_hexpand(box, TRUE);
>     gtk_box_pack_start(GTK_BOX(box), label1, TRUE, TRUE, 0);
>     gtk_box_pack_start(GTK_BOX(box), label2, TRUE, TRUE, 0);
>     g_signal_connect(window, "draw", G_CALLBACK(draw_box), box);
>
>     GtkWidget *label3=gtk_label_new("Main");
>     gtk_widget_set_vexpand(label3, TRUE);
>     gtk_widget_set_hexpand(label3, TRUE);
>     GtkWidget *label4=gtk_label_new("Window");
>     gtk_widget_set_vexpand(label4, TRUE);
>     gtk_widget_set_hexpand(label4, TRUE);
>
>     GtkWidget *grid=gtk_grid_new();
>     gtk_grid_attach(GTK_GRID(grid), box, 0, 0, 1, 1);
>     gtk_grid_attach(GTK_GRID(grid), label3, 0, 1, 1, 1);
>     gtk_grid_attach(GTK_GRID(grid), label4, 0, 2, 1, 1);
>
>     gtk_container_add(GTK_CONTAINER(window), grid);
>
>     gtk_widget_show_all(window);
>
>     gtk_main();
>
>     return 0;
>   }
> static gboolean draw_box(GtkWidget *widget, cairo_t *cr, gpointer data)
>   {
>     //Paint the main window.
>     cairo_set_source_rgb(cr, 0.0, 1.0, 0.0);
>     cairo_paint(cr);
>     //Get the dimensions to draw header bar.
>     gint width=gtk_widget_get_allocated_width(GTK_WIDGET(widget));
>     gint height=gtk_widget_get_allocated_height(GTK_WIDGET(data));
>     cairo_set_source_rgb(cr, 1.0, 0.0, 1.0);
>     //Add 20 to height for 2 time contain width.
>     cairo_rectangle(cr, 0.0, 0.0, width, height+20);
>     cairo_fill(cr);
>     return FALSE;
>   }
>

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Gtk+ - Apps Dev mailing list

 

I suspect

set_titlebar(header);

is causing the problem. If you remove that, then you will have a box that you place in the main window. If it is a header bar box it will be below the titlebar. The box itself is just doing the layout so it uses the window behind it. You can draw on the window with a style context like

GtkStyleContext *context=gtk_widget_get_style_context(GTK_WIDGET(widget));
gtk_render_background(context, cr, 0, 0, width, height+20);

to get a specific widget color instead of setting the color with cairo.

A little limited here since I don't have a C# setup and am using GTK3.18 which doesn't have all the 3.22 functions. What OS are you using and how did you setup C# for programming with?

Eric
_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
On 04/15/17 04:36, [hidden email]-san wrote:
> A little limited here since I don't have a C# setup and am using GTK3.18 which doesn't have all the 3.22 functions. What OS are you using and how did
> you setup C# for programming with?

Sorry, ignored this question. Now I understood what you asked.
It was a Vala code but not C#.

Fujiwara

>
> Eric

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
On 04/16/17 00:05, Takao Fujiwara-san wrote:
> On 04/15/17 04:36, [hidden email]-san wrote:
>> A little limited here since I don't have a C# setup and am using GTK3.18 which doesn't have all the 3.22 functions. What OS are you using and how did
>> you setup C# for programming with?
>
> Sorry, ignored this question. Now I understood what you asked.
> It was a Vala code but not C#.

You can output C code by `valac --ccode foo.vala --pkg gtk+-3.0`
I wrote the vala code because I think it easily show the example of the inherited class.

>
> Fujiwara
>
>>
>> Eric
>
> _______________________________________________
> gtk-app-devel-list mailing list
> [hidden email]
> https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
>

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
In reply to this post by Gtk+ - Apps Dev mailing list
On 04/15/17 04:36, [hidden email]-san wrote:

>
> I suspect
>
> set_titlebar(header);
>
> is causing the problem. If you remove that, then you will have a box that you place in the main window. If it is a header bar box it will be below the
> titlebar. The box itself is just doing the layout so it uses the window behind it. You can draw on the window with a style context like
>
> GtkStyleContext *context=gtk_widget_get_style_context(GTK_WIDGET(widget));
> gtk_render_background(context, cr, 0, 0, width, height+20);

Probably I think it cannot get the theme color of GtkHeaderBar.

>
> to get a specific widget color instead of setting the color with cairo.
>
> A little limited here since I don't have a C# setup and am using GTK3.18 which doesn't have all the 3.22 functions. What OS are you using and how did
> you setup C# for programming with?
>
> Eric

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Gtk+ - Apps Dev mailing list

Well I made a mess of that. I haven't worked with Vala and thought that looked like C#. I have some time on the weekend so I will have to take a look at Vala and run your code so I understand it better.

I can get the theme color with gtk_widget_get_style_context() if I have a GtkHeaderBar. If I don't have a GtkHeaderBar widget I don't know how to get the theme color for the header bar. Something else I haven't figured out yet. If you get that figured out I would like to know myself.

Another option for a custom GtkHeaderBar is to use an event box and put the horizontal box in it. That way you have the event box window and can draw the background a little easier.

Eric



_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Gtk+ - Apps Dev mailing list
In reply to this post by Takao Fujiwara

I gave it another try and "header" gtk_style_context_add_class() is transparent. I can use "menu" and that returns a darker color that is used on the title bar.

It is C again. I did get foo.vala output to foo.c. Too much stuff.

Eric

/*
   gcc -Wall box1.c -o box1 `pkg-config --cflags --libs gtk+-3.0`
   Tested with GTK3.18 on Ubuntu16.04
*/
#include<gtk/gtk.h>

static gboolean draw_main_window(GtkWidget *widget, cairo_t *cr, gpointer data);
static gboolean draw_event_box(GtkWidget *widget, cairo_t *cr, gpointer data);
static void close_program(GtkWidget *widget, gpointer user_data);

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

    GtkWidget *window=gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Title Bar");
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_widget_set_app_paintable(window, TRUE);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    g_signal_connect(window, "draw", G_CALLBACK(draw_main_window), NULL);

    GtkWidget *button=gtk_button_new_with_label("Close");
    g_signal_connect(button, "clicked", G_CALLBACK(close_program), NULL);

    GtkWidget *label1=gtk_label_new("Header");
    gtk_label_set_markup(GTK_LABEL(label1), "<span foreground=\"white\">Header</span>");    
    GtkWidget *label2=gtk_label_new("Bar");
    gtk_label_set_markup(GTK_LABEL(label2), "<span foreground=\"white\">Bar</span>");  

    GtkWidget *box=gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
    gtk_container_set_border_width(GTK_CONTAINER(box), 10);
    gtk_widget_set_hexpand(box, TRUE);
    gtk_box_pack_start(GTK_BOX(box), button, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(box), label1, TRUE, TRUE, 0);
    gtk_box_pack_start(GTK_BOX(box), label2, TRUE, TRUE, 0);
   
    GtkWidget *event=gtk_event_box_new();
    GtkStyleContext *context=gtk_widget_get_style_context(event);
    //Use the menu background.
    gtk_style_context_add_class(context, "menu");
    gtk_container_add(GTK_CONTAINER(event), box);
    g_signal_connect(event, "draw", G_CALLBACK(draw_event_box), NULL);
    gtk_window_set_titlebar(GTK_WINDOW(window), event);

    GtkWidget *label3=gtk_label_new("Main");
    gtk_widget_set_vexpand(label3, TRUE);
    gtk_widget_set_hexpand(label3, TRUE);    
    GtkWidget *label4=gtk_label_new("Window");
    gtk_widget_set_vexpand(label4, TRUE);
    gtk_widget_set_hexpand(label4, TRUE);    

    GtkWidget *grid=gtk_grid_new();
    gtk_grid_attach(GTK_GRID(grid), label3, 0, 0, 1, 1);
    gtk_grid_attach(GTK_GRID(grid), label4, 0, 1, 1, 1);  

    gtk_container_add(GTK_CONTAINER(window), grid);

    gtk_widget_show_all(window);

    gtk_main();

    return 0;
  }  
static gboolean draw_main_window(GtkWidget *widget, cairo_t *cr, gpointer data)
  {
    //Paint the main window.
    cairo_set_source_rgb(cr, 0.0, 1.0, 0.0);
    cairo_paint(cr);
    return FALSE;
  }
static gboolean draw_event_box(GtkWidget *widget, cairo_t *cr, gpointer data)
  {
    //Paint the event box header bar.
    gint width=gtk_widget_get_allocated_width(widget);
    gint height=gtk_widget_get_allocated_height(widget);
   
    GtkStyleContext *context=gtk_widget_get_style_context(widget);
    gtk_render_background(context, cr, 0, 0, width, height);

    return FALSE;
  }
static void close_program(GtkWidget *widget, gpointer user_data)
  {
    gtk_main_quit();
  }




_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
I think your example still draws the green color of the hbox but not the theme color of GtkHeaderBar.
I also think the menu and headerbar's colors are different.

Fujiwara

On 04/16/17 04:25, [hidden email]-san wrote:

>
> I gave it another try and "header" gtk_style_context_add_class() is transparent. I can use "menu" and that returns a darker color that is used on the
> title bar.
>
> It is C again. I did get foo.vala output to foo.c. Too much stuff.
>
> Eric
>
> /*
>    gcc -Wall box1.c -o box1 `pkg-config --cflags --libs gtk+-3.0`
>    Tested with GTK3.18 on Ubuntu16.04
> */
> #include<gtk/gtk.h>
>
> static gboolean draw_main_window(GtkWidget *widget, cairo_t *cr, gpointer data);
> static gboolean draw_event_box(GtkWidget *widget, cairo_t *cr, gpointer data);
> static void close_program(GtkWidget *widget, gpointer user_data);
>
> int main(int argc, char *argv[])
>   {
>     gtk_init (&argc, &argv);
>
>     GtkWidget *window=gtk_window_new (GTK_WINDOW_TOPLEVEL);
>     gtk_window_set_title(GTK_WINDOW(window), "Title Bar");
>     gtk_window_set_default_size(GTK_WINDOW(window), 200, 200);
>     gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
>     gtk_widget_set_app_paintable(window, TRUE);
>     g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
>     g_signal_connect(window, "draw", G_CALLBACK(draw_main_window), NULL);
>
>     GtkWidget *button=gtk_button_new_with_label("Close");
>     g_signal_connect(button, "clicked", G_CALLBACK(close_program), NULL);
>
>     GtkWidget *label1=gtk_label_new("Header");
>     gtk_label_set_markup(GTK_LABEL(label1), "<span foreground=\"white\">Header</span>");
>     GtkWidget *label2=gtk_label_new("Bar");
>     gtk_label_set_markup(GTK_LABEL(label2), "<span foreground=\"white\">Bar</span>");
>
>     GtkWidget *box=gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
>     gtk_container_set_border_width(GTK_CONTAINER(box), 10);
>     gtk_widget_set_hexpand(box, TRUE);
>     gtk_box_pack_start(GTK_BOX(box), button, TRUE, TRUE, 0);
>     gtk_box_pack_start(GTK_BOX(box), label1, TRUE, TRUE, 0);
>     gtk_box_pack_start(GTK_BOX(box), label2, TRUE, TRUE, 0);
>
>     GtkWidget *event=gtk_event_box_new();
>     GtkStyleContext *context=gtk_widget_get_style_context(event);
>     //Use the menu background.
>     gtk_style_context_add_class(context, "menu");
>     gtk_container_add(GTK_CONTAINER(event), box);
>     g_signal_connect(event, "draw", G_CALLBACK(draw_event_box), NULL);
>     gtk_window_set_titlebar(GTK_WINDOW(window), event);
>
>     GtkWidget *label3=gtk_label_new("Main");
>     gtk_widget_set_vexpand(label3, TRUE);
>     gtk_widget_set_hexpand(label3, TRUE);
>     GtkWidget *label4=gtk_label_new("Window");
>     gtk_widget_set_vexpand(label4, TRUE);
>     gtk_widget_set_hexpand(label4, TRUE);
>
>     GtkWidget *grid=gtk_grid_new();
>     gtk_grid_attach(GTK_GRID(grid), label3, 0, 0, 1, 1);
>     gtk_grid_attach(GTK_GRID(grid), label4, 0, 1, 1, 1);
>
>     gtk_container_add(GTK_CONTAINER(window), grid);
>
>     gtk_widget_show_all(window);
>
>     gtk_main();
>
>     return 0;
>   }
> static gboolean draw_main_window(GtkWidget *widget, cairo_t *cr, gpointer data)
>   {
>     //Paint the main window.
>     cairo_set_source_rgb(cr, 0.0, 1.0, 0.0);
>     cairo_paint(cr);
>     return FALSE;
>   }
> static gboolean draw_event_box(GtkWidget *widget, cairo_t *cr, gpointer data)
>   {
>     //Paint the event box header bar.
>     gint width=gtk_widget_get_allocated_width(widget);
>     gint height=gtk_widget_get_allocated_height(widget);
>
>     GtkStyleContext *context=gtk_widget_get_style_context(widget);
>     gtk_render_background(context, cr, 0, 0, width, height);
>
>     return FALSE;
>   }
> static void close_program(GtkWidget *widget, gpointer user_data)
>   {
>     gtk_main_quit();
>   }
>
>

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Gtk+ - Apps Dev mailing list

 If I use

gtk_style_context_add_class(context, "header");

The background drawn to the event box window is transparent on my computer. I just used "menu" to test a different color from the theme but there are many that you can test. The style classes are at the bottom of the documentation page.

https://developer.gnome.org/gtk3/stable/GtkStyleContext.html

I painted the main window green so that I could see if the event box window gets drawn to and also to distinguish widgets that don't have windows like the GtkLabel, GtkBox and GtkGrid.

Another option is to have a CSS file for the header widget and use that although then you get away from using the users theme. I have tried using the deprecated function

gtk_style_context_get_background_color()

to peak at if there is a constant background color set and what it might be but that function isn't going to work for a gradient or image so it is only a partial solution for checking the style class background.

Still trying to figure out these things myself.

Eric

 


_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Custom GtkHeaderBar

Takao Fujiwara
On 04/18/17 02:52, [hidden email]-san wrote:
> If I use
>
> gtk_style_context_add_class(context, "header");

As I replied, I fixed that problem to call this.get_style_context().remove_class("csd") after set_titlebar(header) is called.

Fujiwara

>
> The background drawn to the event box window is transparent on my computer. I just used "menu" to test a different color from the theme but there are
> many that you can test. The style classes are at the bottom of the documentation page.
>
> https://developer.gnome.org/gtk3/stable/GtkStyleContext.html
>
> I painted the main window green so that I could see if the event box window gets drawn to and also to distinguish widgets that don't have windows like
> the GtkLabel, GtkBox and GtkGrid.
>
> Another option is to have a CSS file for the header widget and use that although then you get away from using the users theme. I have tried using the
> deprecated function
>
> gtk_style_context_get_background_color()
>
> to peak at if there is a constant background color set and what it might be but that function isn't going to work for a gradient or image so it is
> only a partial solution for checking the style class background.
>
> Still trying to figure out these things myself.
>
> Eric
>
>

_______________________________________________
gtk-app-devel-list mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
Loading...