Techblogg

Build your own notepad [Tutorial]




So, after a brief tutorial on how getting things set up with Windows Forms programming with C#
I thought I´d make a simple tutorial about making a practical program, and why not a notepad?

This tutorial will cover the basics of creating a simple GUI with Windows forms,
working with the contextual menu, saving and loading files, and also working with right click context menus

Alright, let´s code a program!

Start a new Windows Forms project using C#.
You should be able to do this now if you´ve had a look at my last tutorial.

First, we need a canvas to work with, place in your form, a simple "rich text box", a "label" at the bottom and a "Menu strip".

Place the Menu strip and the label first, as it will take up a predefined space, and you´ll have to adjust the Rich Text Box anyway.



Click in the Menu Strip object twice to add an object, type "File" and press enter.

Now do it again to the right of the newly created "File" and type "Edit".


We´ll begin from there, we´ll get back to the Menu Strip object later.


Crack your knuckles, and get coding
Alright, it may look like notepad, but it´s not even a tiny bit of it yet.
Let´s make something happen.

Select your rich text box in the design window and turn your attention to the properties box in the bottom right.
There´s a little flash icon just above "Accessibility", click it.

Doubleclick in the empty field right of "TextChanged", now you´ll end up in the coding section of Visual Studio.
As you can see, a function has been created, and it´s tied to whenever the event of text being changed happens.
The function is currently empty, but, let´s change that.

Add this line to the function:
label1.Text = "Chars: " + richTextBox1.Text.Count();

This will keep track of the amount of characters in your textbox.
(It´s now already more advanced than the Windows built in Notepad)

If you want to keep the design a bit more consistent, add this line right beneath InitializeComponent(); :
label1.Text = "Chars:";

Your notepad application should look something like this now:


A program really shouldn´t be named "Form1" though, so let´s change that.
Somewhere beneath or above label1.Text = "Chars:"; add the follwing line:
this.Text = "Custom Notepad";
That should keep any n00bs from noticing that you´re using a custom built program. ;-)

Moving on.
Let´s get back to the menu strip.
In the designer, click File and add the following posts: New, Open, Save as, Save and Quit

After that, let´s start with the easy one, double click "Quit".
Yet again, Visual Studio has, as if by magic, created a new function for you, this one controls what happens when you click "Quit".
Naturally, we want the application to exit, so we´ll simply do that (no safety switch with "yes" and "no" this time).
In the function, simply type:
Application.Exit();


Easy enough. Let´s get kicking with the "New" function as well.
Double click it, and you´ll be back in the coding area in a newly created function.
Here, you should use a messagebox with yes/no parameters and what not,
but for now, we´ll stick to being harsh and simply clear all the text.

So, type in the following:
richTextBox1.Text = "";
This will clear the textbox of any text.

Now, adding a function for saving, and opening, is a bit more complex.
Double click "save as".
In the function, type:
saveNew();

Now, visual studio will be mad at you for refering to a function that´s non-existent. Let´s make it happy.
In an empty space, preferably right below "saveNew();" and it´s closing }, create a new function by typing:
saveNew()
{

}



You could just put all the code right in the saveAsToolStripMenuItem_Click function, but in order to learn how to code properly, you should create your own functions, and refer to them when events happen.
This way, you can keep your code a lot cleaner and more understandable.

Now, saveNew doesn´t do anything, let´s make it do some stuff. Type the following inside the brackets of the function:

SaveFileDialog saveFile1 = new SaveFileDialog();
saveFile1.DefaultExt = "*.rtf";
saveFile1.Filter = "RTF Files|*.rtf";

if (saveFile1.ShowDialog() == System.Windows.Forms.DialogResult.OK && saveFile1.FileName.Length > 0)
{
richTextBox1.SaveFile(saveFile1.FileName, RichTextBoxStreamType.PlainText);
}

Now, what this code actually does is almost self-explainatory, but I´ll give a short explenation anyway:
- SaveFileDialog saveFile1 = new SaveFileDialog();- This creates a new instance of a save file dialog.
- saveFile1.DefaultExt = "*.rtf"; - The tells the program that the default extension of the saved file should be rtf
- saveFile1.Filter = "RTF Files|*.rtf"; - This tells the program to only list rtf files in the dialog window, and tells the user that it´s just that, RTF files.
Also, the last bit checks that the user actually clicked ok, and that there was a name given to the file before saving it.

Alright nice, now we can save our files. Let´s create a function to open them as well.
.NET got you covered!

Earlier we used the RichTextBox predefined function SaveFile, and it´s just as easy when opening them.
Just create a new function, and call it private void openFile()
Inside it´s brackets, type (or paste if you´re lazy) the lines below:

OpenFileDialog openFile1 = new OpenFileDialog();

openFile1.DefaultExt = "*.rtf";
openFile1.Filter = "RTF Files|*.rtf";

if (openFile1.ShowDialog() == System.Windows.Forms.DialogResult.OK &&
openFile1.FileName.Length > 0)
{
richTextBox1.LoadFile(openFile1.FileName, RichTextBoxStreamType.PlainText);
}


Next, go back to the design area of the code and double click "Open" in the menu bar.
Here, refer to our newly created function by simply typing openFile();

It should look something like this now:



Ok, so that´s about it for this tutorial. Hope you learned something! :)
Source code from my tutorial can be downloaded here:


notepadtutorial.zip