Bagikan melalui

Tutorial: Membuat aplikasi Formulir Windows penampil gambar di Visual Studio

  • Artikel

Dalam rangkaian tiga tutorial ini, Anda akan membuat aplikasi Formulir Windows yang memuat gambar dan menampilkannya. Visual Studio Integrated Design Environment (IDE) menyediakan alat yang Anda butuhkan untuk membuat aplikasi. Untuk mempelajari lebih lanjut, lihat Selamat Datang di Visual Studio IDE.

Dalam tutorial pertama ini, Anda mempelajari cara:

  • Membuat proyek Visual Studio yang menggunakan Formulir Windows
  • Menambahkan elemen tata letak
  • Jalankan aplikasi Anda

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan tutorial ini. Kunjungi halaman pengunduhan Visual Studio untuk mendapatkan versi gratis.

Membuat proyek Formulir Windows Anda

Saat Anda membuat penampil gambar, langkah pertama adalah membuat proyek aplikasi Formulir Windows.

  1. Buka Visual Studio.

  2. Di jendela mulai, pilih Buat proyek baru.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Pada jendela Buat proyek baru, cari Formulir Windows. Lalu pilih Desktop dari daftar jenis Proyek.

  4. Pilih templat aplikasi Formulir Windows (.NET Framework) untuk C# atau Visual Basic, lalu pilih Berikutnya.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Catatan

    Jika Anda tidak melihat templat aplikasi Formulir Windows (.NET Framework), Anda dapat menginstalnya dari jendela Buat proyek baru. Di pesan Tidak menemukan yang Anda cari?, pilih link Instal alat dan fitur lainnya.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Selanjutnya, di Visual Studio Installer, pilih pengembangan desktop .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Pilih Ubah di alat penginstal Visual Studio. Anda mungkin diminta untuk menyimpan pekerjaan Anda. Berikutnya, pilih Lanjutkan untuk menginstal beban kerja.

  5. Di jendela Konfigurasikan proyek baru Anda, beri nama proyek Anda dengan PictureViewer, lalu pilih Buat.

  1. Buka Visual Studio.

  2. Di jendela mulai, pilih Buat proyek baru.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Pada jendela Buat proyek baru, cari Formulir Windows. Lalu pilih Desktop dari daftar jenis Proyek.

  4. Pilih templat aplikasi Formulir Windows (.NET Framework) untuk C# atau Visual Basic, lalu pilih Berikutnya.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Catatan

    Jika Anda tidak melihat templat aplikasi Formulir Windows (.NET Framework), Anda dapat menginstalnya dari jendela Buat proyek baru. Di pesan Tidak menemukan yang Anda cari?, pilih link Instal alat dan fitur lainnya.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Selanjutnya, di Visual Studio Installer, pilih pengembangan desktop .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Pilih Ubah di alat penginstal Visual Studio. Anda mungkin diminta untuk menyimpan pekerjaan Anda. Berikutnya, pilih Lanjutkan untuk menginstal beban kerja.

  5. Di jendela Konfigurasikan proyek baru Anda, beri nama proyek Anda dengan PictureViewer, lalu pilih Buat.

    Screenshot shows the Configure your new project dialog box.

Visual Studio membuat solusi untuk aplikasi Anda. Solusi adalah kontainer untuk semua proyek dan file yang diperlukan oleh aplikasi Anda.

Pada titik ini, Visual Studio menampilkan formulir kosong di Windows Form Designer.

Menambahkan elemen tata letak

