Using wxSizers on high dpi, positions the widgets differently then on low dpi

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.
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

I have considered switching to use wxSizers instead of absolute positioning, because people from my previous posts recommended me to .

Here is how my app looks like on low dpi :
wxSizer.png
wxSizer.png (34.95 KiB) Viewed 566 times
Here is how my app looks like on high dpi :
wxSizerss.png
wxSizerss.png (17.28 KiB) Viewed 566 times

As you can see the "Output Folder" is not aligned with the "Input File".
As well as the "Select / Unselect All" is also not aligned with the "Reports" static text

Here is my Application's wxDialog code :

Code: Select all

class myDialog : public wxDialog {
public:

	myDialog(wxFrame* parent, wxWindowID id, const wxString& title) : wxDialog(parent, id, title, wxDefaultPosition, wxDefaultSize,
		wxDEFAULT_DIALOG_STYLE) {

		wxBoxSizer* vertical_sizer = new wxBoxSizer(wxVERTICAL);
		wxBoxSizer* input_file_sizer = new wxBoxSizer(wxHORIZONTAL);
		wxFont bigfont;
		bigfont.SetPointSize(11);
		wxFont smallfont;
		smallfont.SetPointSize(10);
		input_file = new wxStaticText(this,wxID_ANY,"Input File:",wxDefaultPosition, wxDefaultSize);
	//	input_file->SetMinSize(wxSize(120, 22));
		input_file->SetFont(bigfont);
		
		i_button = new wxTextCtrl(this,wxID_ANY,wxEmptyString,wxDefaultPosition,wxDefaultSize);
		i_button->SetMinSize(FromDIP(wxSize(500, 22)));

		i_showfile = new wxButton(this,wxID_ANY,"...");
		i_showfile->SetMinSize(FromDIP(wxSize(30, 22)));

		input_file_sizer->Add(input_file,0,wxLEFT,63);
		input_file_sizer->AddSpacer(11);
		input_file_sizer->Add(i_button);
		input_file_sizer->AddSpacer(11);
		input_file_sizer->Add(i_showfile,0,wxRIGHT,12);

		// Second Sizer

		wxBoxSizer* output_file_sizer = new wxBoxSizer(wxHORIZONTAL);

		output_file = new wxStaticText(this, wxID_ANY, "Output Folder:", wxDefaultPosition, wxDefaultSize);
		//	input_file->SetMinSize(wxSize(120, 22));
		output_file->SetFont(bigfont);

		o_button = new wxTextCtrl(this, wxID_ANY, wxEmptyString, wxDefaultPosition, wxDefaultSize);
		o_button->SetMinSize(FromDIP(wxSize(500, 22)));

		o_showfile = new wxButton(this, wxID_ANY, "...");
		o_showfile->SetMinSize(FromDIP(wxSize(30, 22)));

		output_file_sizer->Add(output_file, 0, wxLEFT, 32);
		output_file_sizer->AddSpacer(11);
		output_file_sizer->Add(o_button);
		output_file_sizer->AddSpacer(11);
		output_file_sizer->Add(o_showfile, 0, wxRIGHT, 14);



		// Third Sizer

		wxBoxSizer* reports_select_sizer = new wxBoxSizer(wxHORIZONTAL);

		reports = new wxStaticText(this, wxID_ANY, "Reports:", wxDefaultPosition, wxDefaultSize);
		//	input_file->SetMinSize(wxSize(120, 22));
		reports->SetFont(bigfont);

		select_all = new wxCheckBox(this, wxID_ANY,"Select / Unselect All", wxDefaultPosition, wxDefaultSize, wxCHK_3STATE);
		select_all->SetFont(smallfont);

		reports_select_sizer->Add(reports, 0, wxLEFT, 70);
		reports_select_sizer->AddSpacer(11);
		reports_select_sizer->Add(select_all,0,wxLEFT,4);



		// Fourth Sizer

		wxBoxSizer* reports_list_sizer = new wxBoxSizer(wxHORIZONTAL);
		wxArrayString sctr;
		sctr.Add("test 1");
		sctr.Add("test 2");
		sctr.Add("test 3");
		sctr.Add("test 4");
		sctr.Add("test 5");
		sctr.Add("test 6");
		reports_list = new wxCheckListBox(this,wxID_ANY,wxDefaultPosition, wxDefaultSize,sctr, wxLB_ALWAYS_SB);
		reports_list->SetMinSize(FromDIP(wxSize(500,120)));
		reports_list->SetFont(smallfont);

		reports_list_sizer->Add(reports_list,0,wxLEFT,137);


		// Fifth Sizer

		wxBoxSizer* generate_sizer = new wxBoxSizer(wxHORIZONTAL);
		generate_reports = new wxButton(this, wxID_ANY, "testing.........", wxDefaultPosition, wxDefaultSize, wxLB_ALWAYS_SB);
		generate_reports->SetMinSize(FromDIP(wxSize(120, 22)));

		open_output_folder = new wxButton(this, wxID_ANY, "testing.........", wxDefaultPosition, wxDefaultSize, wxLB_ALWAYS_SB);
		open_output_folder->SetMinSize(FromDIP(wxSize(120, 22)));

		generate_sizer->Add(generate_reports, 0, wxLEFT, 137);
		generate_sizer->AddSpacer(2);
		generate_sizer->Add(open_output_folder);


		vertical_sizer->Add(input_file_sizer, 0, wxTOP, 20);
		vertical_sizer->Add(output_file_sizer, 0, wxTOP, 8);
		vertical_sizer->Add(reports_select_sizer,0,wxTOP,8);
		vertical_sizer->Add(reports_list_sizer,0,wxTOP,8);
		vertical_sizer->Add(generate_sizer, 0, wxTOP, 8);
       
		vertical_sizer->SetSizeHints(this);
		SetSizer(vertical_sizer);

                                  // to smaller size
	   Layout();
	};
What I am doing is for having multiple horizontal sizers that go into one vertical sizer.
I'm also using FromDIP() so that the size can be converted to dpi.


/* More Questions on Sizers on Both Low Dpi and High Dpi */


I also wanted to ask about why the "Input File" static text and the the text box next to it, are not aligned. ( The Same applies for the "Output Folder" static text )

Also am I using sizers properly ?


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

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by doublemax »

For a layout like this it's better to use a single grid based sizer, e.g. wxFlexGridSizer, instead of multiple horizontal sizers in a vertical one.
Use the source, Luke!
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

Hi, does the FlexGridSizer fix my problems above :
  • Align static text next to a textbox infront of it.
  • Doesn't look unaligned on high dpi

Also please give more information.
User avatar
doublemax@work
Super wx Problem Solver
Super wx Problem Solver
Posts: 474
Joined: Wed Jul 29, 2020 6:06 pm
Location: NRW, Germany

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by doublemax@work »

ibrahim wrote: Mon May 23, 2022 2:54 am Hi, does the FlexGridSizer fix my problems above :
  • Align static text next to a textbox infront of it.
  • Doesn't look unaligned on high dpi

Also please give more information.

Code: Select all

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

