Bagikan melalui

Tutorial: Membuat aplikasi WPF dengan Visual Basic

Dalam tutorial ini, Anda membuat aplikasi menggunakan Visual Basic di lingkungan pengembangan terintegrasi (IDE) Visual Studio. Program Anda akan menggunakan kerangka kerja UI Windows Presentation Foundation (WPF). Gunakan tutorial ini untuk membiasakan diri dengan banyak alat, kotak dialog, dan desainer yang dapat Anda gunakan dalam Visual Studio.

Dalam tutorial ini, Anda akan belajar cara:

  • Membuat proyek
  • Mengonfigurasi jendela dan menambahkan teks
  • Menambahkan tombol dan kode
  • Men-debug dan menguji aplikasi
  • Debug dengan titik henti
  • Membuat versi rilis

Apa itu WPF?

WPF, atau Windows Presentation Foundation, adalah kerangka kerja antarmuka pengguna (UI) yang membuat aplikasi klien desktop. Platform pengembangan WPF mendukung serangkaian fitur pengembangan aplikasi yang luas, termasuk:

  • Model aplikasi
  • Resources
  • Pengaturan
  • Graphics
  • Tata letak
  • Pengikatan data
  • Documents
  • Keamanan

WPF adalah bagian dari .NET. Jika sebelumnya Anda membuat aplikasi dengan .NET menggunakan ASP.NET atau Formulir Windows, pengalaman pemrograman harus sudah tidak asing lagi. WPF menggunakan Extensible Application Markup Language XAML untuk menyediakan model deklaratif untuk pemrograman aplikasi. Untuk informasi selengkapnya, lihat gambaran umum WPF .NET.

Prasyarat

Anda perlu Visual Studio untuk menyelesaikan tutorial ini. Untuk versi gratis, lihat unduhan Visual Studio.

Membuat proyek

Saat membuat aplikasi di Visual Studio, Anda terlebih dahulu membuat proyek. Dalam tutorial ini, buat proyek Windows Presentation Foundation.

  1. Buka Visual Studio.

  2. Pada jendela mulai, pilih Buat proyek baru.

    Screenshot jendela awal di Visual Studio dengan opsi 'Buat proyek baru' disorot.

  3. Pada jendela Buat proyek baru, cari WPF dan pilih Visual Basic di Semua bahasa daftar. Pilih WPF App (.NET Framework), lalu pilih Baru.

    Screenshot dialog 'Buat proyek baru' dengan 'WPF' dimasukkan di kotak pencarian, 'Visual Basic' dipilih dalam daftar bahasa, dan templat proyek 'WPF App (.NET Framework)' disorot.

  4. Beri nama proyek, HelloWPFApp, dan pilih Buat.

    Visual Studio membuat proyek dan solusi HelloWPFApp. Penjelajah Solusi memperlihatkan berbagai file.

    Screenshot memperlihatkan file dalam proyek dan solusi HelloWPFApp di Penjelajah Solusi.

WPF Designer memperlihatkan tampilan desain dan tampilan XAML MainWindow.xaml dalam tampilan terpisah.

  1. Buka Visual Studio.

  2. Pada jendela mulai, pilih Buat proyek baru.

    Screenshot jendela awal di Visual Studio 2022 dengan opsi 'Create a new project' disorot.

  3. Pada jendela Buat proyek baru, cari WPF dan pilih Visual Basic di Semua bahasa daftar. Pilih WPF App (.NET Framework), lalu pilih Baru.

    Screenshot dialog 'Buat proyek baru' dengan 'WPF' dimasukkan di kotak pencarian, 'Visual Basic' dipilih dalam daftar bahasa, dan templat proyek 'WPF App (.NET Framework)' disorot.

  4. Beri nama proyek, HelloWPFApp, dan pilih Buat.

    Visual Studio membuat proyek dan solusi HelloWPFApp. Penjelajah Solusi memperlihatkan berbagai file.

    Screenshot memperlihatkan file dalam proyek dan solusi HelloWPFApp di Penjelajah Solusi di Visual Studio 2022.

WPF Designer memperlihatkan tampilan desain dan tampilan XAML MainWindow.xaml dalam tampilan terpisah.

Nota

Untuk informasi selengkapnya tentang Extensible Application Markup Language (XAML), lihat gambaran umum XAML untuk WPF.

Mengonfigurasi jendela dan menambahkan teks

