Categories
Tools Visual Studio

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.

Final pop-up window

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.

Visual Studio Installation

Creating the Pop-up Window

  • Post-installation, launch the application and click on Create a new project
Visual Studio Project Creation
  • 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
Visual Studio Project Creation
  • 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.
Visual Studio Project Home
  • Let’s first start by opening the ToolBox (Section 1) and adding a PictureBox
Add Picture Box
  • Next, we can dock the picture box to the top, adjust the size, and import a picture into it
Customize Picture Box
  • 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.
Add Label and Rich Text Box
  • 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;
C-sharp Code

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

Solution Explorer
Executable location

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

Executable location

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.

By Sam

Hi, I am Samarth Joshi. Gaming got me into computers and programming, which ultimately led me to IT. Now just trying to share what I learn.

Leave a Reply

Your email address will not be published. Required fields are marked *