C++ Tutorial: Win Forms Made Easy

[FallingTears]

Visual C++ 2005 Express Edition (or later) or Visual Studio 2005 Professional (or later) needed for this Tutorial. The requirements that are needed to run this program are the minimal requirements to run Visual Studio 2005 Professional, Windows XP (w/SP2) or later needed.

This code demonstrates how to display the contents of a text box in a label using a single variable. This is simple C++. A more basic knowledge of C++ is required, or at least an extensive knowledge of Visual Basic (or another Visual Studio programming language) will be a great asset, so that you will understand the basics of Window's Forms and understand why some of these functions work.

Before you start a new project you'll want to enable line numbers and to display some more advanced options (don't worry if you don't understand all of the options I tell you to select). First, we're going to enable the line numbers. I don't remember the exact steps to take in the Visual C++ Express to show line numbers, I'm using Visual Studio instead.

In the File menu click > Tools > Options. A window will pop up. Click the + sign beside Text Editor on the left hand side of the window, then click "All Languages." There is a section close to the bottom of the right hand side that has the caption above some options that says "Display," click on the check box beside "Line numbers."

Simple enough, right? Anyways, now we're going to choose some of the options that Visual Studio (Visual C++ Expres) uses to help you use their IDE more efficiently. Click the + sign beside "Projects and Solutions", then click "General." Don't change the locations for Projects, Project Templates, or Item Templates, instead you're going to make sure all of the check boxes below those three locations are checked. Once all of those check boxes are checked. Click "Ok" at the bottom of the Options window and close Visual Studio (or Visual C++ Express). Then, start Visual Studio (or Visual C++ Express) again. Now we're ready to make our first Windows Forms Application!

Start a New Project in Visual C++ Express, or Visual Studio (and select C++ as the programming language). Click on "CLR," then choose Windows Forms Application from the list that you see (which will be minimal in the Express edition). Name the project whatever you want to name it. I usually name it something meaningful to describe the purpose that this project is intended.

There two sections with text boxes: name and solution. For the name put"Windows Form: Simple C++ Project" and for the solution put "Windows Form: Simple C++ SOlution," then you're ready to start coding your first Windows Forms Application!

The first thing you want to do now, after everything has loaded, is change some of the properties of the Window's Form. Single-click on the form. This is the Design area. On the right hand side of the screen you should see a Solution Explorer and a properties window. On the left side you should see a Toolbox. If you do not, Click View > Solution Explorer. Next, click View > Other Windows > Property Manager. Finally, click View > Toolbox.

In the properties manager, click AZ, this changes from category view to Alphabetical view. To me, this makes the properties so much easier to find. Now, change the following properties to the values that you see:

Font: MS Sans Serif, 12pt
StartPosition: Center
Text: Simple C++ In A Windows Form!

Now, we're going to use a few items from the Toolbox. Pull three labels to the Windows Form. Pull three buttons to the Windows Form. Pull a single Text box to the windows Form. Now, we're going to edit the properties of the controls and place each of the controls in a specific place to make a nice looking GUI (or as close to nice looking as possible)!

Label1 (General Title Label)
Name: xTitleLabel
Font: MS Sans Serif, 16pt, bold

Pull this label to the top of the form. Click on Format > Center in Form > Horizontally.

Label2 (Describes the purpose for the Text box)
Name: xTBoxLabel
Text: Displayed Text

Somewhere close to the top of the form, put this closer to the left hand side of the Form. Don't worry about specifics right now. You can edit the positions of all of your controls later.