Dengan menggunakan jendela Properti , Anda dapat menampilkan dan mengubah opsi untuk item proyek, kontrol, dan item lainnya.

  1. Di Penjelajah Solusi, buka MainWindow.xaml.

  2. Dalam tampilan XAML, ubah nilai properti Window.Title dari Title="MainWindow" menjadi Title="Greetings".

  3. Di sisi kiri Visual Studio IDE, pilih tab Toolbox. Jika Anda tidak melihatnya, pilih Lihat>Toolbox dari bilah menu atau Ctrl+Alt+X.

  4. Perluas Kontrol WPF Common atau masukkan Text di bilah pencarian untuk menemukan TextBlock.

    Screenshot menunjukkan jendela Toolbox dengan kontrol TextBlock disorot dalam daftar Common WPF Controls.

    Screenshot memperlihatkan jendela Kotak Alat pada Visual Studio 2022 dengan kontrol TextBlock disorot dalam daftar Common WPF Controls.

  5. Pilih item TextBlock dan seret ke jendela pada permukaan desain. Anda dapat memindahkan kontrol TextBlock dengan menyeretnya. Gunakan panduan untuk menempatkan kontrol.

    Cuplikan layar memperlihatkan kontrol TextBlock yang diposisikan pada formulir Salam dengan panduan yang terlihat.

    Markup XAML akan terlihat seperti contoh berikut:

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. Dalam tampilan XAML, temukan markup untuk TextBlock dan ubah atribut Teks :

    Text="Select a message option and then choose the Display button."

    Tengahkan TextBlock lagi jika perlu.

  7. Simpan aplikasi Anda dengan memilih tombol Simpan Semua toolbar. Atau, untuk menyimpan aplikasi Anda, pilih Simpan Semua File dari bilah menu, atau tekan Ctrl. Ini adalah praktik terbaik untuk menghemat lebih awal dan sering.

Menambahkan tombol dan kode

Aplikasi Anda menggunakan dua tombol radio dan tombol. Gunakan langkah-langkah ini untuk menambahkannya. Anda juga menambahkan kode Visual Basic ke tombol . Kode itu mengacu pada pemilihan tombol radio.

  1. Di Kotak Alat, temukan RadioButton.

    Tangkapan layar menampilkan jendela Toolbox dengan kontrol RadioButton yang dipilih dalam daftar kontrol umum WPF.

    Screenshot memperlihatkan jendela Kotak Alat di Visual Studio 2022 dengan kontrol RadioButton dipilih dalam daftar Common WPF Controls.

  2. Tambahkan dua kontrol RadioButton ke permukaan desain dengan memilih item RadioButton dan seret ke permukaan desain. Pindahkan tombol dengan memilihnya dan menggunakan tombol panah. Letakkan tombol berdampingan di bawah kontrol TextBlock.

    Cuplikan layar memperlihatkan formulir Salam dengan kontrol TextBlock dan dua tombol radio.

  3. Di jendela Properti untuk kontrol RadioButton kiri, ubah properti Nama di bagian atas jendela Properti menjadi HelloButton.

    Screenshot memperlihatkan jendela Properti Penjelajah Solusi untuk RadioButton 'HelloButton'.

    Screenshot menampilkan jendela Properties di Penjelajah Solusi pada Visual Studio 2022 untuk RadioButton 'HelloButton'.

  4. Di jendela Properti untuk kontrol RadioButton yang tepat, ubah properti Nama menjadi GoodbyeButton.

  5. Perbarui atribut Konten untuk dan ke dan di XAML.

    <Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

  6. Dalam tampilan XAML, temukan markup untuk HelloButton dan tambahkan atribut IsChecked :

    IsChecked="True"

    Atribut IsChecked dengan nilai True berarti helloButton diperiksa secara default. Pengaturan ini berarti bahwa tombol radio selalu dipilih, bahkan ketika program dimulai.

  7. Di Kotak Peralatan , temukan kontrol Tombol . Kemudian seret tombol ke permukaan desain di bawah kontrol RadioButton.

  8. Dalam tampilan XAML, ubah nilai Konten untuk kontrol Tombol dari ke .

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    Jendela Anda harus menyerupai gambar berikut.

    Tangkapan layar memperlihatkan formulir Salam dengan TextBlock, RadioButtons berlabel 'Hello' dan 'Goodbye', serta kontrol Tombol berlabel 'Tampilkan' yang semuanya diposisikan pada formulir.

  9. Pada permukaan desain, klik dua kali tombol Tampilan.

    MainWindow.xaml.vb terbuka, dengan kursor dalam peristiwa.

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub

  10. Tambahkan kode berikut:

    If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

