Use of Horizontal and Vertical boxsizers

Question

I am a learner of wxPython from zetcode.com. But the website has got more codes than explanations. So I was wondering when to use HORIZONTAL and when to use VERTICAL BoxSizers. I am asking this because the following code didn't act as I expected:

vbox.Add(sbs, flag=wx.EXPAND | wx.ALL, border=5) # vbox/sbs is a vertical boxsizer/staticboxsizer

I thought that it would not expand as I have not given any proportion. But actually it expanded HORIZONTALLY but NOT VERTICALLY. It started to to expand vertically when I added the proportion=1 command. It was a vertical boxsizer, but why did it expand horizontally when there was no proportion given? Sizers are confusing me.

ρss · Answer 1 · 2014-05-17T20:08:15.870

When to use Horizontal and Vertical BoxSizers?

When you want your elements to be placed vertically to each other then you use Vertical boxsizer.

When you want your elements to be placed horizontally to each other then you use Horizontal boxsizer.

See this image below, it is easy to understand:

sizers demo

Sample code:

I created Vertical boxsizer in myPanelA and a Horizontal boxsizer in myPanelB. You can see the difference in the image above how the elements are aligned to each other?

import wx

class test(wx.Frame):

    def __init__(self, parent, id, title):

        wx.Frame.__init__(self,None, id, title, style=wx.DEFAULT_FRAME_STYLE)
        self.myPanelA = wx.Panel(self, -1, size=(200,200), pos=(0,0))
        self.myPanelB = wx.Panel(self, -1, size=(200,200), pos=(0,205))
        self.mytextA = wx.StaticText(self.myPanelA, -1, 'My-PanelA', size=(80,20))
        self.myPanelA.SetBackgroundColour('#F57373')
        self.mytextB = wx.StaticText(self.myPanelB, -1, 'My-PanelB', size=(80,20))
        self.myPanelB.SetBackgroundColour('#73F573')
        self.mySizerA = wx.BoxSizer(wx.VERTICAL)
        self.mySizerB = wx.BoxSizer(wx.HORIZONTAL)
        self.button1 = wx.Button(self.myPanelA, -1, size=(18,18))
        self.button2 = wx.Button(self.myPanelA, -1, size=(18,18))
        self.button3 = wx.Button(self.myPanelA, -1, size=(18,18))
        self.button4 = wx.Button(self.myPanelB, -1, size=(18,18))
        self.button5 = wx.Button(self.myPanelB, -1, size=(18,18))
        self.button6 = wx.Button(self.myPanelB, -1, size=(18,18))
        self.mySizerA.Add(self.mytextA, 0, wx.ALL, 5)
        self.mySizerA.Add(self.button1, 0, wx.ALL, 5)
        self.mySizerA.Add(self.button2, 0, wx.ALL, 5)
        self.mySizerA.Add(self.button3, 0, wx.ALL, 5)
        self.myPanelA.SetSizer(self.mySizerA)
        self.myPanelA.Layout()
        self.mySizerB.Add(self.mytextB, 0, wx.ALL, 5)
        self.mySizerB.Add(self.button4, 0, wx.ALL, 5)
        self.mySizerB.Add(self.button5, 0, wx.ALL, 5)
        self.mySizerB.Add(self.button6, 0, wx.ALL, 5)
        self.myPanelB.SetSizer(self.mySizerB)
        self.myPanelB.Layout()

if __name__ == "__main__":
    app = wx.App()
    frame = test(parent=None, id=-1, title="Sizer demo")
    frame.Show()
    app.MainLoop()

If you change this line self.mySizerA.Add(self.button1, 0, wx.ALL, 5) to

self.mySizerA.Add(self.button1, 1, wx.ALL, 5) you'll notice that the button1 is larger than other buttons as shown in the image below. sizer2 So, this is proportion.

The 5 in this code line means that you want to have a space/distance of 5 points between all the components. Try to make it 10 and see what happens?

I hope it was clear. I'll recommend you to play around with this code snippet.

Thanks for the easy explanation. But you still haven't answered about the code I posted. Look at the code and it's details in my question. — Ahmed Sadman, May 19 '14 at 06:22

score 0 · Answer 2 · answered May 19 '14 at 19:39

This is basically a dupe of wxPython: Items in BoxSizer don't expand horizontally, only vertically

For whatever reason, the people behind wxWidgets decided to make the BoxSizers expand in the opposite direction to which they are stated. In other words, a BoxSizer that's orientation is wx.HORIZONTAL will expand Vertically and a BoxSizer that is set to wx.VERTICAL will expand Horizontally. If you want it to expand in both directions, then use the proportion set to 1 or greater + the wx.EXPAND flag.

Use of Horizontal and Vertical boxsizers

2 Answers2