The WinForms Notepad Project: Scrollbars, Plus More Status Bar and About Box (Premium)

After using NotePadWF extensively at Ignite 2019, I’m ready to make a few bug fixes and fit and finish improvements.

Scrollbars

I used our little Notepad clone pretty extensively during Ignite 2019 and, perhaps not surprisingly, I did find a few bugs. Some are related to the first-run experience, when you install the app on a new PC and it doesn’t behave as expected, but that will have to wait, since we’ll discuss publishing and installing at a later time. For now, let me focus on the bigger issue: the app’s lack of scrollbars.

If you’re familiar with Notepad, you know that it will display vertical and/or horizontal scrollbars when necessary; the former is a common occurrence with long documents and the latter happens a lot when you disable word wrap. But our Notepad clone does not display scrollbars at all. Oops.

Fortunately, it’s an easy fix: Display Form1.vb [Design], select TextBox1, and then locate the ScrollBars property (in the Properties pane). Change it from None to Both.

Status bar

I originally implemented the status bar fields in epically poor fashion by padding each field’s Text property with additional spaces. So let’s fix that. The goal is for each field to retain a static size and to not change as the application window or one of the field values (currently only the Zoom value) changes.

The first step is to remove the blank spaces we added at the end of each field’s Text property. Then, we need to set the AutoSize property of the four rightmost and non-empty fields to False. Remember, you can do that in one step by CTRL-clicking each field first. (Or, you can just do them one at a time.)

Next, we need to add a little bit of padding between the border line that sits to the left of each field and the first character that’s in its displayed text. This control supports both Padding and Margin properties, and it seems like at least one of these should do the trick. But I couldn’t figure it out, so my solution was to simply add a blank space to the Text property for each. (So, “ 100%” instead of “100%” for ZoomStripStatusLabel.) Surprisingly, this very closely mimics what Notepad looks like. But we also have to change some code that the zoom value displays correctly whenever it’s changed.

In RestoreDefaultZoomToolStripMenuItem_Click, we currently have a line of code that reads:

ZoomToolStripStatusLabel.Text = "100%"

This will need to be changed to:

ZoomToolStripStatusLabel.Text = " 100%"

And in FontToolStripMenuItem_Click, ZoomInToolStripMenuItem_Click, and ZoomOutToolStripMenuItem_Click, there is a line of code that reads:

ZoomToolStripStatusLabel.Text = (ZoomValue).ToString + "%"

This will need to be changed to the following in each:

ZoomToolStripStatusLabel.Text = " " + (ZoomValue).ToString + "%"

Finally, we need to set the Size.Width property of each status bar to a specific value. (Technically, Size is a property and Width is a structure value.) I used the following:

ToolStripStatusLabel2 (Text currently reads “Ln 1, Col 1”): 350

ZoomStripStatusLabel: 130

ToolStripStatusLabel4 (Text currently reads “Windows (CRLF)”): 300

ToolStripStatusLabel5 (Text currently reads “UTF-8”): 280

Now, this should pretty much look and work like the real Notepad status bar, and when you change the zoom value, the field size won’t change. Windows resizing doesn’t work exactly like Notepad, which uses an interesting effect when you make it smaller horizontally. But it’s close enough.

The bigger issue, of course, is those other three fields: I don’t believe I’m ever going to be able to accurately provide the caret position, though I will keep researching that. And the encoding and formatting values are likewise currently a mystery.

About box

Back on November 1, or two installments ago, we added a basic About box to the application using the built-in window provided by Windows Forms. If you’re familiar with Notepad, you may realize that this About box doesn’t really resemble the one from the original application. But if you’re really familiar with Notepad, you may also realize that there are really two versions of the application, one that ships with Windows 10 and one that is available from the Microsoft Store. And they both have different About box designs. So matching the original isn’t necessarily Job One here. Instead, we simply want to have something that is representative of a good About box.

The current design is, as noted, a bit basic. But it does provide some basic application info automatically, like the name, version number, and copyright date. Plus a terrible graphic. You can replace the graphic with any picture you prefer. But I used this one:

To change it, open AboutBox1.vb [Design], select the image, and then click the little caret/triangle. Then, select “Choose image.”

In the Select Resource window that appears, select Import and then choose the image you prefer to use.

As the stub text in the About box notes in the designer, you can customize the text that appears in this dialog by editing the application’s assembly information in the Application pane of the Project Designer. To do so, right-click the project name in the Solution Explorer pane and choose “Properties.” Then, in the Application tab of the Application Properties window that appears, click the “Assembly Information…” button to display the Assembly Information window.

Here, you can make whichever edits you like. I made only two changes:

Company: Thurrott.com

Description: Dedicated to Mary Jo Foley, the Queen of Notepad!

Then, returning to AboutBox1.vb [Design], I selected the text box called TextBoxDescription and changed two of its properties to make for a cleaner look:

BorderStyle: None

ScrollBars: None

Now, when you run it, the About box is a bit better looking.

I’ll have more soon, including how to publish your app so that you can install it on other PCs or distribute it to friends and family. But the remaining big issues are going to be tricky. I feel like I will eventually figure out Page Setup and Print, though these commands are curiously difficult in Windows Forms. But the Find, Find Next, Find Previous, Replace, and Go To commands may be too difficult if not impossible, for a variety of reasons.

Beyond this, I’m interested in seeing whether it makes sense to extend our Notepad clone into a “modern” Notepad that takes advantage of unique Windows 10 features like adaptive scroll bars, Fluent design (with an acrylic translucency), and the like. Another avenue of exploration is extending it to include new features like tabs, a toolbar or ribbon, or similar.

But first things first.