= Gtk Box Packing = Two useful widgets for packing are `HBox`, for packing widgets across the screen, and `VBox`, for packing widgets down the screen. Widgets can be added to these boxes using `packStart`. Parameters to the box constructor and `packStart` control how the packed widgets are laid out, and how they change when the containing window changes size. * `HBox/VBox` take two parameters: 1. boolean parameter, `homogeneous`, to indicate if widgets should all be the same size 2. integer parameter, `spacing`, to give the amount of space between widgets * `packStart` takes four parameters: 1. the widget to pack 2. boolean parameter, `expand`, to indicate if widgets should expand if there is more space available 3. boolean parameter, `fill`, to indicate if widgets should fill the space available to them (only applies if `expand` is true) 4. integer parameter, `padding`, to give the amount of space between widgets The following program is used for illustration: parameters are changed in the `addWidgets` method to show different packing behaviours. {{{ #!cobra # @args -pkg:gtk-sharp-2.0 # remove initial '#' use Gtk class DemoWindow inherits Window cue init base.init("Demo 1") .setDefaultSize(200, 100) listen .deleteEvent, ref .onDeleteEvent .addWidgets def addWidgets box = HBox(false, 0) # create a box to hold widgets button1 = Button("Gtk") button2 = Button("is a graphical user interface toolkit") box.packStart(button1, false, false, 0) # add button1 to box box.packStart(button2, false, false, 0) # add button2 to box .add(box) # add the box to our window def onDeleteEvent(obj, args as DeleteEventArgs) Application.quit class MainProgram def main Application.init window = DemoWindow() window.showAll Application.run }}} == Example 1 == With the following parameters, the widgets in the box can be different sizes (HBox has homogeneous set to false), and neither button will expand to fill their surrounding space when the window is resized. {{{ #!cobra box = HBox(false, 0) box.packStart(button1, false, false, 0) box.packStart(button2, false, false, 0) }}} [[Image(packing1.png)]] (Window on the left is before resizing, on the right after resizing.) == Example 2 == By changing the box definition so homogeneous is true, the two buttons will be allocated the same amount of space. {{{ #!cobra box = HBox(true, 0) box.packStart(button1, false, false, 0) box.packStart(button2, false, false, 0) }}} [[Image(packing2.png)]] (Window on the top is before resizing, on the bottom after resizing.) == Example 3 == By packing the first button with a true value for the expand property, the button's area will grow to fill the available space in the window. However, the button itself does not increase in size. {{{ #!cobra box = HBox(false, 0) box.packStart(button1, true, false, 0) box.packStart(button2, false, false, 0) }}} [[Image(packing3.png)]] (Window on the left is before resizing, on the right after resizing.) == Example 4 == By packing the first button with a true value for the expand and fill properties, the button will grow to fill the available space in the window. {{{ #!cobra box = HBox(false, 0) box.packStart(button1, true, true, 0) box.packStart(button2, false, false, 0) }}} [[Image(packing4.png)]] (Window on the left is before resizing, on the right after resizing.) == Example 5 == Set the `spacing` parameter for the box to put some space in between the widgets. {{{ #!cobra box = HBox(true, 20) box.packStart(button1, true, true, 0) box.packStart(button2, true, true, 0) }}} [[Image(packing5.png)]] == Example 6 == Set the `padding` parameter in `packStart` to put space on either side of the widget. {{{ #!cobra box = HBox(true, 0) box.packStart(button1, true, true, 20) box.packStart(button2, true, true, 20) }}} [[Image(packing6.png)]] == And There's More ... == Complex layouts can be managed by nesting boxes, and adjusting the parameters illustrated above. * `packStart` packs widgets by starting from the left (for `HBox`) or top (for `VBox`) and working to the right (or down). * `packEnd` is also available, to start packing from the right or bottom of the container.