Sizers and colored panels

I would normally attach my entire source code, but I don’t think I need to for this one. I think this screenshot will suffice: http://yfrog.com/n2editorscreenshotp

If you look at the screenshot, you will notice two colored bars, one black and one green. These are colored panels. Obviously, the way it is now is a bit ugly; what I wanted was for the panels to be small colored boxes that show the selected color.

This particular panel is set up with a vertical box sizer containing 5 horizontal box sizers.

How can I prevent the sizers from stretching the panels out like they are now, while still having everything else as it is? Is it possible to make the sizer align them across the frame without stretching anything? When I tried setting the second argument in hbox.Add() to 0, nothing was resized, but everything was just squished together, almost as if I hadn’t passed the ALIGN_* flags at all.

Here’s the code snippet where the panels are:

label = wx.StaticText(settings, -1, ‘Background Color:’, (10,40))
self.pnlBackgroundColor = wx.Panel(settings, -1, size=(32,16))
r,g,b = sets[‘bgcolor’]
self.pnlBackgroundColor.SetBackgroundColour(wx.Colour(r,g,b))
self.btnBackgroundColor = wx.Button(settings, -1, ‘Change’)
self.Bind(wx.EVT_BUTTON,self.OnBackgroundColor,self.btnBackgroundColor)
hbox2.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)
hbox2.Add(self.pnlBackgroundColor, 1, wx.ALIGN_CENTER)
hbox2.Add(self.btnBackgroundColor, 1, wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

label = wx.StaticText(settings, -1, ‘Line Color:’)
self.pnlLineColor = wx.Panel(settings, -1, size=(32,16))
r,g,b = sets[‘lncolor’]
self.pnlLineColor.SetBackgroundColour(wx.Colour(r,g,b))
self.btnLineColor = wx.Button(settings, -1, ‘Change’)
self.Bind(wx.EVT_BUTTON, self.OnLineColor, self.btnLineColor)
hbox3.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)
hbox3.Add(self.pnlLineColor, 1, wx.ALIGN_CENTER)
hbox3.Add(self.btnLineColor, 1, wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

Hi,

···

On Mon, Jul 19, 2010 at 9:28 PM, 音本四 <onpon4@gmail.com> wrote:

I would normally attach my entire source code, but I don't think I need to
for this one. I think this screenshot will suffice:
ImageShack - Best place for all of your image hosting and image sharing needs

If you look at the screenshot, you will notice two colored bars, one black
and one green. These are colored panels. Obviously, the way it is now is a
bit ugly; what I wanted was for the panels to be small colored boxes that
show the selected color.

This particular panel is set up with a vertical box sizer containing 5
horizontal box sizers.

How can I prevent the sizers from stretching the panels out like they are
now, while still having everything else as it is? Is it possible to make the
sizer align them across the frame without stretching anything? When I tried
setting the second argument in hbox.Add() to 0, nothing was resized, but
everything was just squished together, almost as if I hadn't passed the
ALIGN_* flags at all.

Here's the code snippet where the panels are:

label = wx.StaticText(settings, -1, 'Background Color:', (10,40))
self.pnlBackgroundColor = wx.Panel(settings, -1, size=(32,16))
r,g,b = sets['bgcolor']
self.pnlBackgroundColor.SetBackgroundColour(wx.Colour(r,g,b))
self.btnBackgroundColor = wx.Button(settings, -1, 'Change')
self.Bind(wx.EVT_BUTTON,self.OnBackgroundColor,self.btnBackgroundColor)
hbox2.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)
hbox2.Add(self.pnlBackgroundColor, 1, wx.ALIGN_CENTER)
hbox2.Add(self.btnBackgroundColor, 1,
wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

Don't specify a proportion > 0 if you don't want the item to take more
space. Specify 0 instead.

Also see Panel.SetMaxSize if changing the proportion to 0 doesn't do it.

Cody

Set the minsize of the panels to the size you want the sizer to use, and use proportion=0 instead of 1 when adding them to the sizer.

···

On 7/19/10 7:28 PM, 音本四 wrote:

I would normally attach my entire source code, but I don't think I need
to for this one. I think this screenshot will suffice:
ImageShack - Best place for all of your image hosting and image sharing needs

If you look at the screenshot, you will notice two colored bars, one
black and one green. These are colored panels. Obviously, the way it is
now is a bit ugly; what I wanted was for the panels to be small colored
boxes that show the selected color.

This particular panel is set up with a vertical box sizer containing 5
horizontal box sizers.

How can I prevent the sizers from stretching the panels out like they
are now, while still having everything else as it is? Is it possible to
make the sizer align them across the frame without stretching anything?
When I tried setting the second argument in hbox.Add() to 0, nothing was
resized, but everything was just squished together, almost as if I
hadn't passed the ALIGN_* flags at all.

Here's the code snippet where the panels are:

label = wx.StaticText(settings, -1, 'Background Color:', (10,40))
self.pnlBackgroundColor = wx.Panel(settings, -1, size=(32,16))
r,g,b = sets['bgcolor']
self.pnlBackgroundColor.SetBackgroundColour(wx.Colour(r,g,b))
self.btnBackgroundColor = wx.Button(settings, -1, 'Change')
self.Bind(wx.EVT_BUTTON,self.OnBackgroundColor,self.btnBackgroundColor)
hbox2.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)
hbox2.Add(self.pnlBackgroundColor, 1, wx.ALIGN_CENTER)
hbox2.Add(self.btnBackgroundColor, 1,
wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

label = wx.StaticText(settings, -1, 'Line Color:')
self.pnlLineColor = wx.Panel(settings, -1, size=(32,16))
r,g,b = sets['lncolor']
self.pnlLineColor.SetBackgroundColour(wx.Colour(r,g,b))
self.btnLineColor = wx.Button(settings, -1, 'Change')
self.Bind(wx.EVT_BUTTON, self.OnLineColor, self.btnLineColor)
hbox3.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)
hbox3.Add(self.pnlLineColor, 1, wx.ALIGN_CENTER)
hbox3.Add(self.btnLineColor, 1, wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

--
Robin Dunn
Software Craftsman

Like I said, I already tried that; everything was squished together (things don’t get aligned properly), which is even worse. I need them to be spaced out like they are now, but without stretching them.

···

On Mon, Jul 19, 2010 at 11:40 PM, Robin Dunn robin@alldunn.com wrote:

On 7/19/10 7:28 PM, 音本四 wrote:

I would normally attach my entire source code, but I don’t think I need

to for this one. I think this screenshot will suffice:

http://yfrog.com/n2editorscreenshotp

If you look at the screenshot, you will notice two colored bars, one

black and one green. These are colored panels. Obviously, the way it is

now is a bit ugly; what I wanted was for the panels to be small colored

boxes that show the selected color.

This particular panel is set up with a vertical box sizer containing 5

horizontal box sizers.

How can I prevent the sizers from stretching the panels out like they

are now, while still having everything else as it is? Is it possible to

make the sizer align them across the frame without stretching anything?

When I tried setting the second argument in hbox.Add() to 0, nothing was

resized, but everything was just squished together, almost as if I

hadn’t passed the ALIGN_* flags at all.

Here’s the code snippet where the panels are:

label = wx.StaticText(settings, -1, ‘Background Color:’, (10,40))

self.pnlBackgroundColor = wx.Panel(settings, -1, size=(32,16))

r,g,b = sets[‘bgcolor’]

self.pnlBackgroundColor.SetBackgroundColour(wx.Colour(r,g,b))

self.btnBackgroundColor = wx.Button(settings, -1, ‘Change’)

self.Bind(wx.EVT_BUTTON,self.OnBackgroundColor,self.btnBackgroundColor)

hbox2.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)

