wxSizers are a powerful layout mechanism that most people think are fairly simple as well, but unfortunately getting to know them enough to call them simple is usually an uphill battle. In this article I've tried to address some of the common misconceptions and pitfalls that people have with sizers. If you run into any more please feel free to add to the list once you figure it out.

Here are a few facts and hints about sizers:

  1. If a wxFrame (or derived class) is to have only one child, then you don't need a sizer at all, as the default behaviour of the frame's EVT_SIZE handler (assuming there is only one child) is to resize that child to occupy all of the frame's client area. Often it makes a lot of sense to give a frame just one wxPanel as a child and then place other windows and controls on that panel as appropriate, and set the sizer on the panel as well. 
       1 import wx
   2 app = wx.PySimpleApp()
   3 frame = wx.Frame(None, -1, "Just one child", size=(250,150))
   4 button = wx.Button(frame, -1, "This is resized")
   5 frame.Show()
   6 app.MainLoop()
  2. In normal use the sizers will treat a window's initial size when it is Add'ed to the sizer as its minimum size, and will use that size to calculate layout. Several window types default to (0,0) initial size so if you don't give them another size that is what the sizer will use for the minimum. If the sizer has no other reason to enlarge the window then you will see nothing of it.
  3. Often sizer.Fit(frame) is NOT what you want. It will use the minimum size of all the contained windows and sub-sizers and resize the frame so it just barely fits those minimums. More often I've found that I would rather use the default size of a frame (or the user-set size that I've loaded from a config file) and allow the sizer to layout to that size instead.
  4. The actual layout of windows controlled by a sizer (or layout constraints for that matter) happens in the default EVT_SIZE handler for a window. In other words, when EVT_SIZE happens, if you haven't connected your own size handler, and if the window has had a sizer assigned, and if auto-layout has been turned on, then the window's Layout method is called where it uses the assigned sizer

    or layout constraints to layout sub-windows. attachimg

  5. Not all windows have this default behaviour for the EVT_SIZE handler. Off the top of my head, those that do have it are wxFrame (and other frame types), wxDialog, wxPanel and wxScrolledWindow. wxSplitterWindow, and wxNotebook; and some others do specialized layout of their children, but if the children have sizers of their own then it should work as expected. Notice that wxWindow is not on the list (for various reasons), but if needed you can still allow it (or your own class derived directly form wxWindow) to have sizers and do auto layout by hooking EVT_SIZE and doing something like this: 
       1    def OnSize(self, evt):
   2        if self.GetAutoLayout():
   3            self.Layout()

  6. Since Layout doesn't happen until there is a size event, you will sometimes have to force the issue by calling Layout yourself. For example, if a frame is given its size when it is created, and then you add child windows to it, and then a sizer, and finally Show it, then it may not receive another size event (depending on platform) in order to do the initial layout. Simply calling self.Layout from the end of the frame's __init__ method will usually resolve this.

  7. If a window managed by a sizer changes its content and you want to change the minimum size that the sizer uses for it, you can call

    sizer.SetItemMinSize(window). You'll probably want to also call parentWindow.Layout() (or whomever owns the sizer) as well so the changes become visible. Starting in wxPython 2.3.3 you can easily find the sizer that is managing a window with the GetContainingSizer method.

  8. When using box sizers you specify either wxHORIZONTAL or wxVERTICAL, which is the orientation with which items are laid out. When an item is Add'ed with the wxEXPAND flag, the item will be resized to fill its alloted area in the opposite orientation. (So, for example, for a vertical box sizer items with wxEXPAND will expand in the horizontal direction.) The "proportion" parameter for box sizers indicates if the item is stretchable in the main orientation of the sizer and how much of the available space is taken up by the item. If the proportion is zero, then the item's minimum size will be used; if it is one, then it will get one share of the available size (after fixed size items are calculated). If 2 is used, then it will get two shares, etc. For example, if you have 3 items and you want the first to take 50% of the space and the remaining two to get 25% each then you would use proportions of 2, 1, 1 respectively.
  9. Sizers can be nested within each other to acheive more complex layouts. In fact, it's been said that most common layouts can be acheived by nesting various vertical and horizontal box sizers. The "items" that can be Add'ed to a sizer are windows, sizers or empty space specified by using a width and height.
  10. Empty borders can be placed around items by using one or more of the wxALL, wxLEFT, wxRIGHT, wxTOP, and wxBOTTOM flags of the Add method and giving the width in pixels in the border parameter.
  11. A sample is worth a thousand words: 
       1 import wx
   2 
   3 class MyFrame(wx.Frame):
   4    def __init__(self, parent, ID, title):
   5        wx.Frame.__init__(self, parent, ID, title, size=(300, 250))
   6 
   7        panel1 = wx.Panel(self,-1, style=wx.SUNKEN_BORDER)
   8        panel2 = wx.Panel(self,-1, style=wx.SUNKEN_BORDER)
   9 
  10        panel1.SetBackgroundColour("BLUE")
  11        panel2.SetBackgroundColour("RED")
  12 
  13        box = wx.BoxSizer(wx.VERTICAL)
  14        box.Add(panel1, 2, wx.EXPAND)
  15        box.Add(panel2, 1, wx.EXPAND)
  16 
  17        self.SetAutoLayout(True)
  18        self.SetSizer(box)
  19        self.Layout()
  20 
  21 
  22 app = wx.PySimpleApp()
  23 frame = MyFrame(None, -1, "Sizer Test")
  24 frame.Show()
  25 app.MainLoop()

  12. wxDesigner is a major help in creating sizer based layouts and is well worth the money. The wxDesigner Sizer Tutorial has also been loaded into the wiki.

  13. Sizers with static boxes around them (wxStaticBox) are created in two parts: 

       1    wx.StaticBoxSizer( wx.StaticBox( parent_window, id, "label" ), wx.HORIZONTAL )

  14. LearnSizers1 is a small script that shows how to use sizers with wxPython.

  15. wxGridBagSizer provides some extra information about the use of GridBagSizers.

  16. wxSizer in python provides information about using sizers that effectively resizes items when the window is resized