Aplikasi tampilan gambar Anda berisi kotak gambar, kotak centang, dan empat tombol, yang akan Anda tambahkan dalam tutorial berikutnya. Elemen tata letak mengontrol lokasinya pada formulir. Bagian ini memperlihatkan kepada Anda cara mengubah judul formulir Anda, mengubah ukuran formulir, dan menambahkan elemen tata letak.

  1. Di proyek Anda, pilih Perancang Formulir Windows. Tab tersebut bertuliskan Form1.cs [Design] untuk C# atau Form1.vb [Design] untuk Visual Basic.

  2. Pilih di mana saja di Form1.

  3. Jendela Properti sekarang menampilkan properti untuk formulir. Jendela Properti biasanya berada di kanan bawah Visual Studio. Bagian ini mengontrol berbagai properti, seperti warna latar depan dan latar belakang, teks judul yang muncul di bagian atas formulir, dan ukuran formulir.

    Jika Anda tidak melihat Properti, pilih Tampilkan>Jendela Properti.

  4. Temukan properti Teks di jendela Properti. Bergantung pada cara daftar diurutkan, Anda mungkin perlu menggulir ke bawah. Masukkan nilai Penampil Gambar, lalu pilih Enter.

    Formulir Anda sekarang memiliki teks Penampil Gambar di bilah judulnya.

    Catatan

    Anda dapat menampilkan properti menurut kategori atau menurut abjad. Gunakan tombol pada jendela Properti untuk beralih bolak-balik.

  5. Pilih formulir, lagi. Pilih handel seret kanan bawah formulir. Handelnya adalah persegi putih kecil di sudut kanan bawah formulir.

    Screenshot shows the Forms window with the Drag handle in the lower right.

    Seret handel untuk mengubah ukuran formulir sehingga formulir lebih lebar dan sedikit lebih tinggi. Jika Anda melihat jendela Properti, properti Ukuran telah berubah. Anda juga dapat mengubah ukuran formulir dengan mengubah properti Ukuran.

  6. Di sisi kiri Visual Studio IDE, pilih tab Kotak Alat. Jika Anda tidak melihatnya, pilih Tampilkan>Kotak Alat dari bilah menu atau Ctrl+Alt+X.

  7. Pilih simbol segitiga kecil di samping Kontainer untuk membuka grup.

    Screenshot shows the Containers group in the Toolbox tab.

  8. Klik dua kali TableLayoutPanel di Kotak Alat. Anda juga dapat menyeret kontrol dari kotak alat ke formulir. Kontrol TableLayoutPanel muncul dalam formulir Anda.

    Screenshot show the form with the TableLayoutPanel control added.

    Catatan

    Setelah Anda menambahkan TableLayoutPanel, jika jendela muncul di dalam formulir Anda dengan judul Tugas TableLayoutPanel, klik di mana saja di dalam formulir untuk menutupnya.

  9. Pilih TableLayoutPanel. Anda dapat memverifikasi kontrol apa yang dipilih dengan melihat jendela Properti.

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  10. Dengan TableLayoutPanel dipilih, temukan properti Dock, yang memiliki nilai Tidak Ada. Pilih panah dropdown lalu pilih Isi, yang merupakan tombol besar di tengah menu dropdown.

    Screenshot shows the Properties window with Fill selected.

    Docking mengacu pada bagaimana jendela dilampirkan ke jendela atau area lain.

    TableLayoutPanel sekarang mengisi seluruh formulir. Jika Anda mengubah ukuran formulir lagi, TableLayoutPanel tetap tertambat, dan mengubah ukurannya agar pas.

  11. Dalam formulir, pilih TableLayoutPanel. Di sudut kanan atas, ada tombol segitiga hitam kecil.

    Pilih segitiga untuk menampilkan daftar tugas kontrol.

    Screenshot shows TableLayoutPanel tasks.

  12. Pilih Edit Baris dan Kolom untuk menampilkan kotak dialog Gaya Kolom dan Baris.

  13. Pilih Column1 dan atur ukurannya menjadi 15 persen. Pastikan tombol Persen dipilih.

  14. Pilih Column2 dan atur ke 85 persen.

    Screenshot shows TableLayoutPanel column and row styles.

  15. Dari Tampilkan di bagian atas kotak dialog Gaya Kolom dan Baris, pilih Baris. Atur Row1 ke 90 persen dan Row2 ke 10 persen. Pilih OK untuk menyimpan perubahan Anda.

    TableLayoutPanel Anda sekarang memiliki baris atas besar, baris bawah kecil, kolom kiri kecil, dan kolom kanan besar.

    Screenshot shows the form with resized TableLayoutPanel.

Tata letak Anda selesai.

Catatan

Sebelum menjalankan aplikasi, simpan aplikasi Anda dengan memilih tombol bilah alatSimpan Semua. Atau, untuk menyimpan aplikasi Anda, pilih File>Simpan Semua dari bilah menu, atau tekan Ctrl+Shift+S. Ini adalah praktik terbaik untuk menyimpan lebih awal dan sering.

Jalankan aplikasi Anda

Saat membuat proyek aplikasi Formulir Windows, Anda membuat program yang berjalan. Pada tahap ini, aplikasi Penampil Gambar Anda tidak melakukan banyak hal. Untuk saat ini, menampilkan jendela kosong yang memperlihatkan Penampil Gambar di bilah judul.

Untuk menjalankan aplikasi ini, ikuti langkah-langkah berikut.

  1. Pilih salah satu metode berikut:

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

    Visual Studio menjalankan aplikasi Anda. Jendela dengan judul Penampil Gambar muncul.

    Screenshot shows the Windows Forms app running.

    Lihat toolbar IDE Visual Studio. Tombol lainnya muncul pada toolbar saat Anda menjalankan aplikasi. Tombol ini memungkinkan Anda melakukan hal-hal seperti menghentikan dan memulai aplikasi, dan membantu Anda melacak kesalahan apa pun.

    Screenshot shows the Debugging toolbar where you can stop the app.

  2. Gunakan salah satu metode berikut untuk menghentikan aplikasi Anda:

    • Pada toolbar, pilih tombol Hentikan Penelusuran Kesalahan.
    • Di bilah menu, pilih Debug>Hentikan Penelusuran Kesalahan.
    • Dari keyboard, masukkan Shift+F5.
    • Pilih X di sudut atas jendela Penampil Gambar.

    Saat Anda menjalankan aplikasi dari dalam IDE Visual Studio, aplikasi tersebut disebut penelusuran kesalahan. Anda menjalankan aplikasi untuk menemukan dan memperbaiki bug. Anda mengikuti prosedur yang sama untuk menjalankan dan men-debug program lain. Untuk mempelajari selengkapnya tentang penelusuran kesalahan, lihat Tampilan awal di debugger.

Langkah berikutnya

Lanjutkan ke tutorial berikutnya untuk mempelajari cara menambahkan kontrol ke program Penampil Gambar Anda.

Tutorial bagian 2: Menambahkan kontrol ke Penampil Gambar Anda