Tutorial: Menambahkan kode ke aplikasi Windows Forms penampil gambar (.NET Framework)

Dalam rangkaian tiga tutorial ini, Anda membuat aplikasi Windows Forms yang memuat gambar dan menampilkannya. Visual Studio Integrated Design Environment (IDE) menyediakan alat yang Anda butuhkan untuk membuat aplikasi.

Kontrol menggunakan kode C# atau Visual Basic untuk mengambil tindakan yang terkait dengannya.

Dalam tutorial ketiga ini, Anda mempelajari cara:

• Menambahkan penanganan aktivitas untuk kontrol Anda
• Menulis kode untuk membuka kotak dialog
• Menulis kode untuk kontrol lainnya
• Jalankan aplikasi Anda

Untuk membuat Aplikasi Windows Forms baru dengan .NET, ikuti tutorial Membuat aplikasi Windows Forms dengan .NET. Lihat Panduan Desktop di Windows Forms .NET untuk mempelajari selengkapnya.

Prasyarat

• Tutorial ini dibangun pada tutorial sebelumnya, Membuat aplikasi penampil gambar dan Menambahkan kontrol UI ke penampil gambar. Selesaikan terlebih dahulu dan mulailah dengan proyek yang Anda buat untuk tutorial tersebut.

Menambahkan penanganan aktivitas untuk kontrol Anda

Di bagian ini, tambahkan penanganan peristiwa untuk kontrol yang Anda tambahkan di tutorial kedua, Tambah kontrol ke aplikasi penampil gambar. Aplikasi Anda memanggil penanganan aktivitas saat tindakan terjadi, seperti memilih tombol.

1. Buka Visual Studio. Proyek Penampil Foto Anda muncul di bawah Buka item terbaru.

2. Di Windows Forms Designer, klik dua kali tombol Tampilkan gambar. Anda dapat memilih tombol Tampilkan gambar pada formulir, lalu tekan Enter.

   IDE Visual Studio membuka tab di jendela utama. Untuk C#, tab diberi nama Form1.cs. Jika Anda menggunakan Visual Basic, tab diberi nama Form1.vb.

   Tab ini menampilkan file kode di belakang formulir.

   

   Nota

   Tab Form1.vb Anda mungkin menampilkan showButton sebagai ShowButton.

3. Fokus pada bagian kode ini.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

4. Pilih lagi tab Windows Forms Designer, lalu klik dua kali tombol Hapus gambar untuk membuka kodenya. Ulangi untuk dua tombol yang tersisa. Setiap kali, IDE Visual Studio menambahkan metode baru ke file kode formulir.

5. Klik dua kali kontrol Kotak Centang di Windows Forms Designer untuk menambahkan metode checkBox1_CheckedChanged(). Saat Anda memilih atau mengosongkan kotak centang, metode ini dipanggil.

   Cuplikan berikut menunjukkan kode baru yang Anda lihat di editor kode.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
   }
   
   private void backgroundButton_Click(object sender, EventArgs e)
   {
   }
   
   private void closeButton_Click(object sender, EventArgs e)
   {
   }
   
   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
   
   End Sub
   
   Private Sub backgroundButton_Click() Handles backgroundButton.Click
   
   End Sub
   
   Private Sub closeButton_Click() Handles closeButton.Click
   
   End Sub
   
   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
   
   End Sub
   

---

Metode, termasuk penanganan aktivitas, dapat memiliki nama apa pun yang Anda inginkan. Saat Anda menambahkan penanganan aktivitas dengan IDE, itu membuat nama berdasarkan nama kontrol dan peristiwa yang sedang ditangani.

Misalnya, peristiwa Click untuk tombol bernama showButton disebut showButton_Click() atau ShowButton_Click(). Jika Anda ingin mengubah nama variabel kode, klik kanan variabel dalam kode lalu pilih Refaktor>Ganti Nama. Tindakan ini mengganti nama semua instans variabel tersebut dalam kode. Untuk informasi selengkapnya, lihat Mengganti nama.

Menulis kode untuk membuka kotak dialog

Tombol Tampilkan gambar menggunakan komponen OpenFileDialog untuk menampilkan file gambar. Prosedur ini menambahkan kode yang digunakan untuk memanggil komponen tersebut.

IDE Visual Studio menawarkan alat canggih yang disebut IntelliSense. Saat Anda mengetik, IntelliSense menyarankan kemungkinan kode.

1. Di Windows Forms Designer, klik dua kali tombol Tampilkan gambar. IDE memindahkan kursor Anda di dalam metode showButton_Click() atau ShowButton_Click().

2. Ketik i pada baris kosong antara dua kurung kurawal { }atau antara Private Sub... dan End Sub. Jendela IntelliSense terbuka.

   

3. Jendela IntelliSense harus menyoroti kata if. Pilih tombol Tab dua kali untuk menyisipkan cuplikan if.

4. Pilih benar lalu ketik op untuk menimpa C# atau Op untuk Visual Basic.

   

   IntelliSense menampilkan openFileDialog1.

5. Pilih Tab untuk menambahkan openFileDialog1.

6. Ketik titik (.) atau titik, segera setelah openFileDialog1. IntelliSense menawarkan semua properti dan metode komponen OpenFileDialog. Mulai ketik ShowDialog dan pilih tab . Metode ShowDialog() memperlihatkan kotak dialog Buka File.

7. Tambahkan tanda kurung () segera setelah "g" di ShowDialog. Kode Anda harus openFileDialog1.ShowDialog().

