Box Sizers - Python

Now let's organize things. We'll take a look at sizers throughout this tutorial. Sizers are simply devices that let you organize widgets. The most basic type of sizer is wxBoxSizer. It lets you organize widgets horizontally and vertically. It is also possible to nest sizers, as I'll explain in a bit. First, let me show you the syntax. Here is how you would create  a horizontal wxBoxSizer:

wxBoxSizer ( wxHORIZONTAL )

Here's how you create a vertical wxBoxSizer:

wxBoxSizer ( wxVERTICAL )

Of course, now we have to do something with our sizer. Let's dive right in to some code:

from wxPython.wx import *

class SizerFrame ( wxFrame ):

   def __init__ ( self ):

      wxFrame.__init__ ( self, None, -1, 'Sizers' )

      self.panel = wxPanel ( self, -1 )
      self.text = wxStaticText ( self.panel, -1, 'Just some text. That is all. I promise.' )
      self.button = wxButton ( self.panel, -1, 'Click Me' )
      self.sizer = wxBoxSizer ( wxVERTICAL )
      self.sizer.Add ( self.text )
      self.sizer.Add ( self.button )
      self.panel.SetSizerAndFit ( self.sizer )
      self.SetClientSize ( self.panel.GetSize() )

      self.Show ( True )

application = wxPySimpleApp()
window = SizerFrame()
application.MainLoop()

All right. This should be bite-size, but let's tear it apart just in case there's anything you don't completely understand. We start our application as normal. We import everything we need and create a frame. We then add a panel and two controls. Notice that the panel is the parent of both of the controls. Next, we create a vertical wxBoxSizer. This organizes our conrols vertically. We then add our two controls and adjust the size of both the panel and the frame to match the sizes of the controls. Finally, we show our frame to the user.

Creating a horizontal sizer is done the same way, with the exception of one variable:

from wxPython.wx import *

class SizerFrame ( wxFrame ):

   def __init__ ( self ):

      wxFrame.__init__ ( self, None, -1, 'Sizers' )

      self.panel = wxPanel ( self, -1 )
      self.text = wxStaticText ( self.panel, -1, 'Just some text. That is all. I promise.' )
      self.button = wxButton ( self.panel, -1, 'Click Me' )
      self.sizer = wxBoxSizer ( wxHORIZONTAL )
      self.sizer.Add ( self.text )
      self.sizer.Add ( self.button )
      self.panel.SetSizerAndFit ( self.sizer )
      self.SetClientSize ( self.panel.GetSize() )

      self.Show ( True )

application = wxPySimpleApp()
window = SizerFrame()
application.MainLoop()

Neither looks especially pretty, especially the horizontal one. Let's modify the vertical one a bit more and align the button in the center.

from wxPython.wx import *

class SizerFrame ( wxFrame ):

   def __init__ ( self ):

      wxFrame.__init__ ( self, None, -1, 'Sizers' )

      self.panel = wxPanel ( self, -1 )
      self.text = wxStaticText ( self.panel, -1, 'Just some text. That is all. I promise.' )
      self.button = wxButton ( self.panel, -1, 'Click Me' )
      self.sizer = wxBoxSizer ( wxVERTICAL )
      self.sizer.Add ( self.text )
      self.sizer.Add ( self.button, 0, wxALIGN_CENTER )
      self.panel.SetSizerAndFit ( self.sizer )
      self.SetClientSize ( self.panel.GetSize() )

      self.Show ( True )

application = wxPySimpleApp()
window = SizerFrame()
application.MainLoop()

Notice how we pass three arguments to the Add method. The first, of course, is the control we want to add to the sizer. There's nothing new there. The second is how the control should look in proportion to other controls. For example, if you want one control to be twice as big as another, pass 2 and 1, respectively. We pass 0, since we don't want to alter the size of our button. The third and final argument can vary. Since we pass 0, we have the choice of aligning our control any way we want it. We choose to align it in the center. Here are other options:

wxALIGN_LEFT
wxALIGN_RIGHT
wxALIGN_TOP
wxALIGN_BOTTOM
wxALIGN_CENTER_VERTICAL
wxALIGN_CENTER_HORIZONTAL