Search code examples
pythonpython-2.7layoutwxpython

wxPython - Layout item on left and right


I hope this isn't a noobie question, but I am trying to understand WxPython for a project. I need to add an item to the left and right hand side of the top bar.

Diagram of what I am trying to achieve

I have included below the code I am was using (I hope it's not too long).

Is it possible to achieve what I envisage?

What I am mainly interested in is understanding where I have gone wrong please, I have been searching the Internet but can't find any solutions (and especially those with decent explanations).

import wx

class MyPanel(wx.Panel):
    def __init__(self, parent, clientSize):
        super(MyPanel, self).__init__(parent, id=wx.ID_ANY, size=clientSize)

class MainDialog(wx.Frame):
    def __init__(self):
        super(MainDialog, self).__init__(None, title = 'Test name',
        size = (1024, 768), style = wx.CAPTION | wx.SYSTEM_MENU | wx.RESIZE_BORDER)

        # Create the window client panel.
        clientSize = self.GetClientSize()
        self.__panel = MyPanel(self, self.GetClientSize())

        self.__CreateInterface()

        self.SetMinSize((1024, 765))
        self.__panel.Layout()

    def __CreateInterface(self):

        self.__panelSizer = wx.BoxSizer(wx.VERTICAL)

        topBarSizer = wx.BoxSizer(wx.HORIZONTAL)

        img = wx.Image("avatar.png", wx.BITMAP_TYPE_ANY)
        sb1 = wx.StaticBitmap(self.__panel, -1, wx.BitmapFromImage(img))
        topBarSizer.Add(sb1, flag=wx.LEFT | wx.TOP | wx.ALIGN_LEFT, border=10)

        userDataSizer = wx.BoxSizer(wx.VERTICAL)

        labelCtl = wx.StaticText(self.__panel,
            label='USER INFO:', style=wx.ALIGN_RIGHT, size=(350, -1))
        userDataSizer.Add(labelCtl,
            flag = wx.LEFT | wx.RIGHT | wx.TOP | wx.ALIGN_RIGHT, border = 8)

        l1 = wx.StaticText(self.__panel, label = 'Glitter Gem',
        style=wx.ALIGN_RIGHT, size = (350, -1))
        userDataSizer.Add(l1, flag = wx.LEFT | wx.RIGHT | wx.ALIGN_RIGHT,
            border = 8)

        topBarSizer.Add(userDataSizer, flag = wx.ALIGN_RIGHT|wx.EXPAND)

        self.__panelSizer.Add(topBarSizer, 0, wx.EXPAND, border = 8)
        self.__panel.SetSizer(self.__panelSizer)


class TestApp(wx.App):

    def OnInit(self):
        mainDialog = MainDialog()
        mainDialog.Show(True)
        return True

app = TestApp()
app.MainLoop()

Solution

  • Welcome to Stackoverflow,

    Sizers can be very complex, to fix your issue you can add a stretch spacer:

        topBarSizer.AddStretchSpacer();
    

    I would strongly encourage you to read the Zetcode layout guide as it has helped me out many times.