Visual Sizer .Add Summary

attachimg

Someone let me know if y'all can read this. It's a reference, a summary. It assumes you already know something about sizers. -- LionKimbro 2003-08-13 16:40:06

The light green text is too faint on my screen to read without putting my nose on the monitor. Other than that it's a great diagram!

-- Robin

attachimg

(trying to add as GIF).

Point #1 does not work for me at all (wxMSW,2.3.2.1). The Frame does not want to autosize its child. However, the sample in #11 is worth waiting for.

Yes it does. Try the new sample above.

Ah Hah! I was creating the notebook pages as children of the Frame, rather than as children of the notebook. Doh!

I love samples. Thanks.

Any sample custom sizer using PySizer?, also any sample for .Remove() (Detach() seems not included on 2.5.1), and .Insert()?, I was trying to make a vertical sizer to 'hide' and shift some horizontal sizer based on horizontal sizers visibility, but I'm having problems Remove and Insert.

I find that the easiest order and organization to do things in is:

  1. Create widgets and set any properties needed (Do this top-down...containers to containees)
  2. Create sizers
  3. Assign sizers to their parent widgets
  4. Build interface by adding widgets to sizers (Do this bottom-up...containees to containers)

Step one is top-down to ensure that parent widgets are created before children, so that their children can be created w/ the appropriate parent reference. Step 4 is done bottom up because it makes more sense in my head to assemble the smaller parts and then assemble them into bigger parts.

For fellow newbies:

The order of arguments for sizer.Add() is confusing. The 2nd argument is proportion which (in my limited experience) is rarely used. The 3rd argument is the sizer flag which is used often. So I keep making this mistake: s.Add(someItem, wx.EXPAND), which is wrong.

The correct way is this: a.Add(someItem, 0, wx.EXPAND) or this: a.Add(someItem, flag=wx.EXPAND).

N.B. proportion is an integer, not a float. If you specify a float, it will be silently converted to an int and you may not get what you expected. I had mistakenly normalized everything to 1.0 and it didn't work. (Seems like it really ought to be a float...)

I've added a page on ResizingFramesUsingSizers.

UsingSizers (last edited 2015-05-01 15:25:40 by briantoby)

NOTE: To edit pages in this wiki you must be a member of the TrustedEditorsGroup.