    wxFlexGridSizer* fgs = new wxFlexGridSizer(3, 8, 8);

        // row 1
        fgs->Add(new wxStaticText(panel, wxID_ANY, "input 1"), 0, wxALIGN_RIGHT | wxALIGN_CENTER_VERTICAL | wxALL, 4);
        fgs->Add(new wxTextCtrl(panel, wxID_ANY, ""), 0, wxEXPAND | wxALL, 4);
        fgs->Add(new wxButton(panel, wxID_ANY, "..."), 0, wxALL, 4);

        // row 2
        fgs->Add(new wxStaticText(panel, wxID_ANY, "input longer text"), 0, wxALIGN_RIGHT | wxALIGN_CENTER_VERTICAL | wxALL, 4);
        fgs->Add(new wxTextCtrl(panel, wxID_ANY, ""), 0, wxEXPAND | wxALL, 4);
        fgs->Add(new wxButton(panel, wxID_ANY, "..."), 0, wxALL, 4);

        fgs->AddGrowableCol(1);

    panel->SetSizer(fgs);
Also note that there are no absolute sizes, mininum sizes, etc. anywhere.
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

How are there no mininal sizes ?? what if you wanted a big button , how would you specify that.
User avatar
doublemax@work
Super wx Problem Solver
Super wx Problem Solver
Posts: 474
Joined: Wed Jul 29, 2020 6:06 pm
Location: NRW, Germany

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by doublemax@work »

ibrahim wrote: Mon May 23, 2022 10:57 am How are there no mininal sizes ?? what if you wanted a big button , how would you specify that.
If you wanted a bigger-than-normal button, you still have to do that. But that doesn't mean that you should.
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

Hi @doublemax@work, I tried to run this code and the "..." button has a really big width , i tried to change some things but It had no effect, how do I change the width of the button ??
User avatar
doublemax@work
Super wx Problem Solver
Super wx Problem Solver
Posts: 474
Joined: Wed Jul 29, 2020 6:06 pm
Location: NRW, Germany

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by doublemax@work »

ibrahim wrote: Tue May 24, 2022 2:26 pm Hi @doublemax@work, I tried to run this code and the "..." button has a really big width , i tried to change some things but It had no effect, how do I change the width of the button ??
SetMaxWidth(...);
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

@doublemax@work

Thats All ? Please give me an explanation on what that does :(

I tried to use it on a wxButton but the method doesnt exist.

I am now chose to adapt to this layout :
new.jpg
new.jpg (46.78 KiB) Viewed 457 times
Is this great ?
User avatar
doublemax
Moderator
Moderator
Posts: 19115
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by doublemax »

ibrahim wrote: Tue May 24, 2022 3:07 pm SetMaxWidth()
I tried to use it on a wxButton but the method doesnt exist.
Sorry, i meant SetMaxSize();

No. Everything should go into the wxFlexGridSizer. With the exception of the two lower buttons, you'll need to put them into an additional horizontal boxsizer, and then put them into the center column of the wxFlexGridSizer.
Use the source, Luke!
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

Ok thank you.

Another thing is that the static text Is placed at the extreme corner :
BadCor.png
BadCor.png (3.15 KiB) Viewed 440 times
I need it to be spaced out :
GoodCor.png
GoodCor.png (3.63 KiB) Viewed 440 times
How Would I do that ??

Also SetMaxSize() on my button is not changing its width.
I tried SetMinSize() and it did change the width but it completely cut off the "..." button :
Cuttof.png
Cuttof.png (16.63 KiB) Viewed 440 times
I also ran the application on high dpi and it was aligned :D .
User avatar
doublemax
Moderator
Moderator
Posts: 19115
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by doublemax »

SetMaxSize() worked for me.

And for the padding, the easiest way is to wrap the whole FGS into another sizer and use the border width to create the outer space.

Code: Select all

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

wxBoxSizer *outerSizer = new wxBoxSizer(wxVERTICAL);
  wxFlexGridSizer* fgs = new wxFlexGridSizer(3, 8, 8);
    // row 1
    fgs->Add(new wxStaticText(panel, wxID_ANY, "input 1"), 0, wxALIGN_RIGHT | wxALIGN_CENTER_VERTICAL | wxALL, 4);
    fgs->Add(new wxTextCtrl(panel, wxID_ANY, ""), 0, wxEXPAND | wxALL, 4);

    wxButton *button = new wxButton(panel, wxID_ANY, "...");
    button->SetMaxSize( wxSize(32, -1) );
    fgs->Add( button, 0, wxALL, 4);

    // row 2
    fgs->Add(new wxStaticText(panel, wxID_ANY, "input longer text"), 0, wxALIGN_RIGHT | wxALIGN_CENTER_VERTICAL | wxALL, 4);
    fgs->Add(new wxTextCtrl(panel, wxID_ANY, ""), 0, wxEXPAND | wxALL, 4);
    fgs->Add(new wxButton(panel, wxID_ANY, "..."), 0, wxALL, 4);

    fgs->AddGrowableCol(1);
  outerSizer->Add(fgs, 0, wxALL, 16);   // <- border at all sides

panel->SetSizer(outerSizer);
Use the source, Luke!
ONEEYEMAN
Part Of The Furniture
Part Of The Furniture
Posts: 7459
Joined: Sat Apr 16, 2005 7:22 am
Location: USA, Ukraine

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ONEEYEMAN »

Hi,
What do you get when you run doublemax code(not changed)?
Can you post a screenshot?

Thank you.
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

@ONEEYEMAN

Alright :
doublmax'sProgram.png
doublmax'sProgram.png (7.97 KiB) Viewed 404 times

Also does saying the "@" before your name actually ping you in this forum ?
Last edited by ibrahim on Wed May 25, 2022 4:25 am, edited 1 time in total.
ibrahim
Earned some good credits
Earned some good credits
Posts: 124
Joined: Mon Mar 14, 2022 8:02 am

Re: Using wxSizers on high dpi, positions the widgets differently then on low dpi

Post by ibrahim »

@doublmax I looked through your code and noticed that the second parameter in the wxSize() constructor in SetMaxSize() is -1 , why did you do that ?

It seems like doing "SetMaxSize()" without the second paramter set to -1 doesnt work ??

Also SetMaxSize() only makes the widget smaller (by width), to make the widget bigger (by width), do I need to use SetMinSize(), or something else ?
Post Reply