I've got the following sizing-related code:
import wx
class TableSelectPanel(wx.Panel):
def __init__(self, parent, *args, **kwargs):
wx.Panel.__init__(self, parent, *args, **kwargs)
self.title = wx.StaticText(self, label="Select Table")
self.tableList = wx.ListBox(self)
sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(self.title)
sizer.Add(self.tableList, flag=wx.EXPAND)
self.SetSizerAndFit(sizer)
class LobbyFrame(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, None)
self.tableSelect = TableSelectPanel(self)
#window size
self.SetMinSize((800, 600))
self.SetMaxSize((800, 600))
self.SetSize((800, 600))
#sizers
sizer = wx.BoxSizer(wx.HORIZONTAL)
sizer.Add(self.tableSelect, flag=wx.EXPAND)
self.SetSizer(sizer)
self.Show(True)
What I expect is that I will have an 800x600 window with the wx.ListBox stretching vertically to fit the entire height of the table. However, while I do have an 800x600 window, the wx.ListBox does not expand to the entire height. Rather, it seems the panel does stretch out, but the list box does not:
What have I done wrong?
Set the proportion to 1:
sizer.Add(self.tableList, proportion=1, flag=wx.EXPAND)
Although the meaning of this parameter is undefined in wxSizer, it is used in wxBoxSizer to indicate if a child of a sizer can change its size in the main orientation of the wxBoxSizer - where 0 stands for not changeable and a value of more than zero is interpreted relative to the value of other children of the same wxBoxSizer. For example, you might have a horizontal wxBoxSizer with three children, two of which are supposed to change their size with the sizer. Then the two stretchable windows would get a value of 1 each to make them grow and shrink equally with the sizer's horizontal dimension.
Related
I'm bulding a wxpython GUI.
When I'm running the code all the components are in the left-top corner, on top of each other.
When I resize the window, they align as planned.
The window before resize
The window after resize
How can I fix this?
my code:
class Screen(wx.Frame):
def __init__(self, parent, title):
wx.Frame.__init__(self, parent, title=title, size=(900,500))
self.SetBackgroundColour("#E4F1FE")
self.Show(True)
self.InitUI()
def InitUI(self):
pnlMain = wx.Panel(self, size=(900,500))
# Setup Font
font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
font.SetPointSize(9)
# Setup horizontal box sizer
self.bsMain = wx.BoxSizer(wx.HORIZONTAL)
self.bsMain.SetDimension(0,0,900,500)
# Setup LEFT box sizer
self.bsLeft = wx.BoxSizer(wx.VERTICAL)
self.bsLeft.SetMinSize((3*(self.GetSize()[0]/4),self.GetSize()[1]))
# Make add button
btnAdd = wx.Button(pnlMain, label="+", size=(50,50))
# Add all the components to the LEFT sizer
self.bsLeft.Add(btnAdd, flag = wx.ALIGN_BOTTOM | wx.ALIGN_LEFT )
# Setup RIGHT bsMain sizer
self.bsRight = wx.BoxSizer(wx.VERTICAL)
self.bsRight.SetMinSize((self.GetSize()[0]/4,self.GetSize()[1]))
# Make users headline
stUsers = wx.StaticText(pnlMain, label="USERS")
stUsers.SetFont(font)
# Make users list control
lcUsers = wx.ListCtrl(pnlMain,style=wx.LC_REPORT|wx.SUNKEN_BORDER)
lcUsers.Show(True)
lcUsers.InsertColumn(0,"user")
lcUsers.InsertColumn(1,"status")
# Add all the components to the RIGHT sizer
self.bsRight.Add((-1,10))
self.bsRight.Add(stUsers, flag=wx.LEFT | wx.EXPAND | wx.ALIGN_CENTER | wx.ALIGN_CENTRE, border=5)
self.bsRight.Add((-1,10))
self.bsRight.Add(lcUsers, flag=wx.EXPAND)
# Add the vertical sizers to the horizontal sizer
self.bsMain.Add(self.bsLeft)
self.bsMain.Add(self.bsRight)
# Add the vertical sizer to the panel
pnlMain.SetSizer(self.bsMain)
This is a common problem for new wxPython programmers. The solution is almost always a call to the top level sizer's Layout method. Occasionally you'll need to call the top-level parent's Layout instead. In your case, either will work. You can add:
pnlMain.Layout()
or
self.bsMain.Layout()
to the bottom of InitUI method and it should force your widgets to redraw in their correct locations. I've seen some widgets behave badly because they start out with a zero size until their shown. In those cases, I have usually needed to use wx.CallAfter to call Layout. Anyway, here's a complete example using your code:
import wx
class Screen(wx.Frame):
def __init__(self, parent, title):
wx.Frame.__init__(self, parent, title=title, size=(900,500))
self.SetBackgroundColour("#E4F1FE")
self.Show(True)
self.InitUI()
def InitUI(self):
pnlMain = wx.Panel(self, size=(900,500))
# Setup Font
font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
font.SetPointSize(9)
# Setup horizontal box sizer
self.bsMain = wx.BoxSizer(wx.HORIZONTAL)
self.bsMain.SetDimension(0,0,900,500)
# Setup LEFT box sizer
self.bsLeft = wx.BoxSizer(wx.VERTICAL)
self.bsLeft.SetMinSize((3*(self.GetSize()[0]/4),self.GetSize()[1]))
# Make add button
btnAdd = wx.Button(pnlMain, label="+", size=(50,50))
# Add all the components to the LEFT sizer
self.bsLeft.Add(btnAdd, flag = wx.ALIGN_BOTTOM | wx.ALIGN_LEFT )
# Setup RIGHT bsMain sizer
self.bsRight = wx.BoxSizer(wx.VERTICAL)
self.bsRight.SetMinSize((self.GetSize()[0]/4,self.GetSize()[1]))
# Make users headline
stUsers = wx.StaticText(pnlMain, label="USERS")
stUsers.SetFont(font)
# Make users list control
lcUsers = wx.ListCtrl(pnlMain,style=wx.LC_REPORT|wx.SUNKEN_BORDER)
lcUsers.Show(True)
lcUsers.InsertColumn(0,"user")
lcUsers.InsertColumn(1,"status")
# Add all the components to the RIGHT sizer
self.bsRight.Add((-1,10))
self.bsRight.Add(stUsers, flag=wx.LEFT | wx.EXPAND | wx.ALIGN_CENTER | wx.ALIGN_CENTRE, border=5)
self.bsRight.Add((-1,10))
self.bsRight.Add(lcUsers, flag=wx.EXPAND)
# Add the vertical sizers to the horizontal sizer
self.bsMain.Add(self.bsLeft)
self.bsMain.Add(self.bsRight)
# Add the vertical sizer to the panel
pnlMain.SetSizer(self.bsMain)
self.bsMain.Layout()
if __name__ == '__main__':
app = wx.App(False)
frame = Screen(None, 'Layout')
app.MainLoop()
Note: I've rarely needed to call Refresh. I think Layout does so automatically.
In wxPython, I'm having trouble centering a sub-panel that I've created to have a fixed aspect ratio.
To control the aspect ratio, the sub-panel needs to capture the Size event and then do an explicit SetSize. So, I've done that and it works well. Unfortunately, when I embed this sub-panel into another panel (using a sizer), the wx.ALIGN_CENTER_HORIZONTAL flag doesn't work.
Apparently, the sizer tells my sub-panel that it has the whole width to fit within. When my window doesn't use the whole width, then the sizer doesn't adjust. Here is a simplified version of my code that shows the problem:
import wx
ROWS = 6
COLS = 25
class TestPanel(wx.Panel):
def __init__(self, parent):
wx.Panel.__init__(self, parent, -1)
label = wx.StaticText(self, -1, 'Label')
grid = TestGrid(self)
sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(label, 0, flag=wx.ALIGN_CENTER_HORIZONTAL)
sizer.Add(grid, 1, flag=wx.ALIGN_CENTER_HORIZONTAL|wx.EXPAND)
self.SetSizer(sizer)
class TestGrid(wx.Panel):
def __init__(self, parent):
wx.Panel.__init__(self, parent, -1)
self.SetBackgroundColour(wx.BLUE)
self.Bind(wx.EVT_SIZE, self.OnSize)
def OnSize(self, event):
w, h = self.GetSizeTuple()
delta = min(w // COLS, h // ROWS)
self.SetSize((COLS*delta, ROWS*delta))
self.Refresh()
if __name__ == '__main__':
app = wx.App()
frame = wx.Frame(None, -1, "Test", size=(600, 200))
panel = TestPanel(frame)
frame.Show(True)
app.MainLoop()
This is a screen capture:
As VZ explained in his answer, your wxEVT_SIZE handler isn't a very good idea. Remove it. When using sizers, you have to work within the sizer infrastructure to achieve what you want.
You want your TestGrid to fill as much space as possible within its parent, while maintaining a certain aspect ratio; that's exactly what wx.SHAPED is for (combined with a proportion greater than 0, which you already have). So, you should add grid to the sizer like this:
sizer.Add(grid, 1, flag=wx.ALIGN_CENTER_HORIZONTAL|wx.SHAPED)
The only other thing you need to do is tell the sizer what your desired aspect ratio is. The easiest way is to set an initial size for your TestGrid (before it's added to the sizer); for example, set the size of its wxPanel base:
wx.Panel.__init__(self, parent, -1, size=(COLS*7, ROWS*7))
That's all there is to it.
(I'm just guessing the Python syntax, so ignore any obvious errors :-) )
You can't, or at the very least shouldn't, resize a window from its own wxEVT_SIZE handler. I'm not sure what exactly are you trying to achieve, but if the goal is to encapsulate everything in TestGrid class, then you should let it have whichever size it has and create a nested window in it that you would resize to the appropriate size in your OnSize.
I uses a WrapSizer in order to have an automatic layout (as thumbnail gallery) like this (see screenshot on the left) :
I would like that if there are two many elements, a (vertical only)-ScrollBar is added on the panel (see right screenshot). How to add such a vertical scrollbar to a panel using a WrapSizer?
I tried by mixing WrapSizer and ScrolledPanel, but I cannot get the desired layout.
class MyPanel(scrolled.ScrolledPanel):
def __init__(self, parent):
scrolled.ScrolledPanel.__init__(self, parent)
self.SetBackgroundColour('#f8f8f8')
sizer = wx.WrapSizer()
self.SetupScrolling()
# add some widgets btn1, btn2, etc. in the WrapSizer
sizer.Add(btn1, 0, wx.ALL, 10)
sizer.Add(btn2, 0, wx.ALL, 10)
Solution:
reset the width of the scroll panel virtual size to the displayable size.
import wx
import wx.lib.scrolledpanel as scrolled
class MyPanel(scrolled.ScrolledPanel):
def __init__(self, parent):
scrolled.ScrolledPanel.__init__(self, parent, style=wx.VSCROLL)
self.SetBackgroundColour('#f8f8f8')
self.sizer = wx.WrapSizer()
self.SetupScrolling(scroll_x = False)
self.parent = parent
self.addButton(self.sizer , 10)
self.SetSizer(self.sizer )
self.Bind(wx.EVT_SIZE, self.onSize)
def onSize(self, evt):
size = self.GetSize()
vsize = self.GetVirtualSize()
self.SetVirtualSize((size[0], vsize[1]))
evt.Skip()
def addButton(self, sizer, num):
for i in range(1, num):
btn =wx.Button( self, wx.ID_ANY, "btn"+str(i), wx.DefaultPosition, wx.DefaultSize, 0 )
sizer.Add(btn, 0, wx.ALL, 10)
if __name__=='__main__':
app = wx.App(redirect=False)
frame = wx.Frame(None)
MyPanel(frame)
frame.Show()
app.MainLoop()
It looks like you just forgot to include
self.SetSizer(sizer)
Since the WrapSizer takes the whole frame, I think that will work. Also, instead of SetupScrolling, you can use
self.SetScrollRate(horiz, vert)
to specify the increment (in pixels, i think) of the scroll, and that should work.
I can't test it here right now though, and WrapSizers are a little weird - they sometimes have trouble figuring out their proper size. You may need to wrap it in a BoxSizer going the other direction.
I have created a pop up window, but the TextCtrl is not fully expanded to fill up the window. It works great if I use StaticText instead, (but if content too large then I would need the scroll bar, that is why I am using TextCtrl now). Please provide some guidance.
self.description = WindowPopup(self, wx.SIMPLE_BORDER, content)
btn = event.GetEventObject()
dw = wx.DisplaySize()[0]
width = self.description.GetSize()[0]
y = btn.ClientToScreen((0,0))[1]
height = btn.GetSize()[1]
x = dw - width - 20 - 10
self.description.Position((x, y), (0, height))
self.description.Show(True)
class WindowPopup(wx.PopupWindow):
""" Pops up a window to provide description for the selection """
def __init__(self, parent, style, content):
wx.PopupWindow.__init__(self, parent, style)
self.SetSize((700, 287))
panel = wx.Panel(self)
sizer = wx.BoxSizer(wx.VERTICAL)
st = wx.TextCtrl(self, -1, style = wx.TE_MULTILINE | wx.TE_READONLY)
st.SetValue(content)
sizer.Add(st, 0, wx.EXPAND)
panel.SetSizer(sizer)
I suspect your problem is that the panel is not as big as the popupwindow ... so even though the textfield is expanding to fill its sizer area it is not filling the popup its self.
try using something like
def __init__(...):
...
self.SetMinSize((700,287))
sizer2 = wx.BoxSizer()
sizer2.Add(panel)
self.SetSizer(sizer2)
also make sure that you are calling layout on it at some point (note this is totally untested... so it may need some tweeks, or even worse just be wrong...)
The actual answer is:
sizer = wx.BoxSizer(wx.VERTICAL)
st = wx.TextCtrl(self, -1, style = wx.TE_MULTILINE | wx.TE_READONLY, size = (500, 174))
st.SetValue(content)
self.SetSize((500, 174))
sizer.Add(st, 0, wx.EXPAND)
self.SetSizer(sizer)
self.Layout()
self.Show(True)
Credits to Joran for noticing Layout().
PopupWindow does not require an additional panel, because the window itself can have sizer set to it. This has been realized by using the wxPython Widget Inspection Tool.
Make sure TextCtrl and PopupWindow have the same size.
Hi at all friends :)
I have a problem with a control inside a wx.Panel.
With my code the wx.GenericDirCtrl inside a wx.Panel don't fit in all directions in the Panel (or fit only in a direction if I use wx.BoxSizer).
I use an istance of MyPanel in a wx.Frame.
How I can solve it? Thanks
The code is:
class MyPanel(wx.Panel):
def __init__(self, parent):
wx.Panel.__init__(self, parent, wx.ID_ANY)
resizeBox = wx.BoxSizer(wx.VERTICAL)
self.dir1 = wx.GenericDirCtrl(self, wx.ID_ANY)
resizeBox.Add(self.dir1, wx.EXPAND | wx.ALL)
self.SetSizerAndFit(resizeBox)
and the code where I instancing Panel in wx.Framec is:
# controls
self.splitterMain = wx.SplitterWindow(self, wx.ID_ANY) # create a vertical splitter
self.panel1 = MyPanel(self.splitterMain)
self.panel1.SetBackgroundColour(wx.BLACK)
self.panel2 = wx.Panel(self.splitterMain, wx.ID_ANY)
self.panel2.SetBackgroundColour(wx.WHITE)
self.splitterMain.SplitVertically(self.panel1, self.panel2)
You're using the Add method wrong. Its signature is
Add(self, item, proportion=0, flag=0, border=0, userData=None)
You've passed the "flag" parameter as the proportion parameter.