8. Untuk C#, tambahkan spasi, lalu tambahkan dua tanda sama dengan (==). Untuk Visual Basic, tambahkan spasi, lalu gunakan tanda sama dengan tunggal (=).

9. Tambahkan spasi lain. Gunakan IntelliSense untuk memasukkan DialogResult.

10. Ketik titik untuk membuka nilai DialogResult di jendela IntelliSense. Masukkan huruf O dan pilih Tab tombol untuk menyisipkan OK.

    Nota

    Baris pertama kode harus selesai. Untuk C#, harus mirip dengan yang berikut ini.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    Untuk Visual Basic, harus sebagai berikut.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Tambahkan baris kode berikut.

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Anda dapat menyalin dan menempelkan atau menggunakan IntelliSense untuk menambahkannya. Metode showButton_Click() akhir Anda akan terlihat mirip dengan kode berikut.

    C#

    private void showButton_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    

    VB

    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

---

1. Tambahkan komentar berikut ke kode Anda.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the
       // picture that the user chose.
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the
       ' picture that the user chose.
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If
   
   End Sub
   

---

Ini adalah praktik terbaik untuk selalu mengomentari kode Anda. Komentar kode membuatnya lebih mudah untuk memahami dan memelihara kode Anda di masa mendatang.

Menulis kode untuk kontrol lainnya

Jika Anda menjalankan aplikasi sekarang, Anda dapat memilih Tampilkan gambar. Penampil Gambar membuka kotak dialog Buka File, di mana Anda bisa memilih gambar untuk ditampilkan.

Di bagian ini, tambahkan kode untuk penanganan aktivitas lainnya.

1. Di Windows Forms Designer, klik dua kali Hapus tombol gambar. Untuk C#, tambahkan kode dalam kurung kurawal. Untuk Visual Basic, tambahkan kode antara Private Sub dan End Sub.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
       // Clear the picture.
       pictureBox1.Image = null;
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
       ' Clear the picture.
       PictureBox1.Image = Nothing
   End Sub   
   

2. Klik dua kali tombol Atur warna latar belakang dan tambahkan kode.

   C#

   private void backgroundButton_Click(object sender, EventArgs e)
   {
       // Show the color dialog box. If the user clicks OK, change the
       // PictureBox control's background to the color the user chose.
       if (colorDialog1.ShowDialog() == DialogResult.OK)
           pictureBox1.BackColor = colorDialog1.Color;
   }
   

   VB

   Private Sub backgroundButton_Click() Handles backgroundButton.Click
       ' Show the color dialog box. If the user clicks OK, change the
       ' PictureBox control's background to the color the user chose.
       If ColorDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.BackColor = ColorDialog1.Color
       End If
   End Sub
   

3. Klik dua kali tombol Tutup dan tambahkan kode.

   C#

   private void closeButton_Click(object sender, EventArgs e)
   {
       // Close the form.
       this.Close();
   }
   
   

   VB

   Private Sub closeButton_Click() Handles closeButton.Click
       ' Close the form.
       Close()
   End Sub  
   

4. Klik dua kali kotak centang Stretch dan tambahkan kode.

   C#

   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
       // If the user selects the Stretch check box, 
       // change the PictureBox's
       // SizeMode property to "Stretch". If the user clears 
       // the check box, change it to "Normal".
       if (checkBox1.Checked)
           pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
       else
           pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
   }
   

   VB

   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
       ' If the user selects the Stretch check box, change 
       ' the PictureBox's SizeMode property to "Stretch". If the user 
       ' clears the check box, change it to "Normal".
       If CheckBox1.Checked Then
           PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
       Else
           PictureBox1.SizeMode = PictureBoxSizeMode.Normal
       End If
   End Sub   
   

Jalankan aplikasi Anda

Anda dapat menjalankan aplikasi kapan saja saat menulisnya. Setelah Anda menambahkan kode di bagian sebelumnya, Penampil Gambar selesai. Seperti dalam tutorial sebelumnya, gunakan salah satu metode berikut untuk menjalankan aplikasi Anda:

• Pilih kunci F5.
• Pada bilah menu, pilih Debug>Mulai Debugging.
• Pada toolbar, pilih tombol Mulai.

Jendela dengan judul Penampil Gambar muncul. Uji semua kontrol.

1. Pilih tombol Atur warna latar belakang. Kotak dialog Warna terbuka.

   

2. Pilih warna untuk mengatur warna latar belakang.

3. Pilih Tampilkan gambar untuk menampilkan gambar.

   

4. Pilih dan batalkan pilihan Stretch.

5. Pilih tombol Hapus gambar untuk memastikan tampilan bersih.

6. Pilih Tutup untuk keluar dari aplikasi.

Selamat! Anda menyelesaikan serangkaian tutorial ini. Anda menyelesaikan tugas pemrograman dan desain ini di Visual Studio IDE:

• Membuat proyek Visual Studio yang menggunakan Windows Forms
• Menambahkan tata letak untuk aplikasi tampilan gambar
• Menambahkan tombol dan kotak centang
• Menambahkan kotak dialog
• Menambahkan penanganan aktivitas untuk kontrol Anda
• Kode C# atau Visual Basic tertulis untuk menangani peristiwa

Langkah berikutnya

Lanjutkan belajar dengan seri tutorial lain tentang cara membuat kuis matematika berwaktu.

Tutorial 2: Membuat kuis matematika berwaktu