Bagikan melalui

Tutorial: Membuat aplikasi WPF dengan Visual Basic

Dalam tutorial ini, Anda akan membuat aplikasi menggunakan Visual Basic di lingkungan pengembangan terintegrasi Visual Studio (IDE). 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 di 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 UI (antarmuka pengguna) yang membuat aplikasi klien desktop. Platform pengembangan WPF mendukung serangkaian fitur pengembangan aplikasi yang luas, termasuk model aplikasi, sumber daya, kontrol, grafik, tata letak, pengikatan data, dokumen, dan keamanan.

WPF adalah bagian dari .NET, jadi jika sebelumnya Anda telah membangun aplikasi dengan .NET menggunakan ASP.NET atau Windows Forms, pengalaman pemrograman harus akrab. WPF menggunakan Extensible Application Markup Language XAML untuk menyediakan model deklaratif untuk pemrograman aplikasi. Untuk informasi selengkapnya, lihat Gambaran umum WPF .NET.

Prasyarat

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

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

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 layar Buat proyek baru , cari "WPF", dan pilih Aplikasi WPF (.NET Framework). Pilih Selanjutnya.

    Cuplikan layar dialog Buat proyek baru dengan W P F dimasukkan di kotak pencarian dan templat proyek W P F App (.NET Framework) dipilih.

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

    Visual Studio membuat proyek dan solusi HelloWPFApp. Solution Explorer memperlihatkan berbagai file.

    Cuplikan layar memperlihatkan Penjelajah Solusi dengan file Aplikasi Hello W P F.

Perancang WPF menunjukkan tampilan desain dan tampilan XAML MainWindow.xaml dalam tampilan terpisah.

  1. Buka Visual Studio.

  2. Pada jendela mulai, pilih Buat proyek baru.

    Cuplikan layar jendela mulai di Visual Studio 2022 dengan opsi 'Buat proyek baru' disorot.

  3. Pada jendela Buat proyek baru , cari "WPF" dan pilih Visual Basic di daftar drop-down Semua bahasa . Pilih Aplikasi WPF (.NET Framework), lalu pilih Berikutnya.

    Cuplikan layar 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. Solution Explorer memperlihatkan berbagai file.

    Cuplikan layar memperlihatkan file dalam proyek dan solusi HelloWPFApp di Penjelajah Solusi.

Perancang WPF menunjukkan 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 Kotak Alat . Jika Anda tidak melihatnya, pilih Tampilkan>Kotak Alat dari bilah menu atau Ctrl+Alt+X.

  4. Perluas Kontrol WPF Umum atau masukkan Teks di bilah pencarian untuk menemukan TextBlock.

    Cuplikan layar memperlihatkan jendela Kotak Alat dengan kontrol TextBlock disorot dalam daftar Kontrol WPF Umum.

  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 akan menambahkan kode Visual Basic ke tombol . Kode itu mengacu pada pemilihan tombol radio.

  1. Di Kotak Alat, temukan RadioButton.

    Cuplikan layar memperlihatkan jendela Kotak Alat dengan kontrol RadioButton dipilih dalam daftar Kontrol WPF Umum.

  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.

    Cuplikan layar memperlihatkan jendela Properti Penjelajah Solusi untuk RadioButton 'HelloButton'.

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

  5. Perbarui atribut Konten untuk HelloButton dan GoodbyeButton ke "Hello" dan "Goodbye" 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 Alat, temukan kontrol Button, lalu seret tombol ke permukaan desain di bawah kontrol RadioButton.

  8. Dalam tampilan XAML, ubah nilai Konten untuk kontrol Tombol dari Content="Button" ke Content="Display".

    <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.Button_Click

    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, Anda akan men-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 mainWindow.xaml dan pilih Ganti Nama. Ganti nama file menjadi Greetings.xaml.

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

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

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

    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 Debug>Hentikan 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 StartupUri="MainWindow.xaml" menjadi StartupUri="Greetings.xaml"

  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.

    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 Membangun aplikasi WPF (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: MessageBox.Show("Hello.")

  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: MessageBox.Show("Goodbye.").

  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 MessageBox.Show("Hello.") 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.

    Cuplikan layar memperlihatkan sesi debug di Visual Studio dengan Kode, Diagnostik. Otomatis, dan Jendela Call Stack terbuka. Eksekusi dihentikan pada titik henti di Greetings.xaml.vb.

  6. Pada bilah menu, pilih Debug>Langkah Keluar.

    Aplikasi dimulai lagi. Kotak dialog dengan kata "Halo" muncul.

  7. Pilih tombol OK untuk menutup kotak dialog.

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

    Garis MessageBox.Show("Goodbye.") disorot dengan warna kuning.

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

  10. Tutup jendela aplikasi untuk menghentikan debugging.

  11. Pada bilah menu, pilih Debug>Nonaktifkan Semua Titik Henti.

Membuat versi rilis

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

  1. Pilih Build>Clean 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>Solusi Build.

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 Windows Forms di Visual Studio dengan Visual Basic.

Membuat aplikasi Windows Forms

Untuk informasi selengkapnya tentang Visual Studio, lihat sumber daya ini:

  • Last updated on