Bagikan melalui

Tutorial: Membuat aplikasi WPF dengan Visual Basic

  • Artikel

Dalam tutorial ini, Anda akan membuat aplikasi menggunakan Visual Basic di lingkungan pengembangan terpadu (integrated development environment-IDE) Visual Studio. Program Anda akan menggunakan kerangka kerja antarmuka pengguna Windows Presentation Foundation (WPF). Gunakan tutorial ini untuk membiasakan diri dengan banyak alat, kotak dialog, dan perancang yang dapat Anda gunakan dalam Visual Studio.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Membuat proyek
  • Mengonfigurasi jendela dan menambahkan teks
  • Menambahkan tombol dan kode
  • Men-debug dan menguji aplikasi
  • Men-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 Anda sebelumnya telah membangun 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 memerlukan Visual Studio untuk menyelesaikan tutorial ini. Kunjungi halaman pengunduhan Visual Studio untuk mendapatkan versi gratis.

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

Membuat proyek

Saat membuat aplikasi di Visual Studio, Anda pertama-tama 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.

    Screenshot of the Create a new project dialog with W P F entered in the search box and the W P F App (.NET Framework) project template selected.

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

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

    Screenshot shows Solution Explorer with Hello W P F App files.

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

  1. Buka Visual Studio.

  2. Dari jendela awal, pilih Buat proyek baru.

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

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

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, 'Visual Basic' selected in the languages list, and the 'WPF App (.NET Framework)' project template highlighted.

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

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

    Screenshot showing the files in the HelloWPFApp project and solution in the Solution Explorer.

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

Catatan

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

Mengonfigurasi jendela dan menambahkan teks

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

  1. Di Penjelajah Solusi, buka MainWindow.xaml.

  2. Di 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. Luaskan Kontrol WPF Umum atau masukkan Teks di bilah pencarian untuk menemukan TextBlock.

    Screenshot showing the Toolbox window with the TextBlock control highlighted in the list of 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.

    Screenshot showing the TextBlock control positioned on the Greetings form with the guidelines visible.

    Markup XAML akan tampak seperti contoh berikut:

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

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

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

    Pusatkan TextBlock lagi jika perlu

  7. Simpan aplikasi Anda dengan memilih tombol bilah alat Simpan 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.

Menambahkan tombol dan kode

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

  1. Di Toolbox, temukan RadioButton.

    Screenshot showing the Toolbox window with the RadioButton control selected in the list of 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. Tempatkan tombol berdampingan di bawah kontrol TextBlock.

    Screenshot showing the Greetings form with a TextBlock control and two radio buttons.

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

    Screenshot showing the Solution Explorer Properties window for the 'HelloButton' RadioButton.

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

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

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

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

    Jendela Anda akan tampak seperti gambar berikut.

    Screenshot showing the Greetings form with the TextBlock, RadioButtons labeled 'Hello' and 'Goodbye', and the Button control labeled 'Display' all positioned on the form.

  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 mendebug aplikasi untuk mencari kesalahan dan menguji apakah kedua kotak pesan muncul dengan benar. Untuk melihat cara kerja proses ini, langkah pertama dengan sengaja memasukkan kesalahan ke dalam program.

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

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

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

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

  3. Hentikan debugger dengan memilih Debug>Hentikan Penelusuran kesalahan.

    Anda mengubah nama MainWindow.xaml menjadi Greetings.xaml di awal bagian ini. Kode masih mengacu pada MainWindow.xaml sebagai URI pengaktifan 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). Anda sekarang akan melihat jendela Pesan Pembuka untuk aplikasi Anda.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

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

Untuk informasi selengkapnya, lihat Membangun aplikasi WPF (WPF) dan Debug WPF.

Men-debug dengan titik henti

Anda dapat menguji kode selama penelusuran kesalahan 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 Pesan Pembuka, pilih tombol Halo, lalu pilih Tampilkan.

    Garis MessageBox.Show("Hello.") disorot dengan warna kuning. Di bagian bawah IDE, jendela Autos, Locals, dan Watch disatukan di sisi kiri. Jendela Tumpukan Panggilan, Titik Henti, Pengaturan Pengecualian, Perintah, Langsung, dan Output disatukan di sisi kanan.

    Screenshot showing a debug session in Visual Studio with the Code, Diagnostics. Autos, and Call Stack windows open. Execution is stopped at a breakpoint in Greetings.xaml.vb.

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

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

  7. Pilih tombol OK untuk menutup kotak dialog.

  8. Di jendela Pesan Pembuka, pilih tombol radio Selamat Tinggal, lalu pilih tombol Tampilkan.

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

  9. Pilih tombol F5 untuk melanjutkan proses penelusuran kesalahan. Saat kotak dialog muncul, pilih OK untuk menutup kotak dialog.

  10. Tutup jendela aplikasi untuk menghentikan proses penelusuran kesalahan.

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

Membuat versi rilis

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

  1. Pilih Build>Solusi pembersihan 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 di 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 berikutnya

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

Membuat aplikasi Formulir Windows

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