Seeing that we’re big fans of the Indie smash hit Undertail we decided to celebrate the recent release of Visual Studio 2017 by showing you how to write a WingDing translator so we can make sense of WD Gaster’s cryptic language.
What Tools Do I Need to Write My First App?
You’ll need to install Microsoft Visual Studio 2017 on your Windows PC. Although Microsoft boasts an initial install size of under 750 Mb, the install goes up to past 4 Gb if you add the necessary Windows bits.
Do I Need to Know Programming?
No, just follow along with this example. The coding will be simple (one line in fact) and your WingDing generation results will be awesome.
Lets Get Started
Head over to https://www.visualstudio.com/downloads/
Click on the Free Download button on the left, under Visual Studio 2017 Community. VS 2017 is free for individual use – Microsoft won’t send you a bill later.
If you’re in Chrome, you’ll see the bootstrapper called vs_community.exe appear at the bottom of the screen in the downloads bar. Click on the down arrow next to the name and select Open.
Or alternatively you could browse to the downloads folder and run vs_community.exe.
You might get a User Account notification – just press Yes.
Click Continue to accept Microsoft’s privacy statement and license terms.
On the Workloads screen, select all three boxes under the Windows section and click on Install. Now wait a while till your installation completes.
Congratulations, you have Visual Studio installed. Now to start your development project.
As you’re about to launch Visual Studio, you’ll see a screen prompting for Developer Settings. Choose Visual C#. You can choose any color theme. Click on Start Visual Studio.
Inside Visual Studio, select File on the Menu Bar and click on New Project.
Single-click on Windows Form App, and if you want to, give the project a unique name like WingDingTranslator. Click OK.
The project is created and below you’ll see:
The form you see top left is the one that will be the main program window.
You can press the “Start” button with the green arrow pointing right and your program will run – you will see a window titled “Form1” that can be moved, resized and closed, but not much else. If you pressed “Start” and ran the program, close the Form1 window again to return to the editor.
To work on your program, you need to have the vertical Toolbox menu to the left of your screen. Click on View, Toolbox.
The Toolbox pops up, but now it is almost covering your main form. So we want to have it sit to the left and not be in the way. Click on the Pin button highlighted in the red block below to park the Toolbox to the left.
Now let’s do the basics to populate your form: Drag 2 textboxes from the Toolbox to the Form1 form. On the Toolbox menu, scroll down until you can see a Textbox control. Click on the TextBox control, drag it over to Form1, and release the button. Repeat the procedure to drop a second TextBox below the first.
We want everything that is typed into the top box, to appear in Wingdings Font in the bottom text box.
So first let’s set the font of the second box to Wingdings.
Give the second textbox a single click to highlight it (see box below highlighted in red).
Then in the properties window on the right, scroll up to Font. Click on the bottom right box (also highlighted in red) and select Wingdings font.
Now we just need to add some code the first box to tell it that if the text changes in the first box, that text needs to be copied to the box below it.
Click once on textBox1 (top one) to show its properties at the bottom right. Click on the Events icon that looks like a small lightning bolt. Double click on the TextChanged event.
A code window will pop up that looks like the below. The method textBox1_TextChanged will fire every time you change the text in the box.
Add the following code textBox1_TextChanged method:
Press play now, type some text and see your text translated:
But our form still looks a bit ugly:
Give the form a name: Click anywhere on the form, look for the property Text on the right hand side in the Properties pane, and change the name to WD Gaster Translator.
Add some labels: Drag a Label control from the left hand Toolbox, drop it above your top textbox, click on it, and set the Text property in the right-hand Properties window to “English”. Drag a second label to just above the second textbox and call it “Wingdings”.
Add a background image: Click anywhere on the form, search for BackgroundImage in the Properties window right bottom and click on it. Then click on the button with the 3 dots on the right, and import your own image.