Membuat Kalkulator Sederhana Dengan Winform dan C#

Kali ini saya akan mencoba membuat tutorial bagaimana cara membuat aplikasi kalkulator sederhana dengan menggunakan C# Winform. IDE yang akan digunakan pada tutorial ini adalah Visual Studio.

Kurang lebih seperti ini hasilnya:

Tanpa panjang lebar langsung saja kita mulai tutorialnya...

Pertama-tama, kita buat project baru dulu dengan cara klik File > New > Project.

Pilih Windows Forms App lalu beri nama KalkulatorSederhana kemudian klik OK.

Setelah itu akan muncul seperti ini. Kemudian kita akan mendesain UI (User Interface) kalkulatornya.

Di bagian Properties Form1, kita set sebagai berikut

·         BackColor                           : 64; 64; 64

·         FormBorderStyle                : FixedSingle

·         MaximizeBox                     : False

·         Size                                     : 375; 450

·         StartPosition                       : CenterScreen

·         Text                                     : Kalkulator Sederhana

Sehingga akan menjadi seperti ini:

Kemudian drag Textbox dari Toolbar kemudian set Properties seperti ini:

·         (Name)                            : txtDisplay2

·         BackColor                       : 64; 64; 64

·         Borderstyle                      : None

·         Font                                 : Century Gothic; 15,75pt

·         ForeColor                        : White

·         Margin                             : 3; 3; 3; 0

·         ReadOnly                        : True

·         TabStop                           : False

·         TextAlign                        : Right

Sehingga akan menjadi seperti ini:

Kita masukkan satu textbox lagi.

Set Propertiesnya seperti ini:

·         (Name)                              à txtDisplay

·         BackColor                        : DimGray

·         BorderStyle                      : None

·         Font                                  : Century Gothic; 39,75pt

·         ForeColor                         : White

·         Margin                              : 3; 0; 3; 3

·         Multiline                           : True

·         ReadOnly                          : True

·         Size                                   : 329; 72

·         TabStop                             : False

·         Text                                   : 0

·         TextAlign                          : Right

Sehingga akan menjadi seperti ini:

Masukkan TableLayoutPanel, lalu klik Add Column hingga terdapat 4 kolom dan klik Add Row hingga terdapat 5 kolom. Atur ukurannya hingga seperti ini:

Klik Edit Rows and Columns Kemudian set semuannya menjadi Percent:

    

Drag Button ke dalam cell TableLayoutPanel, kemudian set Properties seperti ini:

·         Dock                                               : Fill

·         Margin                                            : 0; 0; 0; 0;

·         FlatStyle                                         : Flat

·         FlatAppearance àBorderSize       : 0

·         Font                                                : Century Gothic; 24pt

·         ForeColor                                       : White

Copy & Paste kemudian set Text menjadi seperti di bawah ini:

Untuk tombol ‘0’, kita set property ColumnSpan menjadi 3, sementara untuk tombol ‘=’ kita set property RowSpan menjadi 2.

====================================================================

Setelah selesai  User Interfacenya, kita masuk ke bagian kode.

Pencet tombol F7 untuk masuk ke bagian kode.

Kita buat variabel untuk menyimpan operand pertama dan operasi yang digunakan dengan cara menambahkan baris ini di atas public Form1()

              private int operand = 0;

        private string operation = null;

Kembali lagi ke bagian desain, pada tombol ‘C’ pada Event kita set event Click menjadi btnC_Click setelah itu tekan enter. Maka akan kembali lagi ke bagian kode.

Saat tombol C (Clear) ditekan kita menginginkan txtDisplay untuk kembali lagi ke posisi 0. Untuk itu, kita hanya perlu memberikan kode

             txtDisplay.Text = "0";

Sementara untuk tombol MC (Memory Clear) kita bisa mengembalikan nilai variabel operand dan operasi ke posisi default dan juga mengembalikan tampilan display ke posisi default. Sekalian juga Property (Name) diberi nama btnMC.

       operand = 0;

       operation = null;

       txtDisplay.Text = "0";

       txtDisplay2.Text = null;

