How to use GUI Components in Visual C++/CLR
Buttons, PictureBoxes
(Graphics), SaveFileDialog (Saving an image), TimerComponent
How to copy a form is explained
at this website.
Windows Form Applications with GUI can be easily created in Visual C++/CLR.
First, prepare a basic Windows Form
Application according to the way explained at this website.
Figure 1 shows an example created by Visual Studio Express 2013 for Windows
Desktop.
Figure
1
First, how to use a button component will be explained.
Click the Button icon in the Toolbox, then click a point on the MyForm
form to paste a button. Repeat this click-paste operation three times to put
three buttons as shown in Figure 2.
Figure
2
To select buton1, click the “button1” icon
on the “MyForm” form (Figure 3).
Figure
3
Set the Text property to be “Green” (Figure
4) and press the Enter key, then the string “Green” will be
displayed on the button on the form.
If the property pane is
not shown, click the Properties tab on the right or left side. Then the
Properties pane will be shown.
Set the (Name) property to be “buttonGreen” and press the Enter key (Figure 4).
Figure
4
Double click the “Green” button on the “MyForm” form (Figure 4), then the editor of Visual Studio
will prepare automatically the buttonGreen_Click
event handler for a click event of the “Green” button (Figure 5). It must be emphasized that the even handler should be prepared
automatically by double-clicking the button, by which the connection between
the event and the handler is established by Visual Studio.
Figure
5
The name of the “buttonGreen”
button is the one, which is set as the value of the (Name) property (Figure 4).
Insert a code in the buttonGreen_Click
event handler as shown in Figure 6.
Figure
6
The this->BackColor property is the color of
the form.
Press the F5 key to build and run the
program (project). A form window will appear (Figure 7).
Figure
7
Click the “Green” button, then the
corresponding event handler will be called and the form will become green
(Figure 8).
Figure
8
Click the MyForm.h[Design] tab above
the editor pane, then the form will be shown (Figure 9).
Set properties of the “button2” button in a
similar way as explained as for the “button1” button.
Figure
9
The event handler for the “Yellow” button
is prepared as shown in Figure 10.
Figure
10
Build and run the project. When button “Yellow”
is clicked, the form becomes yellow (Figure 11).
Figure
11
Set properties of the “button3” button
similarly as shown in Figure 12.
Figure
12
The event handler of the “Close” button is
prepared as shown in Figure 13.
Figure
13
Then build and run the project. A form
window as shown in Figure 14 will appear.
Figure
14
When the “Close” button is
clicked, the form will disappear and the execution of the project will
end.
How to use graphics in Visual C++/CLR will be explained.
First, create a new project according to
the way explained at this website.
Figure
15
Drag the lower right corner of the form and
copy two buttons (Figure 16).
Figure
16
Set properties Text and (Name) of button1
as shown in Figure 17.
Figure
17
By double-clicking the “Close” button,
prepare the event handler for the click event to the “Close” button and write
the code shown in Figure 18.
Figure
18
Click the MyForm.h[Design] tab, then
the form will be presented (Figure 19). Mark button2 by clicking, then set
properties Test and (Name) of button2 as shown in Figure 19.
Figure
19
Double click the ”Draw” button, then the buttonDraw_Click event handler for the event of clicking
the “Draw” button will be prepared (Figure 20).
Figure
20
Click the PictureBox
icon in Toolbox, then click on the form. A PictureBox component will be copied (Figure 21).
Figure
21
Drag the lower right corner of the Picturebox icon on the form, so that the Picturebox icon covers a sufficient area of the form
(Figure 22).
Figure
22
Dobule click the “Draw” button icon, then the
event handler will be shown again (Figure 23).
Figure
23
Write the codes shown in Figure 24 into the
buttonDraw_Click event handler.
Figure
24
“pictureBox1” is the name of the PictureBox component on the form in the program. This
information can be shown in the Properties pane
(Figure 25). By clicking (not double clicking) and marking the PictureBox icon on the form, the Properties pane will show
information about the marked component.
Figure
25
By the following codes (Figure 24),
int
w = pictureBox1->Width;
int
h = pictureBox1->Height;
the width and height of pictureBox1 are set into w and h. Detailed
information about components, such as a PictureBox,
can be obtained from the Visual Studio help.
A Graphics object, in this case a bitmap
object, is set at the Image property
pictureBox1->Image = gcnew Bitmap(w, h);
A Graphics handler for
pictureBox1->Image is set by the FromImage function.
Graphics ^ g = Graphics::FromImage(pictureBox1->Image);
A brush for painting an area with white
color is created as a Brush object.
Brush ^ bsh = gcnew SolidBrush(Color::White);
Whole area of pictureBox1 is painted calling the FillRectangle
function
g->FillRectangle(bsh, 0, 0, w, h);
A rectangle is drawn
with black pen.
Pen ^ pn = gcnew Pen(Color::Black);
g->DrawRectangle(pn, int(0.1 * w), int(0.1 * h), int(0.8 * w), int(0.8 * h));
In the center, a green disc is painted calling the FillEllipse
function with a green brush.
Brush ^ bshG = gcnew SolidBrush(Color::Green);
g->FillEllipse(bshG, w / 2 - h / 5,
h / 2 - h / 5, 2 * h / 5, 2 * h / 5);
Building the project and run it. A window
form shown in Figure 26 will appear.
Figure
26
Click the ”Draw”
button, then Graphics drawing will be executed (Figure 27).
Figure
27
The program will end, when the “Close”
button is clicked.
Saving the graphics image shown in Figure
27 is easy.
First, to set a file name for an image to
be stored, copy a SaveFileDialog component, with
which a file name can be easily set on Windows OS.
Click and select the SaveFileDualog
icon in Toolbox, and click on anywhere of the form (Figure 28), then
saveFileDialog1 (the name of the SaveFileDialog
component copied into the program) will appear on the pane under the form.
Figure
28
Copy the 3rd
button from Toolbox onto the form. At this point, the name of the button is
button3. Then, set Text and (Name) properties as shown in Figure 29.
Figure
29.
Double click the “Save” button to prepare
the event handler, then write the codes as shown in Figure 30.
Figure
30
By clicking the “Save” button,
the buttonSave_Click event handler is called.
When
saveFileDialog1->ShowDialog();
is executed, a saveFileDialog window will be
shown (Figure 31).
Figure
31
Set a name of the file to store the
graphics image. A file name must be end with “.bmp”.
The saved file can be
opened by an appropriate application, e.g. Painter, after the program
ended.
A timer component provides an event, which is raised periodically. The following sample program uses a
timer component to change the color of the form periodically.
Create a new Windows Form Application
(Figure 32) according to the way explained at this website.
Figure
32
To use a timer component in the program,
click and mark the Timer icon in Toolbox, then click on the form. The timer component which is copied into the program and named timer1
will be shown under the form (Figure 33).
Figure
33
Click the “timer1” icon under the form,
click the Property tab, then the Property pane will
show information about timer1 (Figure 34).
Figure
34
Click the events tab in the Properties
pane, then a list of events will be shown (Figure 35).
Double click the right cell in the “Tick” row.
Figure
35
The timer1__Tick event
handler is automatically prepared by Visual Studio (Figure 36). The Timer1_Tick event handler is called
when the Tick event is raised.
Figure
36
Write the codes as shown in Figure 37.
Figure
37
The this->BackColor property is the color of
the form.
Click the “MyForm.h[Design]” tab, then
the form will be shown (Figure 38).
Figure
38
Visual Studio automatically prepare the MyForm_Load event handler, which will be
called at the start of the program (Figure 39).
Figure
39
Write the following codes in the MyForm_Load event handler (Figure 40).
Figure
40
The timer1->Interval property is the
period between Tick events, which is measured in the
millisecond unit.
Timer1 starts when property
timer1->Enabled is set true.
Now, press the F5 key to build and run the
program. A small green windows form will appear (Figure 41), then the color of
the form will change from green to yellow, then to green, alternatively.
To exit, click the button at the upper
right.
Figure
41
After the program ends, click the “MyForm[Design]”
tab, then the form will be shown (Figure 42).
Figure
42
Click the form, click the “Properties” tab
on the right (or left) side, then information about the “MyForm”
form will be shown. Click the “Events” tab in the
“Properties” pane, then a list of Events will be
shown.
Double click the right cell in the “Click”
row. Visual Studio prepares the MyForm_Click event
handler, which will be called when the form is clicked
(Figure 43).
Figure
43
Write code “this->Close();”
in the MyForm_Click event handler (Figure 44).
Figure
44
Now, when the program running (Figure 41),
click on the form to closed the form.