wxButton image alignment and offset

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
Post Reply
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

wxButton image alignment and offset

Post by Lowkus »

Is there a way to offset an image on a wxButton? I want the image aligned to the TOP, but then shifted down by a few pixels. I'd like to avoid the kludge of padding the image with transparent pixels.

btnTest->SetBitmap(globepng, wxDirection::wxTOP);

Also, is there a way to align the image to the center of the button? wxDirection does not seem to offer CENTER as an option, and if I omit the direction from SetBitmap then it defaults the image alignment to the button's left side.
User avatar
doublemax
Moderator
Moderator
Posts: 19103
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Post by doublemax »

Is there a way to offset an image on a wxButton? I want the image aligned to the TOP, but then shifted down by a few pixels. I'd like to avoid the kludge of padding the image with transparent pixels.
There is only SetBitmapMargins(), but i don't think it will help in your case.
http://docs.wxwidgets.org/trunk/classwx ... 934f6f8ba6
Also, is there a way to align the image to the center of the button?
Center in which direction? And: Does the button have text or not?

Try the "widgets" sample that comes with wxWidets, switch to the "buttons" page and play around with the options and alignment-flags.
Use the source, Luke!
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Post by Lowkus »

Unfortunately it looks like SetBitmapMargins is MSW only; I have to keep my code compatible with Linux systems as well as Windows.

Centering the image would place the image's left edge a distance of ((buttonwidth - imagewidth) / 2) from the left edge of the button, and it would place the top edge at ((buttonheight - imageheight) / 2) from the top edge of the button. Ideally the button text could overlay the image unless it's aligned to some other area of the button.
User avatar
doublemax
Moderator
Moderator
Posts: 19103
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Post by doublemax »

Ideally the button text could overlay the image unless it's aligned to some other area of the button.
That's probably impossible with standard methods.

Maybe the easiest way would be to render the bitmap and text into a composite bitmap yourself and just set that bitmap for the button.
Use the source, Luke!
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Post by Lowkus »

Creating a modified bitmap was something I wanted to avoid. I'm really surprised wxWidgets doesn't support centering an image on a button, it's a fundamental UI design expectation. I might even have to rethink using wxWidgets at this point.
User avatar
doublemax
Moderator
Moderator
Posts: 19103
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Post by doublemax »

I'm really surprised wxWidgets doesn't support centering an image on a button, it's a fundamental UI design expectation
That's definitely possible as you can see in the "widgets" sample.

I said it was impossible to overlap the text and the image which is usally unwanted.
Use the source, Luke!
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Post by Lowkus »

Unfortunately I can't get the sample code to run.


-------------- Build: Debug Win32 in widgets (compiler: GNU GCC Compiler)---------------

mingw32-g++.exe -L.\..\..\lib\vc_lib -o vc_mswud\widgets.exe vc_mswud\widgets\widgets\activityindicator.o vc_mswud\widgets\widgets\bmpcombobox.o vc_mswud\widgets\widgets\button.o vc_mswud\widgets\widgets\checkbox.o vc_mswud\widgets\widgets\choice.o vc_mswud\widgets\widgets\clrpicker.o vc_mswud\widgets\widgets\combobox.o vc_mswud\widgets\widgets\datepick.o vc_mswud\widgets\widgets\dirctrl.o vc_mswud\widgets\widgets\dirpicker.o vc_mswud\widgets\widgets\editlbox.o vc_mswud\widgets\widgets\filectrl.o vc_mswud\widgets\widgets\filepicker.o vc_mswud\widgets\widgets\fontpicker.o vc_mswud\widgets\widgets\gauge.o vc_mswud\widgets\widgets\hyperlnk.o vc_mswud\widgets\widgets\itemcontainer.o vc_mswud\widgets\widgets\listbox.o vc_mswud\widgets\widgets\native.o vc_mswud\widgets\widgets\notebook.o vc_mswud\widgets\widgets\odcombobox.o vc_mswud\widgets\widgets\radiobox.o vc_mswud\widgets\widgets\searchctrl.o vc_mswud\widgets\widgets\slider.o vc_mswud\widgets\widgets\spinbtn.o vc_mswud\widgets\widgets\statbmp.o vc_mswud\widgets\widgets\static.o vc_mswud\widgets\widgets\textctrl.o vc_mswud\widgets\widgets\timepick.o vc_mswud\widgets\widgets\toggle.o vc_mswud\widgets\widgets\widgets.o vc_mswud\widgets\sample.res -lwxmsw31ud_adv -lwxmsw31ud_core -lwxbase31ud -lwxtiffd -lwxjpegd -lwxpngd -lwxzlibd -lwxregexud -lwxexpatd -lkernel32 -luser32 -lgdi32 -lcomdlg32 -lwinspool -lwinmm -lshell32 -lshlwapi -lcomctl32 -lole32 -loleaut32 -luuid -lrpcrt4 -ladvapi32 -lversion -lwsock32 -lwininet -mwindows
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxmsw31ud_adv
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxmsw31ud_core
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxbase31ud
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxtiffd
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxjpegd
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxpngd
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxzlibd
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxregexud
C:/Program Files/CodeBlocks/MinGW/bin/../lib/gcc/mingw32/4.9.2/../../../../mingw32/bin/ld.exe: cannot find -lwxexpatd
collect2.exe: error: ld returned 1 exit status
PB
Part Of The Furniture
Part Of The Furniture
Posts: 4182
Joined: Sun Jan 03, 2010 5:45 pm

