wxButtons Not Loading Correctly

Question

I am creating a GUI using wxWidgets in C++, however one issue I am having is the buttons won't load properly when I use a wxStaticBitmap background.

I have moved the code everywhere in different orders in order to put the buttons on top of the background image, however the application will only load with the background bitmap as well as the wxStaticText first and only show the buttons when I hover my mouse over them, even when I run the .exe file this still happens.

I have used Raise(); and Update(); and it just doesn't work. Any ideas would be really appreciated. (The functionality of the buttons and everything is fine once they are visible, but they just don't display straight away when the frame loads.)

Here is the code for the MainFrame.

#define _CRT_SECURE_NO_WARNINGS // get rid of warnings preventing compilation
#include "MainFrame.h"
#include <wx/wx.h>
#include "TopicQuestionsFrame.h"
#include "FlashcardsFrame.h"
#include "PopQuizFrame.h"
#include "LeaderboardFrame.h"
#include "CustomisationFrame.h"
#include "ClassroomFrame.h"
#include "FriendsFrame.h"
#include <windows.h>
#include "FrameUtilities.h"

MainFrame::MainFrame(const wxString& title) : wxFrame(nullptr, wxID_ANY, title) {

    wxPanel* panel = new wxPanel(this);     // creates the panel which the controls will be attached to

    this->SetClientSize(800, 800);
    this->SetMinSize(GetSize());
    this->SetMaxSize(GetSize());

    // image handling

    wxImage::AddHandler(new wxPNGHandler());

    wxBitmap image_bitmap("E:/Coding/Pro 7/Images/backgroundfinal.png", wxBITMAP_TYPE_PNG);
                                                                                                // this tells the program where to fetch the image files
    wxBitmap friends_button_bitmap("E:/Coding/Pro 7/Images/friendstab.png", wxBITMAP_TYPE_PNG);

    wxBitmap classroom_button_bitmap("E:/Coding/Pro 7/Images/classroomtab.png", wxBITMAP_TYPE_PNG);

    this->SetBackgroundColour("#c2cbc6"); // this sets the background colour of the window to the given hex code

    // background and button images

    wxStaticBitmap* background_gui = new wxStaticBitmap(this, wxID_ANY, image_bitmap, wxPoint(0, 0));

    wxBitmapButton* friends_tab = new wxBitmapButton(panel, wxID_ANY, friends_button_bitmap, wxPoint(660, 10), wxSize(102, 92));

    wxBitmapButton* classroom = new wxBitmapButton(panel, wxID_ANY, classroom_button_bitmap, wxPoint(60, 10), wxSize(102, 92));

    // font

    wxFont streak_font(36, wxFONTFAMILY_SWISS, wxFONTSTYLE_NORMAL, wxFONTWEIGHT_BOLD);

    // buttons

    wxButton* topic_questions = new wxButton(panel, wxID_ANY, "Topic Questions", wxPoint(300, 125), wxSize(245, 85));

    wxButton* flashcards = new wxButton(panel, wxID_ANY, "Flashcards", wxPoint(300, 245), wxSize(245, 85));

    wxButton* pop_quiz = new wxButton(panel, wxID_ANY, "Pop Quiz", wxPoint(300, 365), wxSize(245, 85));

    wxButton* customisation = new wxButton(panel, wxID_ANY, "Customisation", wxPoint(300, 485), wxSize(245, 85));

    wxButton* leaderboard = new wxButton(panel, wxID_ANY, "Leaderboard", wxPoint(300, 605), wxSize(245, 85));
    
    // binds

    topic_questions->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 1);  // CreateFrame is called with the current frame, evt and the integer id 1
        });                                         // which allows it to be uniquely identified
                                                    // FrameUtilities:: tells the file where to call the function from.

    flashcards->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 2);      
        });

    pop_quiz->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 2);
        });

    customisation->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 2);
        });

    leaderboard->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 2);
        });

    classroom->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 2);
        });

    friends_tab->Bind(wxEVT_BUTTON, [this](wxCommandEvent& evt) {
        FrameUtilities::CreateFrame(this, evt, 2);
        });

    // text

    wxStaticText* daily_streak = new wxStaticText(this, wxID_ANY, "52", wxPoint(395, 10));

    daily_streak->SetFont(streak_font);

}

This is how the frame looks when it first loads.

This is how the frame looks after I hover my mouse over all the buttons.

Answer 1

You can't have overlapping controls, with wxBitmapButtons being at the same level as wxStaticBitmap, so you can't use wxStaticBitmap for the background image. Instead, draw the bitmap in your panel wxEVT_PAINT handler.