Adjusting Placement With Sizers
9 answers - 1845 bytes -

Attached is a screenshot of a notebook page. I'm having a very difficult
time figuring out how to place these widgets so they are centered on the
page, evenly spaced on each half, and have the buttons centered below the
tree widget on the left and below the list widget on the right.
Here are the directions I'm using:
topSizer = wx.BoxSizer(wx.VERTICAL) # main container
policyBox = wx.BoxSizer(wx.VERTICAL) # list of poicies/sub-policies & buttons
variableBox = wx.BoxSizer(wx.VERTICAL) # list of variables in each policy & buttons
sidewaysBox = wx.BoxSizer(wx.HRIZNTAL) # for the policy and variable boxes
policyBox.Add(policyName, 0, wx.LEFT, 15)
policyBox.Add(policyTree, 1, wx.LEFT, 15)
policyBox.Add(addPolButton, 0, wx.ALL, 5)
policyBox.Add(addSubPolButton, 0, wx.ALL, 5)
policyBox.Add(delPolButton, 0, wx.ALL, 5)
variableBox.Add(varName, 0, wx.RIGHT, 15)
variableBox.Add(varList, 1, wx.RIGHT, 15)
variableBox.Add(addVarButton, 0, wx.ALL, 5)
variableBox.Add(delVarButton, 0, wx.ALL, 5)
variableBox.Add(storeButton, 0, wx.ALL, 5)
divider = wx.StaticLine(self, wx.ID_ANY, size=wx.Size(-1, 485), style=wx.LI_VERTICAL)
sidewaysBox.Add(policyBox, 0)
sidewaysBox.Add(divider, 1, wx.EXPAND)
sidewaysBox.Add(variableBox, 0)
outlineBox = wx.StaticBox(self, wx.ID_ANY, size=wx.Size(770, 485), style=wx.RAISED_BRDER)
SBSizer = wx.StaticBoxSizer(outlineBox, wx.HRIZNTAL)
topSizer.Add(SBSizer, 0, wx.ALL, 5)
topSizer.Add(sidewaysBox, 1, wx.EXPAND|wx.ALL, 5)
self.SetSizer(topSizer)
I've tried various adjustments, but I still end up with the vertical line
too low and the other widgets shoved to the outside edges. What is a better
way to arrange these?
Thanks,
Rich
No.1 | | 956 bytes |
| 
Rich Shepard wrote:
Attached is a screenshot of a notebook page. I'm having a very difficult
time figuring out how to place these widgets so they are centered on the
page, evenly spaced on each half, and have the buttons centered below the
tree widget on the left and below the list widget on the right.
Rich,
I've made it into a simple complete app (always do that!) so I could
test. I've trimmed out a bit also, but here you go.
A couple hints:
- add things one by one.
- Make sure you really need it whenever you use an explicit size! Here I
did it for the two Panels, because they have no natural size with
nothing in them.
-I've left the BoxSizer out, I wasn't sure what you wanted to do with that.
- the two sides of that Panel look awfully similar -- I see a
opportunity for code re-use!
- To make all the buttons on the right the same size, I added another sizer.
No.2 | | 1001 bytes |
| 
PS, forgot to add the code!
Rich Shepard wrote:
Attached is a screenshot of a notebook page. I'm having a very difficult
time figuring out how to place these widgets so they are centered on the
page, evenly spaced on each half, and have the buttons centered below the
tree widget on the left and below the list widget on the right.
Rich,
I've made it into a simple complete app (always do that!) so I could
test. I've trimmed out a bit also, but here you go.
A couple hints:
- add things one by one.
- Make sure you really need it whenever you use an explicit size! Here I
did it for the two Panels, because they have no natural size with
nothing in them.
-I've left the BoxSizer out, I wasn't sure what you wanted to do with that.
- the two sides of that Panel look awfully similar -- I see a
opportunity for code re-use!
- To make all the buttons on the right the same size, I added another sizer.
-Chris
No.3 | | 1754 bytes |
| 
Wed, 30 Nov 2005, Chris Barker wrote:
I've made it into a simple complete app (always do that!) so I could test.
I've trimmed out a bit also, but here you go.
Thanks, Chris. I thought that looking at what I sent would be adequate.
Regardless, I can always generate a little stand alone application for these.
A couple hints:
- add things one by one.
That's what I did. I just could not adjust the panel's contents to where I
wanted them
- Make sure you really need it whenever you use an explicit size! Here I did
it for the two Panels, because they have no natural size with nothing in
them.
I have a single panel with a box just for the outline, and a vertical
divider. The reason I put explicit sizes on the buttons was to have them all
the same size; the wx.TreeCtrl and wx.TextCtrl have no natural size so I made
them the same.
-I've left the BoxSizer out, I wasn't sure what you wanted to do with that.
Hmm-m-m. I have four BoxSizers so I need to look at which one you took off.
- the two sides of that Panel look awfully similar -- I see a opportunity for
code re-use!
Well, yes, they do. That's by design. However, the contents of the left
will be a wx.TreeCtrl while the contents of the right will be a wx.TextCtrl
(or a wx.ListBox). The buttons will call dialog boxes that will be similar on
both sides, but vary in labels and the variables they control.
- To make all the buttons on the right the same size, I added another sizer.
They're all sized the same here (125,25).
I'll look at your returned code to better understand what I missed.
Many thanks,
Rich
No.4 | | 151 bytes |
| 
Wed, 30 Nov 2005, Chris Barker wrote:
PS, forgot to add the code!
I think we all do this on a regular basis.
Thanks,
Rich
No.5 | | 654 bytes |
| 
Wed, 30 Nov 2005, Chris Barker wrote:
I've made it into a simple complete app (always do that!) so I could test.
I've trimmed out a bit also, but here you go.
Chris,
Aha! I see what you've done.
- To make all the buttons on the right the same size, I added another
- sizer.
Shouldn't the buttons on the left also be the same size, too?
I've seen defining the widgets in the *.Add statement, and I've seen them
assigned to a variable name before being added to a sizer. Are there general
guidelines when to use one method rather than the other?
Thanks,
Rich
No.6 | | 366 bytes |
| 
Wed, 30 Nov 2005, Rich Shepard wrote:
I've made it into a simple complete app (always do that!) so I could test.
I've trimmed out a bit also, but here you go
Chris,
The wx.AlIGN_<whateverare very helpful. I don't recall reading about
them; I probably forgot that I saw them in the book.
Thanks again,
Rich
No.7 | | 1955 bytes |
| 
Rich Shepard wrote:
>- To make all the buttons on the right the same size, I added another
>- sizer.
Shouldn't the buttons on the left also be the same size, too?
That's up to you! I did it that way so you'd see the difference, and I
got sick of duplicating code. When I get sick of duplicating code, it's
time for code re-use!
In this case, I'd define a class derived from the Panel. In its __init__
I'd pass in the tree or list, then build up the Sizers you need. You
could either have a "MakeButtons" method that was overidden for the
different subclasses, or maybe pass in a list of Buttons to add.
I've seen defining the widgets in the *.Add statement, and I've seen them
assigned to a variable name before being added to a sizer. Are there
general guidelines when to use one method rather than the other?
If you need to ever refer to it again, create it on a separate line. I
was getting lazy here.
>I've made it into a simple complete app (always do that!) so I could
Thanks, Chris. I thought that looking at what I sent would be adequate.
well, I saw one issue by looking at it, but I always like to test before
I make suggestions. Also, it turns out there were a bunch of issues
here, so I ended up commenting out most of it, and adding things one by one.
The reason I put explicit sizes on the buttons was to have them
all the same size;
It's better to do this with sizers if you can, so that if you change the
labels, or platform or font, you're all set.
the wx.TreeCtrl and wx.TextCtrl have no natural size so I made
them the same.
The one time you do need to set sizes.
Hmm-m-m. I have four BoxSizers so I need to look at which one you took
off.
PS, I meant the StaticBoxSizer.
-Chris
No.8 | | 235 bytes |
| 
Rich Shepard wrote:
The wx.AlIGN_<whateverare very helpful. I don't recall reading about
them; I probably forgot that I saw them in the book.
Print a copy of the diagram in:
I find it very helpful.
-Chris
No.9 | | 112 bytes |
| 
Wed, 30 Nov 2005, Chris Barker wrote:
Print a copy of the diagram in:
Kewel! Thanks.
Rich