HowTo : GridBagSizer - mcorino/wxRuby3 GitHub Wiki

     About      FAQ      User Guide      Reference documentation

wxRuby GridBagSizer Tutorial

In this tutorial we will discuss the wxRuby GridBagSizer Layout Sizer.

The BoxSizer is one of the sizers in wxRuby designed to help with the layout management of widgets in the window. The GridBagSizer is a variant of the FlexGridSizer, from which it inherits. It has the added functionality of allowing widgets to be placed in specific "cells".

wxRuby GridBagSizer Example

In this example we’ll create a simple Keypad using the wxRuby GridBagSizer.

First, we create a BoxSizer to act as a wrapper around the GridBagSizer. The idea is to use the BoxSizer to create some padding between the widgets in the GridBagSizer and the edges of the window (try it both ways, with and without the wrapper).

wrapper = Wx::VBoxSizer.new

Next we create the GridBagSizer, passing in 4 and 3 in the parameters for four rows and three columns.

sizer = Wx::GridBagSizer.new(4, 3)

Here we add in a StaticText widget into the Sizer. The first parameter is the widget, followed by a position (row and column indices). We want to place this text in the center-top of the window, so we place it in the first row and the middle column. The third parameter is the flag. This flag is used to center-align the widget.

sizer.add(Wx::StaticText.new(@panel, label: 'A Keypad'), [0, 1], flag: Wx::ALIGN_CENTRE)

We then proceed to add in nine buttons to serve as keys. We also make use of the Wx::EXPAND flag so that they expand to fill all available space.

sizer.add(Wx::Button.new(@panel, label: "1"), [1, 0], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "2"), [1, 1], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "3"), [1, 2], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "4"), [2, 0], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "5"), [2, 1], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "6"), [2, 2], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "7"), [3, 0], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "8"), [3, 1], flag: Wx::EXPAND)
sizer.add(Wx::Button.new(@panel, label: "9"), [3, 2], flag: Wx::EXPAND)

It’s also essential (in this case), we specify that the 2nd to 4th row (indices 1 to 3), and 1st to 3rd column (indices 0 to 2) should be growable. This allows them to expand beyond their default size. The second parameter is the proportion with which they grow.

Passing in 1 into both allows them both to grow equally. Passing in 1 and 2, would cause one to grow twice as much as the other.

sizer.add_growable_row(1)
sizer.add_growable_row(2)
sizer.add_growable_row(3)
sizer.add_growable_col(0)
sizer.add_growable_col(1)
sizer.add_growable_col(2)

Lastly we add the GridBagSizer into the BoxSizer, with the appropriate flags. A border of 10 to serve as padding, and the Wx::EXPAND flag so that the Sizer can grow (widgets won’t grow if the Sizer is unable to grow).

wrapper.add(sizer, Wx::SizerFlags.new(1).expand.border(Wx::ALL, 10))
@panel.sizer = wrapper

The complete code and output is as follows.

require 'wx'

class MyWindow < Wx::Frame
  def initialize(title)
    super(nil, title: title)
    @panel = Wx::Panel.new(self)

    wrapper = Wx::HBoxSizer.new

    sizer = Wx::GridBagSizer.new(4, 3)

    sizer.add(Wx::StaticText.new(@panel, label: 'A Keypad'), [0, 1], flag: Wx::ALIGN_CENTRE)
    
    sizer.add(Wx::Button.new(@panel, label: "1"), [1, 0], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "2"), [1, 1], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "3"), [1, 2], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "4"), [2, 0], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "5"), [2, 1], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "6"), [2, 2], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "7"), [3, 0], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "8"), [3, 1], flag: Wx::EXPAND)
    sizer.add(Wx::Button.new(@panel, label: "9"), [3, 2], flag: Wx::EXPAND)

    sizer.add_growable_row(1)
    sizer.add_growable_row(2)
    sizer.add_growable_row(3)
    sizer.add_growable_col(0)
    sizer.add_growable_col(1)
    sizer.add_growable_col(2)
    
    wrapper.add(sizer, Wx::SizerFlags.new(1).expand.border(Wx::ALL, 10))
    @panel.sizer = wrapper

    centre
  end
end

Wx::App.run do
  window = MyWindow.new("wxRuby GridBagSizer Guide")
  window.show
end

The output:

screenshot1

Other Sizers in wxRuby

There are many other Sizers in wxRuby that you can use instead of GridBagSizer. In fact, the best layouts are often the result of combining several different types of Sizers. This can be done by simply nesting them into each other. There is no limitation to this ability.

You can learn more about these sizers by reading the guide on layout managers in wxRuby.

⚠️ **GitHub.com Fallback** ⚠️