440. How to set up a round GtkWindow?

Problem

This is in response to Shin's post titled 'Styled Window'.

He would like to have a round GtkWindow as shown below:

How to set up a round GtkWindow?


Solution

  • We use exactly the same technique as outlined in How to create a round button - Part 1?. Instead of GtkEventBox, we use GtkWindow.
  • Note that php-gtk simply masked out the alpha channel (i.e. the transparent area) in your image. If there are any text or images in those areas, they will be masked out too.
  • To hide the title bar, use GtkWindow::set_decorated(false). If you don't, your application window will look like this:

    • Sometimes this is desirable, though, if the user wants to be able to move the application window easily with the mouse.


Sample Code

Note: The following image file is required by the sample code below. Please save a copy of the image file and put it in the same directory where you store the sample code.

 round200a.png

1   
 2   
 3   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
<?php
$window = new GtkWindow();
$window->set_size_request(200, 200);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

$vbox->pack_start(new GtkLabel('this is line abcdefghijk.1'), 0);
$vbox->pack_start(new GtkLabel('this is line abcdefghijk.2'), 0);
$vbox->pack_start(new GtkLabel('this is line abcdefghijk.3'), 0);
$vbox->pack_start(new GtkLabel('this is line abcdefghijk.4'), 0);
$vbox->pack_start(new GtkLabel('this is line abcdefghijk.5'), 0);
$vbox->pack_start(new GtkLabel('this is line abcdefghijk.6'), 0);

$pixbuf = GdkPixbuf::new_from_file("round200a.png"); // note 1
list($pixmap,$mask) = $pixbuf->render_pixmap_and_mask(255); // note 2
$window->shape_combine_mask($mask, 0, 0); // note 3

$window->set_decorated(false); // note 4
$window->modify_bg(Gtk::STATE_NORMAL, GdkColor::parse("#ffff00"));
$window->show_all();
Gtk::main();
?>

Output

As shown above.
 

Explanation

  1. Load the image.
  2. Get the mask.
  3. Mask out the transparent areas.
  4. Hide the title bar.

Related Links

Add comment

Security code
Refresh