Animating Sliding Panel/Window in wxWidgets

Question

Hi i have a wxWindow that has two arrows(left and right) and in the middle there is a wxPanel(screenshot attached). Now when the user clicks on the right arrow button, the current panel that is shown on the screen should slide to the left and a new wxPanel should come from the right side and move towards the left so that it takes the place of the first wxPanel. I have attached 4 screenshots which show the intermediate stages after the user clicks on the right arrow button. Similarly for when the user clicks on the left arrow button but this time in the opposite direction. I know how create the arrow and give it clicking functionality but i don't know how to animate this in wxWidgets or is this kind of animation even possible in wxWidgets.

This is what is initially shown on the screen:

Next when the user clicks on the right arrow button:

Next the page1 is still moving to the left and going out of the screen while page2 is coming into the screen from right side but is still not taking fullspace. This is an intermediate stage:

Finally page2 takes place of page1. This is the end stage.

Note that when the user clicks on the right arrow the sliding animation should take some time lets say .5 second or 1 second so that the user can see the sliding of the next panel into the screen.

Answer 1

I think with wxWidgets, the best you can do is simulate this with a simplebook. Here's an example:

#include "wx/wx.h"

#include <wx/simplebook.h>
#include <wx/spinctrl.h>

class MyFrame: public wxFrame
{
public:
    MyFrame();

private:
    void ChangePage(wxShowEffect);
    void SetLabel();

    wxSimplebook* m_simplebook;
    wxStaticText* m_pageIndicator;
};

MyFrame::MyFrame():wxFrame(NULL, wxID_ANY, "Sliding Demo", wxDefaultPosition,
             wxSize(400, 300))
{
    const int initialEffectTimout = 200;
    wxPanel* bg = new wxPanel(this,wxID_ANY);

    // Create the simple booka and add 3 dummy pages.
    m_simplebook = new wxSimplebook(bg,wxID_ANY);
    m_simplebook->SetEffectTimeout(initialEffectTimout);
    wxPanel* page1 = new wxPanel(m_simplebook,wxID_ANY);
    wxPanel* page2 = new wxPanel(m_simplebook,wxID_ANY);
    wxPanel* page3 = new wxPanel(m_simplebook,wxID_ANY);
    page1->SetBackgroundColour(*wxRED);
    page2->SetBackgroundColour(*wxGREEN);
    page3->SetBackgroundColour(*wxBLUE);
    m_simplebook->AddPage(page1,wxString());
    m_simplebook->AddPage(page2,wxString());
    m_simplebook->AddPage(page3,wxString());

    // create left and right arrows.
    wxButton* leftArrow = new wxButton(bg, wxID_ANY, wxUniChar(0x276E),
                               wxDefaultPosition, wxDefaultSize, wxBU_EXACTFIT);
    wxButton* rightArrow = new wxButton(bg, wxID_ANY, wxUniChar(0x276F),
                               wxDefaultPosition, wxDefaultSize, wxBU_EXACTFIT);

    // create the label for the page indicator.
    m_pageIndicator = new wxStaticText(bg,wxID_ANY,wxString());
    SetLabel();

    // add a spin control to change the duration of the slide animation.
    wxStaticText* spinLabel = new wxStaticText(bg,wxID_ANY,"Transition time:");
    wxSpinCtrl* spin = new wxSpinCtrl(bg,wxID_ANY);
    spin->SetRange(0,1000);
    spin->SetValue(initialEffectTimout);

    // Layout the controls
    wxBoxSizer* mainSizer = new wxBoxSizer(wxVERTICAL);
    wxBoxSizer* bookSizer = new wxBoxSizer(wxHORIZONTAL);
    bookSizer->Add(leftArrow,wxSizerFlags(0).Border(wxALL).CenterVertical());
    bookSizer->Add(m_simplebook,wxSizerFlags(1).Expand().Border(wxTOP|wxBOTTOM));
    bookSizer->Add(rightArrow,wxSizerFlags(0).Border(wxALL).Center());
    mainSizer->Add(bookSizer,wxSizerFlags(1).Expand());
    mainSizer->Add(m_pageIndicator,wxSizerFlags().Border(wxBOTTOM).Center());

    wxSizer* spinSizer = new wxBoxSizer(wxHORIZONTAL);
    spinSizer->Add(spinLabel,wxSizerFlags().Center());
    spinSizer->Add(spin,wxSizerFlags());
    mainSizer->Add(spinSizer, wxSizerFlags().Center().Border(wxBOTTOM));

    bg->SetSizer(mainSizer);
    Layout();

    // Event handlers for the left arrow, right arrow, and spin control.
    leftArrow->Bind(wxEVT_BUTTON,
            [this](wxCommandEvent&){ChangePage(wxSHOW_EFFECT_SLIDE_TO_RIGHT);});
    rightArrow->Bind(wxEVT_BUTTON,
             [this](wxCommandEvent&){ChangePage(wxSHOW_EFFECT_SLIDE_TO_LEFT);});
    spin->Bind(wxEVT_SPINCTRL,
             [this](wxSpinEvent& event)
             {m_simplebook->SetEffectTimeout(event.GetPosition());});
}

void MyFrame::SetLabel()
{
    int curPage = m_simplebook->GetSelection();
    int totalPages = m_simplebook->GetPageCount();
    wxString label;

    for ( int i = 0 ; i < totalPages ; ++i )
    {
        // U+2B24 = "Black Large Circle"
        // U+2B58 = "Heavy Circle"
        label << ((i == curPage) ? wxUniChar(0x2B24) : wxUniChar(0x2B58));
    }

    m_pageIndicator->SetLabel(label);
}

void MyFrame::ChangePage(wxShowEffect effect)
{
    m_simplebook->SetEffect(effect);
    m_simplebook->AdvanceSelection(effect == wxSHOW_EFFECT_SLIDE_TO_LEFT);

    SetLabel();
}


class MyApp : public wxApp
{
    public:
        virtual bool OnInit()
        {
            MyFrame* frame = new MyFrame();
            frame->Show();
            return true;
        }
};

wxIMPLEMENT_APP(MyApp);

On windows it looks like this:

I realize this isn't exactly what you want since it slides 1 page out completely before sliding the next instead of having the pages next to each other as the slide occurs. But I think that is the best that can be done with the controls available.