First screenshot! Bink blink!

27 05 2007

So, here it is, the First screenshot of my Ribbon for SoC 2007.

It is using Cairo for all drawing, Pango for all text rendering running on my lovely Arch Linux. I think that the drawing of tabs is quite nice, but the rendering of the body is still not completed. You can see the Ribbon widget (inherits Gtk.Container) and RibbonGroup (inherits Gtk.Bin). The button is the 1st group is just a Gtk.Button. The height of a group is 90 pixels by default. It width is automaticaly computed to fit the content. If it is empty, it fits the label.

I have one big problem for now: how the hell do I change the color of the text in a Gtk.Label ??? I have tried ModifyFg and ModifyText without success. Any idea ?

Here is the code of the sample:

			VBox master = new VBox ();

			Title = "Ribbons Sample";
			AppPaintable = true;

			button0 = new Button ();
			button0.Label = "Hello World";

			group0 = new RibbonGroup ();
			group0.Label = "Summer of Code";
			group0.Child = button0;

			group1 = new RibbonGroup ();
			group1.Label = "I will be back";

			HBox page0 = new HBox (false, 2);
			page0.PackStart (group0, false, false, 0);
			page0.PackStart (group1, false, false, 0);

			HBox page1 = new HBox (false, 2);

			HBox page2 = new HBox (false, 2);

			Label pageLabel0 = new Label ("Page 1");
			Label pageLabel1 = new Label ("Page 2");
			Label pageLabel2 = new Label ("Page 3");

			ribbon = new Ribbon ();
			ribbon.AppendPage (page0, pageLabel0);
			ribbon.AppendPage (page1, pageLabel1);
			ribbon.AppendPage (page2, pageLabel2);

			TextView txt = new TextView ();

			master.PackStart (ribbon, false, false, 0);
			master.PackStart (txt, true, true, 0);

			Add (master);

Laurent Debacker.




11 responses

27 05 2007

Nice to see this first impressions of Ribbon.

Totally off topic: What kind of Apple Finder-like panel-replacement are you using?

27 05 2007

Personally I use the Markup property of a Gtk.Label with the Pango markup that you can see here :

So for example if you want to put the label red you do :
myLabel.Markup = “My Beautiful Red Text”;

27 05 2007

You can change the font, size and color of a Gtk.Label with set_markup, instead of set_text:


If you need more information about it…–set-markup

27 05 2007
Peter Petrov

I remember that in Java you can achieve this by saying :

button0 = new Button ();
button0.Label = “Hello World”;

I hope that helps you.

27 05 2007
Itai Bar-Haim

The easiest way to change the color of a label is to use the pango markup:
some text

and if ModifyText didn’t work (seems strange, but I didn’t do it for a long time…) try ModifyBase.

Hope it helps.


27 05 2007
Aaron Bockover

Nice work! This is looking good.

ModifyFg should work fine for a label. The main thing to worry about is when to set the color and to what value. You should really never set the color to some hard coded value, rather you should pull it from the theme/style. For instance, if you want the label’s color to be derived from a color defined by a window’s style:

Window win = new Window();
Label label = new Label(“Hello”);
win.StyleSet += delegate {
label.ModifyFg(StateType.Normal, win.Style.Base(StateType.Active));

27 05 2007
James Willcox

I believe you can change/access the label’s color through the Attributes property, which refers to the pango attribute list.

27 05 2007

Thank you very much for your tips, I will try them out. It is true that it is ‘dangerous’/’bad design’ to hard code some color in an application. But in the case of my implementation, I’m implementing a theming system. The theme controls the color of labels, and the color behing the labels, therefore there is no problem. Widgets of Gtk+ are drawn by the theme engine provided by the user, however since Ribbons is not an official part of Gtk+ I build my own theming system.

To reply to karl, I’m using Avant Window Navigator. If you use Arch Linux like me, there is a package in AUR.

27 05 2007
Damien Jorgensen

Very stunning

30 05 2007

VERY NICE!!!! keep up the good work!

20 08 2008
John Williams

Pretty nice site, wants to see much more on it! 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: