Default page

Edit File: ch30s02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GtkBox versus GtkGrid: sizing: GTK+ 3 Reference Manual</title>
<meta name="generator" content="DocBook XSL Stylesheets V1.79.1">
<link rel="home" href="index.html" title="GTK+ 3 Reference Manual">
<link rel="up" href="gtk-migrating-GtkGrid.html" title="Migrating from other containers to GtkGrid">
<link rel="prev" href="gtk-migrating-GtkGrid.html" title="Migrating from other containers to GtkGrid">
<link rel="next" href="ch30s03.html" title="GtkBox versus GtkGrid: spacing">
<meta name="generator" content="GTK-Doc V1.32 (XML mode)">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
<td width="100%" align="left" class="shortcuts"></td>
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
<td><a accesskey="u" href="gtk-migrating-GtkGrid.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
<td><a accesskey="p" href="gtk-migrating-GtkGrid.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="ch30s03.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
</tr></table>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="id-1.6.7.5"></a>GtkBox versus GtkGrid: sizing</h2></div></div></div>
<p>
      When adding a child to a GtkBox, there are two hard-to-remember
      parameters (child properties, more exactly) named expand and fill
      that determine how the child size behaves in the main direction
      of the box. If expand is set, the box allows the position occupied
      by the child to grow when extra space is available. If fill is
      also set, the extra space is allocated to the child widget itself.
      Otherwise it is left 'free'.
      There is no control about the 'minor' direction; children
      are always given the full size in the minor direction.
    </p>
<img src="box-expand.png"><p>
      GtkGrid does not have any custom child properties for controlling
      size allocation to children. Instead, it fully supports the newly
      introduced <a class="link" href="GtkWidget.html#GtkWidget--hexpand" title="The “hexpand” property"><span class="type">“hexpand”</span></a>, <a class="link" href="GtkWidget.html#GtkWidget--vexpand" title="The “vexpand” property"><span class="type">“vexpand”</span></a>, <a class="link" href="GtkWidget.html#GtkWidget--halign" title="The “halign” property"><span class="type">“halign”</span></a>
      and <a class="link" href="GtkWidget.html#GtkWidget--valign" title="The “valign” property"><span class="type">“valign”</span></a> properties.
    </p>
<p>
      The <a class="link" href="GtkWidget.html#GtkWidget--hexpand" title="The “hexpand” property"><span class="type">“hexpand”</span></a> and <a class="link" href="GtkWidget.html#GtkWidget--vexpand" title="The “vexpand” property"><span class="type">“vexpand”</span></a> properties operate
      in a similar way to the expand child properties of <a class="link" href="GtkBox.html" title="GtkBox"><span class="type">GtkBox</span></a>. As soon
      as a column contains a hexpanding child, GtkGrid allows the column
      to grow when extra space is available (similar for rows and vexpand).
      In contrast to GtkBox, all the extra space is always allocated
      to the child widget, there are no 'free' areas.
    </p>
<p>
      To replace the functionality of the fill child properties, you can
      set the <a class="link" href="GtkWidget.html#GtkWidget--halign" title="The “halign” property"><span class="type">“halign”</span></a> and <a class="link" href="GtkWidget.html#GtkWidget--valign" title="The “valign” property"><span class="type">“valign”</span></a> properties. An
      align value of <a class="link" href="GtkWidget.html#GTK-ALIGN-FILL:CAPS"><span class="type">GTK_ALIGN_FILL</span></a> has the same effect as setting fill
      to <a href="/usr/share/gtk-doc/html/glib/glib-Standard-Macros.html#TRUE:CAPS"><code class="literal">TRUE</code></a>, a value of <a class="link" href="GtkWidget.html#GTK-ALIGN-CENTER:CAPS"><span class="type">GTK_ALIGN_CENTER</span></a> has the same effect as setting
      fill to <a href="/usr/share/gtk-doc/html/glib/glib-Standard-Macros.html#FALSE:CAPS"><code class="literal">FALSE</code></a>. The image below shows the effect of various combinations
      of halign and valign.
    </p>
<img src="widget-hvalign.png"><div class="example">
<a name="id-1.6.7.5.8"></a><p class="title"><b>Example 54. Expansion and alignment</b></p>
<div class="example-contents">
<pre class="programlisting">
  box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);

gtk_box_pack_start (GTK_BOX (box), gtk_label_new ("One"), TRUE, FALSE, 0);
  gtk_box_pack_start (GTK_BOX (box), gtk_label_new ("Two"), TRUE, TRUE, 0);
      </pre>
<p>This can be done with <a class="link" href="GtkGrid.html" title="GtkGrid"><span class="type">GtkGrid</span></a> as follows:</p>
<pre class="programlisting">
  grid = gtk_grid_new ();

child1 = gtk_label_new ("One");
  gtk_widget_set_hexpand (child1, TRUE);
  gtk_widget_set_halign (child1, GTK_ALIGN_CENTER);
  gtk_grid_attach (GTK_GRID (grid), child1, 0, 0, 1, 1);
  child2 = gtk_label_new ("Two");
  gtk_widget_set_hexpand (child2, TRUE);
  gtk_widget_set_halign (child1, GTK_ALIGN_FILL);
  gtk_grid_attach_next_to (GTK_GRID (grid), child2, child1, GTK_POS_RIGHT, 1, 1);
      </pre>
</div>
</div>
<br class="example-break"><p>
      One difference between the new GtkWidget expand properties and
      the GtkBox child property of the same name is that widget expandability
      is 'inherited' from children. What this means is that a container
      will become itself expanding as soon as it has
      an expanding child. This is typically what you want, it lets
      you e.g. mark the content pane of your application window as
      expanding, and all the intermediate containers between the
      content pane and the toplevel window will automatically do
      the right thing. This automatism can be overridden at any
      point by setting the expand flags on a container explicitly.
    </p>
<p>
      Another difference between GtkBox and GtkGrid with respect to
      expandability is when there are no expanding children at all.
      In this case, GtkBox will forcibly expand all children whereas
      GtkGrid will not. In practice, the effect of this is typically
      that a grid will 'stick to the corner' when the toplevel
      containing it is grown, instead of spreading out its children
      over the entire area. The problem can be fixed by setting some
      or all of the children to expand.
    </p>
<p>
      When you set the <a class="link" href="GtkBox.html#GtkBox--homogeneous" title="The “homogeneous” property"><span class="type">“homogeneous”</span></a> property on a GtkBox,
      it reserves the same space for all its children. GtkGrid does
      this in a very similar way, with <a class="link" href="GtkGrid.html#GtkGrid--row-homogeneous" title="The “row-homogeneous” property"><span class="type">“row-homogeneous”</span></a> and
      <a class="link" href="GtkGrid.html#GtkGrid--column-homogeneous" title="The “column-homogeneous” property"><span class="type">“column-homogeneous”</span></a> properties which control whether
      all rows have the same height and whether all columns have
      the same width.
    </p>
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.32</div>
</body>
</html>