How to move a button in WxFormBuilder

Question

I've been playing around with WxFormBuilder, and I'm stuck on how to do the simple task of positioning a button in different places on the screen. Now the most intuitive thing would be to drag and drop, but WxFormBuilder (sadly) does not have this feature.

Answer 1

To move/position button in wxFormBuilder frame, you have to stack the button in different sizer types as found under the “Layout” tab. Then use wxVERTICAL or wxHORIZONTAL properties nof the sizers to control the button’s orientation.

~ Everything in wxFormBuilder most be placed in a box (sizer) that is either a parent box or a child box. No drag and drop here!

~ I usually draw/sketch my layout on paper before starting out on wxFormBuilder.

~ You can also use “spacer” to position the button behind empty/blank space.

~ “Align and Stretch” properties are always handy in positioning the buttons

~ This process applies to any widget/control.

Check the "Object Tree" in image below to guide you in positioning buttons at different location on the frame.

The wxPython code for the image is as below:-

import wx

class MyFrame1 ( wx.Frame ):

    def __init__( self, parent ):
        wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 500,317 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )

        self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )

        bSizer1 = wx.BoxSizer( wx.VERTICAL )

        bSizer2 = wx.BoxSizer( wx.HORIZONTAL )

        bSizer3 = wx.BoxSizer( wx.VERTICAL )

        self.m_button1 = wx.Button( self, wx.ID_ANY, u"Button1", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button1, 0, wx.ALL, 5 )

        self.m_button2 = wx.Button( self, wx.ID_ANY, u"Button2", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button2, 0, wx.ALL, 5 )

        self.m_button3 = wx.Button( self, wx.ID_ANY, u"Button3", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button3, 0, wx.ALL, 5 )

        self.m_button4 = wx.Button( self, wx.ID_ANY, u"Button4", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button4, 0, wx.ALL, 5 )

        self.m_button5 = wx.Button( self, wx.ID_ANY, u"Button5", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button5, 0, wx.ALL, 5 )

        self.m_button6 = wx.Button( self, wx.ID_ANY, u"Button6", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button6, 0, wx.ALL, 5 )

        self.m_button7 = wx.Button( self, wx.ID_ANY, u"Button7", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer3.Add( self.m_button7, 0, wx.ALL, 5 )


        bSizer2.Add( bSizer3, 0, wx.EXPAND, 5 )

        bSizer4 = wx.BoxSizer( wx.VERTICAL )

        bSizer5 = wx.BoxSizer( wx.HORIZONTAL )

        self.m_button8 = wx.Button( self, wx.ID_ANY, u"Button8", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer5.Add( self.m_button8, 0, wx.ALL, 5 )

        self.m_button9 = wx.Button( self, wx.ID_ANY, u"Button9", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer5.Add( self.m_button9, 0, wx.ALL, 5 )

        self.m_button10 = wx.Button( self, wx.ID_ANY, u"Button10", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer5.Add( self.m_button10, 0, wx.ALL, 5 )

        self.m_button11 = wx.Button( self, wx.ID_ANY, u"Button11", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer5.Add( self.m_button11, 0, wx.ALL, 5 )


        bSizer4.Add( bSizer5, 0, 0, 5 )

        gSizer6 = wx.GridSizer( 0, 2, 0, 0 )

        self.m_button12 = wx.Button( self, wx.ID_ANY, u"Button12", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer6.Add( self.m_button12, 0, wx.ALL, 5 )

        self.m_button13 = wx.Button( self, wx.ID_ANY, u"Button13", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer6.Add( self.m_button13, 0, wx.ALL, 5 )

        self.m_button14 = wx.Button( self, wx.ID_ANY, u"Button14", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer6.Add( self.m_button14, 0, wx.ALL, 5 )

        self.m_button15 = wx.Button( self, wx.ID_ANY, u"Button15", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer6.Add( self.m_button15, 0, wx.ALL, 5 )


        gSizer6.AddSpacer( ( 0, 0), 1, wx.EXPAND, 5 )


        bSizer4.Add( gSizer6, 0, wx.ALIGN_CENTER_HORIZONTAL, 5 )

        gSizer7 = wx.GridSizer( 0, 2, 0, 0 )

        self.m_button16 = wx.Button( self, wx.ID_ANY, u"Button16", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer7.Add( self.m_button16, 0, wx.ALL, 5 )

        self.m_button17 = wx.Button( self, wx.ID_ANY, u"Button17", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer7.Add( self.m_button17, 0, wx.ALL, 5 )

        self.m_button18 = wx.Button( self, wx.ID_ANY, u"Button18", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer7.Add( self.m_button18, 0, wx.ALL, 5 )

        self.m_button19 = wx.Button( self, wx.ID_ANY, u"Button19", wx.DefaultPosition, wx.DefaultSize, 0 )
        gSizer7.Add( self.m_button19, 0, wx.ALL, 5 )


        bSizer4.Add( gSizer7, 1, wx.ALIGN_CENTER_HORIZONTAL, 5 )


        bSizer2.Add( bSizer4, 1, wx.EXPAND, 5 )


        bSizer1.Add( bSizer2, 1, wx.EXPAND, 5 )

        bSizer8 = wx.BoxSizer( wx.HORIZONTAL )

        self.m_button20 = wx.Button( self, wx.ID_ANY, u"Button20", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer8.Add( self.m_button20, 0, wx.ALL, 5 )

        self.m_button21 = wx.Button( self, wx.ID_ANY, u"Button21", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer8.Add( self.m_button21, 0, wx.ALL, 5 )

        self.m_button22 = wx.Button( self, wx.ID_ANY, u"Button22", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer8.Add( self.m_button22, 0, wx.ALL, 5 )

        self.m_button23 = wx.Button( self, wx.ID_ANY, u"Button23", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer8.Add( self.m_button23, 0, wx.ALL, 5 )

        self.m_button24 = wx.Button( self, wx.ID_ANY, u"Button24", wx.DefaultPosition, wx.DefaultSize, 0 )
        bSizer8.Add( self.m_button24, 0, wx.ALL, 5 )


        bSizer1.Add( bSizer8, 1, wx.EXPAND, 5 )


        self.SetSizer( bSizer1 )
        self.Layout()

        self.Centre( wx.BOTH )

    def __del__( self ):
        pass


if __name__ == '__main__':
    app = wx.App()
    frame = MyFrame1(None).Show()
    app.MainLoop()

Answer 2

I would suggest you take a look at using sizers. It is a much better way of laying out various components on a form. If you want to move the button around you will have to specify the position in the code manually