Men-debug dan menguji aplikasi

Selanjutnya, debug aplikasi untuk mencari kesalahan dan menguji bahwa kedua kotak pesan muncul dengan benar. Untuk melihat cara kerja proses ini, langkah pertama sengaja memperkenalkan kesalahan ke dalam program.

  1. Di Penjelajah Solusi, klik kanan pada MainWindow.xaml dan pilih Rename. Ganti nama file menjadi Greetings.xaml.

  2. Mulai debugger dengan menekan F5 atau memilih Debug, lalu Mulai Debugging.

    Jendela Mode Jeda muncul, dan jendela Output menunjukkan bahwa pengecualian terjadi.

    Cuplikan layar memperlihatkan jendela 'Pengecualian Tidak Tertangani' dengan pesan System.IO.Exception yang berbunyi 'Tidak dapat menemukan sumber daya mainwindow.xaml'.

  3. Hentikan debugger dengan memilih DebugHentikan Debugging.

    Anda mengganti nama MainWindow.xaml menjadi Greetings.xaml di awal bagian ini. Kode masih mengacu pada MainWindow.xaml sebagai URI startup untuk aplikasi, sehingga proyek tidak dapat dimulai.

  4. Di Penjelajah Solusi, buka file Application.xaml.

  5. Ubah menjadi .

  6. Mulai debugger lagi (tekan F5). Sekarang Anda akan melihat jendela Greetings aplikasi Anda.

    Cuplikan layar jendela Salam dengan kontrol TextBlock, RadioButtons, dan Button terlihat. Tombol radio 'Halo' dipilih.

  7. Pilih Halo dan tombol Tampilan , lalu Selamat Tinggal dan tombol Tampilkan . Gunakan ikon tutup di sudut kanan atas untuk menghentikan proses debugging.

Untuk informasi selengkapnya, lihat Kompilasi Aplikasi WPF dan Debug WPF.

Debug dengan titik henti

Anda dapat menguji kode selama debugging dengan menambahkan beberapa titik henti.

  1. Buka Greetings.xaml.vb, dan pilih baris berikut:

  2. Tambahkan titik henti dengan menekan F9 atau memilih Debug, lalu Alihkan Titik Henti.

    Lingkaran merah muncul di samping baris kode di margin kiri jendela editor.

  3. Pilih baris berikut: .

  4. Tekan tombol F9 untuk menambahkan titik henti, lalu tekan F5 untuk memulai penelusuran kesalahan.

  5. Di jendela Salam , pilih tombol Halo , lalu pilih Tampilkan.

    Garis disorot dengan warna kuning. Di bagian bawah IDE, jendela Autos, Locals, dan Watch didock bersama di sisi kiri. Call Stack, Breakpoints, Pengaturan Pengecualian, Command, Langsung, dan Jendela Output ditambatkan bersama-sama di sisi kanan.

  6. Pada bilah menu, pilih DebugLangkah Keluar.

    Aplikasi dimulai lagi. Dialog dengan kata "Halo" muncul.

  7. Pilih tombol OK untuk menutup dialog.

  8. Di jendela Ucapan, pilih tombol radio Goodbye, lalu pilih tombol Tampilan.

    Garis disorot dengan warna kuning.

  9. Pilih tombol F5 untuk melanjutkan debugging. Saat dialog muncul, pilih OK untuk menutup dialog.

  10. Tutup jendela aplikasi untuk menghentikan debugging.

  11. Pada bilah menu, pilih DebugNonaktifkan Semua Titik Henti.

Membuat versi rilis

Setelah memverifikasi bahwa semuanya berfungsi, Anda dapat menyiapkan build rilis aplikasi Anda.

  1. Pilih BuildClean solution untuk menghapus file perantara dan file output yang dibuat selama build sebelumnya.

  2. Ubah konfigurasi build untuk HelloWPFApp dari Debug menjadi Rilis dengan menggunakan kontrol dropdown pada toolbar.

  3. Pilih Build Solution.

Selamat atas penyelesaian tutorial ini! Anda dapat menemukan .exe yang Anda buat di bawah solusi dan direktori proyek Anda (...\HelloWPFApp\bin\Release).

Langkah selanjutnya

Lanjutkan ke artikel berikutnya untuk mempelajari cara membuat aplikasi Formulir Windows di Visual Studio dengan Visual Basic.

Buat aplikasi Formulir Windows

Untuk informasi selengkapnya tentang Visual Studio, lihat:

  • Tips produktivitas
  • Last updated on