Setelah itu, buat fungsi untuk event click setiap tombol operasi (+, -, x, /) dengan fungsi btnOperasi_Click. Setiap tombol kita beri event click dengan fungsi yang sama agar lebih menyingkat kode. Nanti bisa dideteksi tombol mana yang sedang diclick dengan melihat property Text dari object btn.

        private void btnOperasi_Click(object sender, EventArgs e)

        {

            // Typecast object sender ke Button

            Button btn = (Button)sender;

            string btnText = btn.Text;

            // Mendeteksi jika ditekan tombol '-' maka akan menjadi negatif

            if (txtDisplay.Text == "0" && btnText == "-")

            {

                txtDisplay.Text = "-0";

                return;

            }

            // Menampilkan ke display 2

            txtDisplay2.Text = string.Format("{0} {1}", txtDisplay.Text, btnText);

            // Mengisi variabel operation dengan operasi yang dilakukan

            operation = btnText;

            // Mengubah dari string ke integer lalu mengisikan ke variabel operand

            operand = int.Parse(txtDisplay.Text);

            // Mereset tampilan display utama kembali ke posisi 0

            txtDisplay.Text = "0";

        }

Kemudian kita buat event click baru btnOperand_Click untuk setiap tombol numerik (0-9). Agar tidak terjadi exception overflow, maka kita bisa mengatur agar jika angka yang dimasukkan tidak lebih dari 9 digit. Walaupun cara ini sebenarnya tidak efektif, misalnya saja jika user menghitung 999999999 x 999999999 maka akan tetap terjadi overflow yang ditandai dengan hasil yang aneh, tapi karena hanya untuk latihan ya tidak apa-apa.

        private void btnOperand_Click(object sender, EventArgs e)

        {

            // Typecast object sender ke Button

            Button btn = (Button)sender;

            // Mendeteksi angka negatif

            if (txtDisplay.Text == "0")

            {

                txtDisplay.MaxLength = 9;

                txtDisplay.Text = null;

            }

            else if (txtDisplay.Text == "-0")

            {

                txtDisplay.MaxLength = 10;

                txtDisplay.Text = "-";

            }

            // Agar tidak terjadi overflow

            if (txtDisplay.Text.Length < 9)

                txtDisplay.Text += btn.Text;

        }

Untuk tombol terakhir yaitu tombol “=” bisa diberi event click btnSamaDengan_Click.

        private void btnSamaDengan_Click(object sender, EventArgs e)

        {

            // Jika variabel operation masih default (baru ditekan tombol MC), maka tidak melakukan apa-apa.

            if (operation == null)

                return;

            // Konversi dari string dari display ke integer untuk operand yang kedua

            int operand2 = int.Parse(txtDisplay.Text);

            // Membuat variabel untuk hasil

            int result = 0;

            try

            {

                switch (operation)

                {

                    case "+":

                        result = operand + operand2;

                        break;

                    case "-":

                        result = operand - operand2;

                        break;

                    case "x":

                        result = operand * operand2;

                        break;

                    case "/":

                        result = operand / operand2;

                        break;

                }

            }

            catch (OverflowException ex)

            {

                MessageBox.Show("Angka terlalu besar!", "Overflow Exception");

            }

            catch (DivideByZeroException ex)

            {

                MessageBox.Show("Tidak bisa membagi dengan nol!", "DivideByZero Exception");

            }

            // Melakuan reset variabel operand dan operasi, sama dengan mengklik tombol MC

            btnMC.PerformClick();

            // Menampilkan hasil ke display

            txtDisplay.Text = result.ToString();

        }

Agar sedikit lebih bagus, bisa membuat rounded corner pada display utama. Pertama-tama tambahkan

        using System.Runtime.InteropServices;

di bagian atas. Kemudian tambahkan kode ini:

        [DllImport("Gdi32.dll", EntryPoint = "CreateRoundRectRgn")]

        static extern IntPtr CreateRoundRectRgn(int l, int t, int r, int b, int ew, int eh);

Untuk menggunakannya, bisa dengan menambahkan

        txtDisplay.Region = Region.FromHrgn(CreateRoundRectRgn(txtDisplay.Width, txtDisplay.Height, 0, 0, 15, 15));

tepat dibawah InitializeComponent() pada Constructor Form1:

        public Form1()

        {

            InitializeComponent();

            txtDisplay.Region = Region.FromHrgn(CreateRoundRectRgn(txtDisplay.Width, txtDisplay.Height, 0, 0, 15, 15));

        }

Kode diatas tidak berefek langsung saat di designer, tetapi akan bekerja saat aplikasi di-run.

Jika sudah selesai, Anda bisa mencoba dengan me-run aplikasinya.