Creating a Custom Pop-up Window in Visual Studio

Now I’ll be the first to admit that I am a Visual Studio n00b. The last time I opened up the IDE was many years back. So the solution presented here may not be the ideal way to get things done. But anyone who read the title and wants to know more about it will have at least some solution at hand. And they’ll also find out that it’s really easy to do something like this.

Pre-requisites and Installation

Although this should be obvious, for the sake of completion, I’ll have to mention that you need to have Visual Studio installed in order to make this work (duh).

For learning purposes, you can go ahead and download the Community Edition. Remember to check the below checkbox under the Desktop & Mobile section and you’re good to go.

Creating the Pop-up Window

• Post-installation, launch the application and click on Create a new project

• Use the below mentioned filters and select Windows Forms App. Or just direcly search for it.

• Give your project an appropriate name and click on Create

• After that, you’ll be greeted with the following Window. I have highlighted some key areas that we’re going to use in the project. I’ll refer to these as Sections # throughout the post.

• Let’s first start by opening the ToolBox (Section 1) and adding a PictureBox

• Next, we can dock the picture box to the top, adjust the size, and import a picture into it

• In order to add the text, we are going to use a Label and a RichTextBox. So grab them both from the ToolBox and drop them on the form.

• Once that’s done, change the following properties in the Properties section (Section 2):
  • Label
    • Font – Arial – 12 – Bold
    • Text – Message from Morpheus
    • ForeColor – ForestGreen
  • RichTextBox
    • BackColor – Control
    • BorderStyle – None
    • Font – Arial – 12
    • ScrollBars – None
    • Text – “You take the Blue pill… the story ends, you wake up in your bed and believe whatever you want to believe. You take the Red pill… you stay in Wonderland, and I show you how deep the rabbit hole goes”
      • You can also right-click the RichTextBox and select the Edit Text Lines option to add a new line, etc.

Of course, you can experiment with these properties to customize them to your needs, which brings us to…

Customizing the RichTextBox

I’m sure you have noticed that while our pop-up window looks almost the same, one thing that’s missing is the multi-colored words. We do not have any default properties to make that change. So we’ll have to take the help of a little bit of C#.

• Double click on the Form to see the code behind the scenes
• Inside the private void Form1_Load function, type the following code:

richTextBox1.Find("Blue"); 
richTextBox1.SelectionColor = Color.Blue;

richTextBox1.Find("story ends");
richTextBox1.SelectionColor = Color.Blue; 

richTextBox1.Find("Red");
richTextBox1.SelectionColor = Color.Red;

richTextBox1.Find("Wonderland");
richTextBox1.SelectionColor = Color.Red;

richTextBox1.SelectionLength = 0;

Final Touch

Once that’s done, all that remains is to run the project. Click on the green Start button (Section 3) at the top and wait for the window to launch. Hopefully, everything worked well and you’re able to see the window.

In order to find the executable file for your pop-up window, right-click on the Project name under the Solution Explorer (Section 4) and select Open Folder in File Explorer->Bin -> Debug

You can also find the path of the executable on the Output pane, once you start running it.

Additional Missing Info

You may have noticed that there are still a few minor differences between the initial and the current window:

• You can still see the minimize and maximize button
• Window icon looks different
• Window title looks different

I deliberately did not add the steps to do that. They are fairly easy to figure out with whatever we have learned so far. So I would love it if you give it a go.

That’s it for this post. Don’t forget to experiment with all the different options available.