Textbox1 (This is the place will contain the text you're going to display in a label)
Name: xContentTextBox

Pull this up beside xTBoxLabel. You can make your alignment's perfect later.

Label3:
Name: xDisplayLabel
Text: (erase label3 from the text area and leave this text blank)

button1:
Name: xDisplayButton
Size: 75,26
Text: &Display (The & makes the D appear to be underlined, it creates an Alt + D function that allows for quick clicking)

button2:
Name: xClearButton
Text: C&lear

button3:
Name: xExitButton
Text: E&xit

Now, click the Display button. Now, push and hold the CTRL button as you click the other two buttons. Next, you're going to click Format > Make Same Size > Both.

Now, click the Display button. Now, push and hold the CTRL button as you click the other two buttons. Next, you're going to click Format > Make Same Size > Both. Click on another control in the form to clear the selection of all three buttons. Now, pull all three buttons close together. Select all three buttons, Click > Format > Center in Form > Horizontally. With all three buttons selected, pull the buttons close to the bottom of the form.

Before we code a working Windows Forms Application, I'm going to show you the code that you should NOT edit, unless you know what you're doing. In the Solution Explorer, click Form1.h (in the headers section) and above that you should see a couple of buttons on the toolbar one is for Design view and the other is for code view. Click code view, you should see something similar to this:

cont. next post

[FallingTears]

Cont. from first post

Do not edit code in this region of the file!

#pragma once


namespace SimpleCProject {

	using namespace System;
	using namespace System::ComponentModel;
	using namespace System::Collections;
	using namespace System::Windows::Forms;
	using namespace System::Data;
	using namespace System::Drawing;

	/// <summary>
	/// Summary for Form1
	///
	/// WARNING: If you change the name of this class, you will need to change the
	///          'Resource File Name' property for the managed resource compiler tool
	///          associated with all .resx files this class depends on.  Otherwise,
	///          the designers will not be able to interact properly with localized
	///          resources associated with this form.
	/// </summary>
	public ref class Form1 : public System::Windows::Forms::Form
	{
	public:
		Form1(void)
		{
			InitializeComponent();
			//
			//TODO: Add the constructor code here
			//
		}

	protected:
		/// <summary>
		/// Clean up any resources being used.
		/// </summary>
		~Form1()
		{
			if (components)
			{
				delete components;
			}
		}
	private: System::Windows::Forms::Button^  xDisplayButton;
	private: System::Windows::Forms::Button^  xClearButton;
	private: System::Windows::Forms::Button^  xExitButton;
	protected: 

	protected: 

	protected: 

	protected: 

	protected: 

	protected: 


	private: System::Windows::Forms::Label^  xTitleLabel;
	private: System::Windows::Forms::Label^  xTBoxLabel;
	private: System::Windows::Forms::TextBox^  xContentTextBox;
	private: System::Windows::Forms::Label^  xDisplayLabel;

	private:
		/// <summary>
		/// Required designer variable.
		/// </summary>
		System::ComponentModel::Container ^components;

#pragma region Windows Form Designer generated code
		/// <summary>
		/// Required method for Designer support - do not modify
		/// the contents of this method with the code editor.
		/// </summary>
		void InitializeComponent(void)
		{
			this->xDisplayButton = (gcnew System::Windows::Forms::Button());
			this->xClearButton = (gcnew System::Windows::Forms::Button());
			this->xExitButton = (gcnew System::Windows::Forms::Button());
			this->xTitleLabel = (gcnew System::Windows::Forms::Label());
			this->xTBoxLabel = (gcnew System::Windows::Forms::Label());
			this->xContentTextBox = (gcnew System::Windows::Forms::TextBox());
			this->xDisplayLabel = (gcnew System::Windows::Forms::Label());
			this->SuspendLayout();
			// 
			// xDisplayButton
			// 
			this->xDisplayButton->Location = System::Drawing::Point(33, 318);
			this->xDisplayButton->Margin = System::Windows::Forms::Padding(4, 5, 4, 5);
			this->xDisplayButton->Name = L"xDisplayButton";
			this->xDisplayButton->Size = System::Drawing::Size(112, 35);
			this->xDisplayButton->TabIndex = 0;
			this->xDisplayButton->Text = L"&Display";
			this->xDisplayButton->UseVisualStyleBackColor = true;
			this->xDisplayButton->Click += gcnew System::EventHandler(this, &Form1::xDisplayButton_Click);
			// 
			// xClearButton
			// 
			this->xClearButton->Location = System::Drawing::Point(163, 318);
			this->xClearButton->Margin = System::Windows::Forms::Padding(4, 5, 4, 5);
			this->xClearButton->Name = L"xClearButton";
			this->xClearButton->Size = System::Drawing::Size(112, 35);
			this->xClearButton->TabIndex = 1;
			this->xClearButton->Text = L"C&lear";
			this->xClearButton->UseVisualStyleBackColor = true;
			this->xClearButton->Click += gcnew System::EventHandler(this, &Form1::xClearButton_Click);
			// 
			// xExitButton
			// 
			this->xExitButton->DialogResult = System::Windows::Forms::DialogResult::Cancel;
			this->xExitButton->Location = System::Drawing::Point(293, 318);
			this->xExitButton->Margin = System::Windows::Forms::Padding(4, 5, 4, 5);
			this->xExitButton->Name = L"xExitButton";
			this->xExitButton->Size = System::Drawing::Size(112, 35);
			this->xExitButton->TabIndex = 2;
			this->xExitButton->Text = L"E&xit";
			this->xExitButton->UseVisualStyleBackColor = true;
			this->xExitButton->Click += gcnew System::EventHandler(this, &Form1::xExitButton_Click);
			// 
			// xTitleLabel
			// 
			this->xTitleLabel->AutoSize = true;
			this->xTitleLabel->Font = (gcnew System::Drawing::Font(L"Microsoft Sans Serif", 14.25F, System::Drawing::FontStyle::Bold, System::Drawing::GraphicsUnit::Point, 
				static_cast<System::Byte>(0)));
			this->xTitleLabel->Location = System::Drawing::Point(84, 9);
			this->xTitleLabel->Name = L"xTitleLabel";
			this->xTitleLabel->Size = System::Drawing::Size(270, 24);
			this->xTitleLabel->TabIndex = 3;
			this->xTitleLabel->Text = L"Windows Form: Simple C++";
			// 
			// xTBoxLabel
			// 
			this->xTBoxLabel->AutoSize = true;
			this->xTBoxLabel->Location = System::Drawing::Point(98, 70);
			this->xTBoxLabel->Name = L"xTBoxLabel";
			this->xTBoxLabel->Size = System::Drawing::Size(116, 20);
			this->xTBoxLabel->TabIndex = 4;
			this->xTBoxLabel->Text = L"Displayed Text:";
			// 
			// xContentTextBox
			// 
			this->xContentTextBox->Location = System::Drawing::Point(220, 67);
			this->xContentTextBox->Name = L"xContentTextBox";
			this->xContentTextBox->Size = System::Drawing::Size(120, 26);
			this->xContentTextBox->TabIndex = 5;
			// 
			// xDisplayLabel
			// 
			this->xDisplayLabel->AutoSize = true;
			this->xDisplayLabel->Location = System::Drawing::Point(219, 185);
			this->xDisplayLabel->Name = L"xDisplayLabel";
			this->xDisplayLabel->Size = System::Drawing::Size(0, 20);
			this->xDisplayLabel->TabIndex = 6;
			// 
			// Form1
			// 
			this->AcceptButton = this->xDisplayButton;
			this->AutoScaleDimensions = System::Drawing::SizeF(9, 20);
			this->AutoScaleMode = System::Windows::Forms::AutoScaleMode::Font;
			this->CancelButton = this->xExitButton;
			this->ClientSize = System::Drawing::Size(438, 409);
			this->Controls->Add(this->xDisplayLabel);
			this->Controls->Add(this->xContentTextBox);
			this->Controls->Add(this->xTBoxLabel);
			this->Controls->Add(this->xTitleLabel);
			this->Controls->Add(this->xExitButton);
			this->Controls->Add(this->xClearButton);
			this->Controls->Add(this->xDisplayButton);
			this->Font = (gcnew System::Drawing::Font(L"Microsoft Sans Serif", 12, System::Drawing::FontStyle::Regular, System::Drawing::GraphicsUnit::Point, 
				static_cast<System::Byte>(0)));
			this->Margin = System::Windows::Forms::Padding(4, 5, 4, 5);
			this->Name = L"Form1";
			this->StartPosition = System::Windows::Forms::FormStartPosition::CenterScreen;
			this->Text = L"Simple C++ In A Windows Form!";
			this->ResumeLayout(false);
			this->PerformLayout();

		}
#pragma endregion

[FallingTears]

Now, we're ready to begin coding our Windows Forms Application! Click on the Form1.h in Design view. Double click on the Exit Button. This will take you to the code view, before we look at what was added in the code view go back to the Design view and double click the Display button, then repeat those steps for the Clear button. Below the #pragma section you're going to see something like this:

	private: System::Void xExitButton_Click(System::Object^  sender, System::EventArgs^  e) {
			}
	private: System::Void xDisplayButton_Click(System::Object^  sender, System::EventArgs^  e) {
			 }
	private: System::Void xClearButton_Click(System::Object^  sender, System::EventArgs^  e) {
			}

};
}

First, let's learn how to close a Windows Forms Application. This should be the first thing that you do, because it's such a common sense task it's easy to forget. The code for that is:

	private: System::Void xExitButton_Click(System::Object^  sender, System::EventArgs^  e) {
				 this->Close();
       }

The "this" keyword refers to the current form. The "->" operator calls certain functions or properties of the form, or of components on the form. The easiest way to close a form is using the Close() function, as you see from the example above you close the form by using the "this" keyword and calling the Close() function. Hence, you have this->Close();.

Next, let's add some functionality to our Display Button. First, we're going to declare a String variable. This String data type is somewhat different than the general string data type:

// using the general string data type

#include <string>

using std::string;

String variables have to have the caret (^) symbol used in front of the variable names, otherwise there will be an error when you build your solution and the program will not execute. When the String variable is declared the contents of the text box will be assigned to the string variable. Then, the contents of the string variable are assigned to the Text property of the Display label. This is done like so:

	private: System::Void xDisplayButton_Click(System::Object^  sender, System::EventArgs^  e) {
				 String ^myText = this->xContentTextBox->Text;
				 this->xDisplayLabel->Text = myText;
			 }

Finally, we're going to give our Clear button some functionality. First, we're going to use the Clear() function to clear the contents of the Text Box. In a Windows Forms Application the Clear() function is part of text box controls, but they're not part of Label controls. Label controls are cleared in a different kind of way. You assign an empty string to the Text property of a label. Clearing the contents of a Text box and label are done like so:

	private: System::Void xClearButton_Click(System::Object^  sender, System::EventArgs^  e) {
				 this->xContentTextBox->Clear();
				 this->xDisplayLabel->Text = "";
			}

Now. You want to Build your solution. After building your solution, you will want to Debug your solution, or run the solution without debugging. To build your solution you Build > Build Solution in the file menu. After your file is done building, click Debug > Start Debugging to run your solution in Debugging mode. Click Debug > Start Without Debugging to run your solution without debugging.

You have your first working Windows Forms Application. Since this is my first tutorial on Newgrounds, someone critique my tutorial and tell me how I can make it better.

FallingTears

[CronoMan]

Nice :) this might be the first decent example of .NET with C++ I've seen