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.
Lowkus
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

wxButton image alignment and offset

Postby Lowkus » Sun Jul 24, 2016 4:11 am

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: 11374
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Postby doublemax » Sun Jul 24, 2016 10:01 am

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
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Postby Lowkus » Sun Jul 24, 2016 5:32 pm

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: 11374
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Postby doublemax » Sun Jul 24, 2016 6:39 pm

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
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Postby Lowkus » Mon Jul 25, 2016 6:35 am

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: 11374
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Postby doublemax » Mon Jul 25, 2016 7:55 am

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
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Postby Lowkus » Sun Aug 07, 2016 7:45 am

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
wxWorld Domination!
wxWorld Domination!
Posts: 1285
Joined: Sun Jan 03, 2010 5:45 pm

Re: wxButton image alignment and offset

Postby PB » Sun Aug 07, 2016 7:57 am

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
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Postby Lowkus » Sun Aug 07, 2016 7:39 pm

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: 11374
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Postby doublemax » Tue Aug 09, 2016 4:19 pm

Could you show an image of what you're trying to achieve?
Use the source, Luke!

Lowkus
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Postby Lowkus » Wed Aug 10, 2016 8:03 pm

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 1098 times

User avatar
doublemax
Moderator
Moderator
Posts: 11374
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: wxButton image alignment and offset

Postby doublemax » Wed Aug 10, 2016 10:59 pm

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
Knows some wx things
Knows some wx things
Posts: 44
Joined: Sun May 01, 2016 2:48 am

Re: wxButton image alignment and offset

Postby Lowkus » Thu Aug 11, 2016 4:18 am

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?


Return to “C++ Development”

Who is online

Users browsing this forum: No registered users and 15 guests