Contents of a panel won't visually update within a given time, but will clear completely afterwards

Question

I have a form with a picturebox docked to fill the whole thing. On this form, I have a panel that is normally invisible and another picturebox; on the panel, I have a label and another panel with a label.

Here is what SHOULD happen when the user hovers over the second picturebox:

1. The picturebox's image changes and the first panel becomes visible, making the second panel and both labels visible too
2. The user clicks on the second label
3. The second label's OnClick handler makes the first label's text change and the second panel becomes invisible
4. A timer ticks for a few seconds
5. A code segment in the timer's OnTick handler causes the image in the second picturebox to change and the first panel to become invisible

Here is what DOES happen:

1. The picturebox's image changes and the first panel becomes visible, making the second panel and both labels visible too
2. The user clicks on the second label
3. The second label's OnClick handler sets the first label's text to a new string and sets the second panel's Visible property to false, BUT the second panel stays visible (although you can't interact with it) and the first label's text gets written on top of the old text
4. A timer ticks for a few seconds
5. A code segment in the timer's OnTick handler causes the image in the second picturebox to change and the first panel to become invisible

I've tried everything I can think of. I've called Invalidate, Update, and Refresh on every control in the form, I've called Application.DoEvents, I've reset the image in the background PictureBox to itself, nothing. The REALLY weird part is that in step 5, when the front picturebox resets itself and all panels are set invisible, nothing gets left behind - it's just for that brief few seconds between the OnClick handler terminating and the timer's OnTick cleaning up that there are problems. I can edit this for more information if needed, but does anyone have any ideas of what to do?

Edit: It's been pointed out to me that I should probably upload the code for this. Well, that code is a hacked-together mess, but okay. Also: there are some weird extra bits (in the enum types among others), they're for later parts of the project and irrelevant right now.

    bool CountingHoverTime = false;
    int HoverTime = 0;
    int MasterTick = 0;

    enum GhostState { Stand, Speak, Pet, Ask };
    GhostState curState;

    public enum TalkType { HoverGen, Petted, Spont, TimerMsg, Response };

    private void Form1_Load(object sender, EventArgs e)
    {
        FormBorderStyle = FormBorderStyle.None;
        ShowInTaskbar = false;
        TopMost = true;
        ControlBox = false;
        Text = String.Empty;
        WindowState = FormWindowState.Maximized;


        SetStyle(ControlStyles.SupportsTransparentBackColor, true);
        this.BackColor = Color.Transparent;
        this.TransparencyKey = Color.Transparent;

    }

    protected override void OnPaintBackground(PaintEventArgs e)
    {
        //base.OnPaintBackground(e);
    }

    private void pictureBox2_MouseHover(object sender, EventArgs e)
    {
        if(curState == GhostState.Stand)
        {
            CountingHoverTime = true;
        }
    }

    private void timer1_Tick(object sender, EventArgs e)
    {
        if((curState != GhostState.Ask) && (curState != GhostState.Stand))
        {
            MasterTick++;
            if(MasterTick > 10)
            {
                SetToBasic();
            }
        }
        else
        {
            MasterTick = 0;
        }

        if (CountingHoverTime)
        {
            HoverTime++;
            if (HoverTime > 4)
            {
                HoverTime = 0;
                curState = GhostState.Ask;
                Say("What can I do for you?", TalkType.HoverGen);
            }
        }
    }

    public void SetToBasic()
    {
        curState = GhostState.Stand;
        ghostBox.Image = Properties.Resources.stickStand1;
        TalkPanel.Visible = false;
    }

    public void Say(String speak, TalkType type)
    {
        mainText.Text = speak;
        if(type == TalkType.Response || type == TalkType.Spont)
        {
            curState = GhostState.Speak;
        }
        else
        {
            curState = GhostState.Ask;
        }
        ghostBox.Image = Properties.Resources.stickTalk;
        if (type == TalkType.HoverGen)
            OptionPanel.Visible = true;
        else
            OptionPanel.Visible = false;

        TalkPanel.Visible = true;
        backBox.Image = Properties.Resources.background;
        ghostBox.Invalidate();
        TalkPanel.Invalidate();
        mainText.Invalidate();
        backBox.Invalidate();
        ghostBox.Update();
        TalkPanel.Update();
        mainText.Update();
        backBox.Update();
        Application.DoEvents();
    }

    private void op1label_Click(object sender, EventArgs e)
    {
        curState = GhostState.Speak;
        OptionPanel.Visible = false;
        Say("No can do yet.", TalkType.Response);
    }

Edit 2: I've put together a gif visualization of what's happening, thank you HandbagCrab.

Answer 1

I've approached this from a different direction. I think the issue is to do with the picturebox you have docked on the form causing some issues.

To fix it and still keep the transparency, get rid of the backBox. Set the background colour of the form to a colour you're not going to use then set the transparency key to that colour. This will make those areas of the form transparent. Now you just need your hidden panel and your labels and whatever control it is that hosts your stick man image.

I've left the backgrounds of the labels as pink here but you should change them to your background colour so that they're not transparent.

When I run the form I get the transparency still and when clicking on the grey panel (I've used a panel to simulate your stick man) shows the hidden panel with the labels. Clicking label2 updates the text on label1 (the one that contains the text "longish text"), completely replacing the text.

Here it is in use (I've not done a gif as I wanted each step to be clearly visible)

Here's the application when open:

Here it is after clicking the grey box:

Here's the updated text when clicking label2:

I've left the application border style as Sizeable just so you can see where the border lies. I also took the screenshots over a black background so there was no visual clutter.

Here's me right clicking the desktop through the transparent section: