wx python layout overlap fields

Question

I face a small issue with a python cross-platform application. Initially the code came from a GUI wx code generator, unfortunatly I lost this part. So I try to move on with notepad directly with the wx python code.

When the vertical size of ListCtrl exceeds 170 px, this overdraws the "OK" button below. I can't see how to move down the OK button and increase vertical size of list of result. I'm not at ease with wx, and I'm really stuck on this point.

Here'm my code

frame.py (with vertical size = 190)

import wx
import wx.xrc

class MyFrame(wx.Frame):
    def __init__(self, parent):
        wx.Frame.__init__(self, parent, id=wx.ID_ANY, title=u'WINDOW', pos=wx.DefaultPosition, size=wx.Size(494, 439), style=wx.CAPTION | wx.CLOSE_BOX | wx.SYSTEM_MENU)
        self.SetSizeHintsSz(wx.DefaultSize, wx.DefaultSize)
        self.SetBackgroundColour(wx.Colour(234, 237, 240))
        bSizer1 = wx.BoxSizer(wx.VERTICAL)
        bSizer6 = wx.BoxSizer(wx.VERTICAL)
        bSizer6.AddSpacer((0, 30), 0, wx.EXPAND, 5)
        bSizer7 = wx.BoxSizer(wx.HORIZONTAL)
        bSizer7.SetMinSize(wx.Size(240, -1))
        bSizer7.AddSpacer((65, 0), 0, 0, 5)
        self.m_bitmap2 = wx.StaticBitmap(self, wx.ID_ANY, wx.Bitmap(u'icons.png', wx.BITMAP_TYPE_ANY), wx.DefaultPosition, wx.DefaultSize, wx.RAISED_BORDER)
        self.m_bitmap2.SetToolTipString(u'OPEN')
        bSizer7.Add(self.m_bitmap2, 0, wx.ALL | wx.ALIGN_CENTER_VERTICAL, 5)
        bSizer7.AddSpacer((55, 0), 1, wx.EXPAND, 5)
        self.m_staticText1 = wx.StaticText(self, wx.ID_ANY, u'Search', wx.DefaultPosition, wx.DefaultSize, 0)
        self.m_staticText1.Wrap(-1)
        self.m_staticText1.SetFont(wx.Font(14, 70, 90, 90, False, wx.EmptyString))
        bSizer7.Add(self.m_staticText1, 0, wx.ALL | wx.ALIGN_CENTER_HORIZONTAL | wx.ALIGN_CENTER_VERTICAL, 5)
        self.searchfield = wx.TextCtrl(self, wx.ID_ANY, wx.EmptyString, wx.DefaultPosition, wx.DefaultSize, wx.TE_PROCESS_ENTER)
        self.searchfield.SetMaxLength(0)
        self.searchfield.SetFont(wx.Font(15, 70, 90, 90, False, wx.EmptyString))
        bSizer7.Add(self.searchfield, 0, wx.ALL | wx.ALIGN_CENTER_HORIZONTAL | wx.ALIGN_CENTER_VERTICAL, 5)
        bSizer6.Add(bSizer7, 1, 0, 5)
        bSizer6.AddSpacer((0, 15), 0, 0, 5)
        self.gosearch = wx.Button(self, wx.ID_ANY, u'List', wx.DefaultPosition, wx.DefaultSize, 0)
        self.gosearch.SetFont(wx.Font(wx.NORMAL_FONT.GetPointSize(), 70, 90, 92, False, wx.EmptyString))
        bSizer6.Add(self.gosearch, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.TOP, 5)
        bSizer6.AddSpacer((0, 10), 0, 0, 5)
        bSizer1.Add(bSizer6, 1, wx.EXPAND, 5)
        gSizer3 = wx.GridSizer(4, 0, 0, 0)
        self.dataout = wx.ListCtrl(self, wx.ID_ANY, wx.DefaultPosition, wx.Size(480, 190), wx.LC_REPORT | wx.LC_SINGLE_SEL)
        self.dataout.SetFont(wx.Font(10, 70, 90, 90, False, wx.EmptyString))
        gSizer3.Add(self.dataout, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALL, 5)
        gSizer3.AddSpacer((0, 0), 1, wx.EXPAND, 5)
        self.butok = wx.Button(self, wx.ID_ANY, u'OK', wx.DefaultPosition, wx.DefaultSize, 0)
        self.butok.SetFont(wx.Font(14, 70, 90, 90, False, wx.EmptyString))
        gSizer3.Add(self.butok, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALIGN_BOTTOM, 5)
        self.m_staticText7 = wx.StaticText(self, wx.ID_ANY, u'help', wx.DefaultPosition, wx.DefaultSize, 0)
        self.m_staticText7.Wrap(-1)
        self.m_staticText7.SetFont(wx.Font(wx.NORMAL_FONT.GetPointSize(), 70, 90, 90, True, wx.EmptyString))
        gSizer3.Add(self.m_staticText7, 0, wx.ALIGN_CENTER_HORIZONTAL | wx.ALIGN_BOTTOM | wx.ALL, 5)
        bSizer1.Add(gSizer3, 1, wx.EXPAND, 5)
        self.SetSizer(bSizer1)
        self.Layout()
        self.Centre(wx.BOTH)

main.py

import sys
import wx
import frame

if __name__ == '__main__':
    app = wx.App(True)
    frame1 = frame.MyFrame(None)
    frame1.Show(True)
    app.SetTopWindow(frame1)
    app.MainLoop()
    sys.exit()