hbox2.Add(self.pnlBackgroundColor, 1, wx.ALIGN_CENTER)

hbox2.Add(self.btnBackgroundColor, 1,

wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

label = wx.StaticText(settings, -1, ‘Line Color:’)

self.pnlLineColor = wx.Panel(settings, -1, size=(32,16))

r,g,b = sets[‘lncolor’]

self.pnlLineColor.SetBackgroundColour(wx.Colour(r,g,b))

self.btnLineColor = wx.Button(settings, -1, ‘Change’)

self.Bind(wx.EVT_BUTTON, self.OnLineColor, self.btnLineColor)

hbox3.Add(label, 1, wx.ALIGN_LEFT|wx.ALIGN_CENTER_VERTICAL)

hbox3.Add(self.pnlLineColor, 1, wx.ALIGN_CENTER)

hbox3.Add(self.btnLineColor, 1, wx.ALIGN_RIGHT|wx.ALIGN_CENTER_VERTICAL)

Set the minsize of the panels to the size you want the sizer to use, and use proportion=0 instead of 1 when adding them to the sizer.

Robin Dunn

Software Craftsman

http://wxPython.org

To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com

or visit http://groups.google.com/group/wxPython-users?hl=en

Then add some spacers, or specify border and alignment flags. Use the WIT to help you visualize how the sizer is controlling the layout, it can be a big help.

http://wiki.wxpython.org/Widget_Inspection_Tool

···

On 7/19/10 8:43 PM, 音本四 wrote:

Like I said, I already tried that; everything was squished together
(things don't get aligned properly), which is even worse. I need them to
be spaced out like they are now, but without stretching them.

--
Robin Dunn
Software Craftsman

Hi,

Thanks, I didn't know about spacers. So... what are they again? I can't find
anything on wx.Spacer, and a search for wxpython spacer gives me little
information at all.

A spacer is just adding extra blank space to a layout. Here are a
handful of examples

sizer.AddSpacer(10) # Adds 10x10 pixel blank spacer

sizer.Add((10, 5), 0) # Adds a 10x5 pixel blank space to that point in
the layout

sizer.Add(some_item, 0, wx.ALL, 5) # Adds extra 5px of border space
around ALL sides of the item

sizer.AddStretchSpacer() # Adds a proportional spacer that will
stretch and contract depending on space available. Basically same as
sizer.Add((-1,-1), 1).

sizer.Add(some_item, 0, wx.RIGHT, 10) # Adds extra 10px of space to
the right of the item

Cody

···

On Tue, Jul 20, 2010 at 8:37 AM, 音本四 <onpon4@gmail.com> wrote:

Thanks, that was exactly what I needed. After specifying the x part of the label sizes, it now looks perfect. Thanks! :slight_smile:

···

On Tue, Jul 20, 2010 at 9:47 AM, Cody Precord codyprecord@gmail.com wrote:

Hi,

On Tue, Jul 20, 2010 at 8:37 AM, 音本四 onpon4@gmail.com wrote:

Thanks, I didn’t know about spacers. So… what are they again? I can’t find

anything on wx.Spacer, and a search for wxpython spacer gives me little

information at all.

A spacer is just adding extra blank space to a layout. Here are a

handful of examples

sizer.AddSpacer(10) # Adds 10x10 pixel blank spacer

sizer.Add((10, 5), 0) # Adds a 10x5 pixel blank space to that point in

the layout

sizer.Add(some_item, 0, wx.ALL, 5) # Adds extra 5px of border space

around ALL sides of the item

sizer.AddStretchSpacer() # Adds a proportional spacer that will

stretch and contract depending on space available. Basically same as

sizer.Add((-1,-1), 1).

sizer.Add(some_item, 0, wx.RIGHT, 10) # Adds extra 10px of space to

the right of the item

Cody

To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com

or visit http://groups.google.com/group/wxPython-users?hl=en