pythonwxpythonwxformbuilderboxsizer

How to prevent vertical sizers from expanding their children all the way downwards in wxformbuilder

I'm trying to design a dash board in WX form builder for Python. I'm having trouble trying to figure out how to keep two horizontal sizers that are children to a vertical sizer from expanding far apart from each other. Below is a screen shot describing what I am referring to:

enter image description here

The blue arrow represents that I want the textbox control and the label to move up closer to the first label.

My first instinct is that is had something to do with the wx.EXPAND etc flags however, I was not able to change those in a manner that made the sizers come closer to each other. It's almost like every time I place a sizer it automatically tries to fit everything in the entire window...which makes it difficult to place items in precise locations on the form. Any suggestions on how to stop sizers from expanding to the entire frame window size?

My next course of action was to try and use a gridsizer or a flex grid sizer however, I've only used them through direct code, where you can select the exact location in the grid where you want to add a widget or object. With form builder, I'm finding that they are more difficult to use mainly because I can't insert objects at certain indices in the grid sizer. It inserts them sequentially:

1,1 -> 1,2 -> 1,3 -> 1,i -> 2,1 -> 2,2 -> 2,3 -> 2,i -> j,i

Which means that if I need to change something in the grid...Its very difficult. Is there something I'm missing that makes it easier to insert objects into the grid, other than sequentially?

Below is one of example of 5x5 grid sizer (not completely filled) where I have specified both the horizontal and vertical gaps = 0:

enter image description here enter image description here

Besides being able to replace the button with a textbox at 1,4, I notice that the horizontal gap is clearly not zero even though I specified 0 for vertical and horizontal gaps. This also makes it very hard to design the form. Why is there a horizontal gap between buttons?

Solution

  • As you have noticed "stuff" expands to fit when using sizers and the proportion flag can wreak havoc with your layout if not used properly.
    Play with this simple bit of code: 

    import wx

class Summary(wx.Frame):

    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, "Playing with Simple Sizers", size=(430,260))

        self.panel = wx.Panel(self, wx.ID_ANY)
        self.log = wx.TextCtrl(self.panel, wx.ID_ANY, value="input1:",size=(428,25))
        self.log2 = wx.TextCtrl(self.panel, wx.ID_ANY, value="input2:", size=(428,25))
        self.quit_button = wx.Button(self.panel, label="Quit",size=(60,25))
        self.button1= wx.Button(self.panel, label="1",)
        self.button2 = wx.Button(self.panel, label="2",size=(60,25))
        self.button3 = wx.Button(self.panel, label="3",size=(60,25))
        self.button4 = wx.Button(self.panel, label="4",size=(60,25))
        self.quit_button.Bind(wx.EVT_BUTTON, self.OnQuit)

        vbox = wx.BoxSizer(wx.VERTICAL)
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        hbox3 = wx.BoxSizer(wx.HORIZONTAL)
        hbox4 = wx.BoxSizer(wx.HORIZONTAL)

        vbox.Add(self.quit_button, 0, wx.ALL|wx.EXPAND, 1)
        hbox1.Add(self.log, 0, wx.ALL|wx.EXPAND, 1)
        hbox2.Add(self.log2, 0, wx.ALL|wx.EXPAND, 1)

        hbox3.Add(self.button1, 1, wx.ALL|wx.EXPAND, 1)
        hbox3.Add(self.button2, 2, wx.ALL|wx.EXPAND, 1)
        hbox4.Add(self.button3, 0, wx.ALL|wx.EXPAND, 1)
        hbox4.Add(self.button4, 1, wx.ALL|wx.EXPAND, 1)

        vbox.Add(hbox1, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)
        vbox.Add(hbox3, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)
        vbox.Add(hbox4, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)
        vbox.Add(hbox2, 0, wx.ALIGN_RIGHT|wx.EXPAND, 1)

        self.panel.SetSizer(vbox)
        self.Show()

    def OnQuit(self, event):
        self.Close()
# Run the program
if __name__ == "__main__":
    app = wx.App()
    frame = Summary()
    app.MainLoop()

    The proportion flag is the 2nd parameter when adding into the sizer.
    You will note that it has been set at 0, 1, and 2 for the buttons, change them and see what happens to the buttons in relation to each other and play with the size parameter of a button.
    Change the proportion flag on self.log or self.log2 to 1 and watch that one expand.
    Finally make the frame size wider and see the reaction.
    Sizers can be extremely frustrating at first but once you "get" it, they are powerful tools.