Re: wxButton image alignment and offset

Post by PB »

You can compile each and every sample using provided GCC makefile. Just use the same command line you used to build wxWidgets, such as (when in the sample folder):

Code: Select all

mingw32-make -f makefile.gcc BUILD=debug
which builds debug static configuration of the sample. Of course, this requires the folder with compiler toolchain to be in the PATH.

If you for some reason insist on building the sample with an unsupported IDE (the only supported IDE on MSW is MSVC), you are on your own. But please notice that the compiler tells you what went wrong when compiling the sample from C:B. Assuming you actually have those libraries files, you also need to tell C::B where they are located: in project Build options for give configuration in Search directories/Linker. This is no different from any other project using wxWidgets....
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Post by Lowkus »

When I try to compile the samples using mingw32-make I get the message "mingw32-make: Nothing to be done for 'makefile.gcc'." But since I mainly cared about the code logic I went ahead and looked at the source code of the widgets sample (button.cpp file) and it seems like the bitmap is being applied to a wxBitmapButton object, not a wxButton object.

Without being able to compile I can't look at the runtime results to see a centered image, but I do not think the sample will show a centered image on a button because according to this page (http://docs.wxwidgets.org/trunk/classwx ... utton.html) the wxBitmapButton supports only four alignment styles (left, right, top, bottom). There is NO center alignment style offered for the wxBitmapButton, nor is it offered for the wxButton object.
User avatar
doublemax
Moderator
Moderator
Posts: 19103
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Post by doublemax »

Could you show an image of what you're trying to achieve?
Use the source, Luke!
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Post by Lowkus »

Here is a sample of what I'm attempting to recreate. The button (originally in a vb.net project) allowed the image to be placed equidistant from the button edges. It didn't matter if I resized the button, the image would always maintain a centered position. That's the sort of behavior I'm hoping to get from wxButton.
PicCentered.png
PicCentered.png (50.73 KiB) Viewed 6356 times
User avatar
doublemax
Moderator
Moderator
Posts: 19103
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Post by doublemax »

I get exactly that result with both wxButton and wxBitmapButton without doing anything special:

Code: Select all

::wxInitAllImageHandlers();
wxPanel *panel = new wxPanel(this, wxID_ANY);

wxBoxSizer *sizer = new wxBoxSizer(wxHORIZONTAL);

wxBitmap image("d:\\sortcopy.png", wxBITMAP_TYPE_PNG );

wxBitmapButton *button1 = new wxBitmapButton( panel, wxID_ANY, image );
sizer->Add(button1, 1, wxEXPAND|wxALL, 4 );

wxButton *button2 = new wxButton(panel, wxID_ANY);
button2->SetBitmap( image );
sizer->Add(button2, 1, wxEXPAND|wxALL, 4 );

panel->SetSizer( sizer );
Use the source, Luke!
Lowkus
Experienced Solver
Experienced Solver
Posts: 61
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Post by Lowkus »

I also had text on the button, which appears to be the problem. I removed the text and now the image is centering. Can the image be centered and text be placed below it?
Post Reply