Thanks for your helpful answers.

Answer 1

This might look dirty, but adding a "null" bitmap image just before and after the fav button just do the trick.

self.m_bitmap_space = wx.StaticBitmap(FavBtn, bitmap=wx.NullBitmap)
self.m_bitmap2 = wx.StaticBitmap(FavBtn,
                                     bitmap=wx.Bitmap(u'icons.png', wx.BITMAP_TYPE_ANY),
                                     style=wx.RAISED_BORDER)
self.m_bitmap2.SetToolTipString(u'OPEN')
self.m_bitmap_space2 = wx.StaticBitmap(FavBtn, bitmap=wx.NullBitmap)

Maybe you have similar trick like this, with for example spacing settings.

Answer 2

Thanks for your time. inspired by your proposal, I wrote :

...
FavBtn = sc.SizedPanel(pane)
FavBtn.SetSizerType("vertical")
FavBtn.SetSizerProps(align="center", proportion=2)
self.m_bitmap2 = wx.StaticBitmap(FavBtn,
                                     bitmap=wx.Bitmap(u'icons.png', wx.BITMAP_TYPE_ANY),
                                     style=wx.RAISED_BORDER)
self.m_bitmap2.SetToolTipString(u'OPEN')
paneSearch = sc.SizedPanel(pane)
paneSearch.SetSizerType("horizontal")
paneSearch.SetSizerProps(align="center")
self.stSearch = wx.StaticText(paneSearch,
                                  label=u'Search')
self.stSearch.Wrap(-1)
self.stSearch.SetFont(wx.Font(14, 70, 90, 90, False, wx.EmptyString))

self.searchfield = wx.TextCtrl(paneSearch,
                                   style=wx.TE_PROCESS_ENTER)
self.searchfield.SetMaxLength(0)
self.searchfield.SetFont(wx.Font(15, 70, 90, 90, False, wx.EmptyString))

self.gosearch = wx.Button(pane, label=u'List')
self.gosearch.SetFont(wx.Font(wx.NORMAL_FONT.GetPointSize(), 70, 90, 92, False, wx.EmptyString))
self.gosearch.SetSizerProps(align="center")
...

But I need to separate and add a space between top "fav" button and list searching. How can I do that? Similarly, this would be better if I can add space between the top of the window and the fav button. I can't succeed doing that with lib-sized, seems too much automatic.

Answer 3

I like using the sized controls which are available as of 2.8.12 (I believe), they provide sizers just about for free with much less coding, especially if you code by hand. I also think the code is much cleaner/understandable if you use keywords (I changed some of the code, to show what I mean), which allows you to drop things where you use the control defaults.

It would also be better to use meaningful variable names, e.g. instead of self.m_statictext7 use something like self.stHelp.

# -*- coding: utf-8 -*-

import wx
import wx.lib.sized_controls as sc


class MyFrame(sc.SizedFrame):
    def __init__(self, parent):
        super(MyFrame, self).__init__(parent,
                                      title=u'WINDOW',
                                      style=wx.CAPTION | wx.CLOSE_BOX | wx.SYSTEM_MENU)
        self.SetBackgroundColour(wx.Colour(234, 237, 240))

        pane = self.GetContentsPane()

        paneSearch = sc.SizedPanel(pane)
        paneSearch.SetSizerType("horizontal")
        paneSearch.SetSizerProps(align="center")
        self.m_bitmap2 = wx.StaticBitmap(paneSearch,
                                         bitmap=wx.Bitmap(u'icons.png', wx.BITMAP_TYPE_ANY),
                                         style=wx.RAISED_BORDER)
        self.m_bitmap2.SetToolTipString(u'OPEN')

        self.stSearch = wx.StaticText(paneSearch,
                                      label=u'Search')
        self.stSearch.Wrap(-1)
        self.stSearch.SetFont(wx.Font(14, 70, 90, 90, False, wx.EmptyString))

        self.searchfield = wx.TextCtrl(paneSearch,
                                       style=wx.TE_PROCESS_ENTER)
        self.searchfield.SetMaxLength(0)
        self.searchfield.SetFont(wx.Font(15, 70, 90, 90, False, wx.EmptyString))

        self.gosearch = wx.Button(pane, label=u'List')
        self.gosearch.SetFont(wx.Font(wx.NORMAL_FONT.GetPointSize(), 70, 90, 92, False, wx.EmptyString))
        self.gosearch.SetSizerProps(align="center")

        self.dataout = wx.ListCtrl(pane, size=wx.Size(480, 190),
                                   style=wx.LC_REPORT | wx.LC_SINGLE_SEL)
        self.dataout.SetFont(wx.Font(10, 70, 90, 90, False, wx.EmptyString))

        self.butok = wx.Button(pane, label=u'OK')
        self.butok.SetFont(wx.Font(14, 70, 90, 90, False, wx.EmptyString))
        self.butok.SetSizerProps(align="center")

        self.stHelp = wx.StaticText(pane, label=u'help')
        self.stHelp.Wrap(-1)
        self.stHelp.SetFont(wx.Font(wx.NORMAL_FONT.GetPointSize(), 70, 90, 90, True, wx.EmptyString))
        self.stHelp.SetSizerProps(align="center")

        self.Fit()


if __name__ == '__main__':
    app = wx.App(True)
    frame1 = MyFrame(None)
    frame1.Show(True)
    app.SetTopWindow(frame1)
    app.MainLoop()