Tutorial: Membuat aplikasi WPF sederhana dengan C#

Dengan menyelesaikan tutorial ini, Anda menjadi terbiasa dengan banyak alat, kotak dialog, dan perancang yang dapat Anda gunakan saat mengembangkan aplikasi dengan Visual Studio. Anda membuat aplikasi "Hello, World", merancang UI, menambahkan kode, dan kesalahan debug, sementara Anda belajar tentang bekerja di lingkungan pengembangan terintegrasi (IDE).

Prasyarat

• Jika Anda belum menginstal Visual Studio, buka halaman pengunduhan Visual Studio untuk menginstalnya secara gratis.
• Pastikan beban kerja pengembangan .NET desktop dipasang. Anda dapat memverifikasi konfigurasi ini di Alat Penginstal Visual Studio.
• Anda dapat menggunakan .NET Framework atau .NET Core untuk tutorial ini. .NET Core adalah kerangka kerja yang lebih baru dan lebih modern. .NET Core membutuhkan Visual Studio 2019 versi 16.3 atau lebih baru.

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.

Mengonfigurasi IDE

Saat Anda meluncurkan Visual Studio, jendela mulai terbuka terlebih dahulu. Pilih Lanjutkan tanpa kode untuk membuka lingkungan pengembangan. Anda melihat jendela alat, menu dan toolbar, dan ruang jendela utama. Jendela alat dipasang di sisi kiri dan kanan jendela aplikasi. Kotak penelusuran, bilah menu, dan toolbar standar terletak di bagian atas. Saat Anda memuat solusi atau proyek, editor dan perancang muncul di ruang pusat jendela aplikasi. Ketika Anda mengembangkan aplikasi, Anda menghabiskan sebagian besar waktu Anda di area pusat ini.

Membuat proyek

Saat Anda membuat aplikasi di Visual Studio, Anda terlebih dahulu membuat proyek dan solusi. Untuk contoh ini, Anda membuat proyek Windows Presentation Foundation (WPF).

1. Buka Visual Studio.

2. Dari jendela awal, pilih Buat proyek baru.

   

3. Pada layar Buat proyek baru, telusuri "WPF", pilih WPF Application, lalu pilih Berikutnya.

   

4. Di layar berikutnya, beri nama proyek, HelloWPFApp, dan pilih Berikutnya.

   

5. Di jendela Informasi tambahan, verifikasi bahwa .NET 8.0 dipilih untuk kerangka kerja target Anda. Kemudian, pilih Buat.

   

Visual Studio membuat proyek dan solusi HelloWPFApp, dan Penjelajah Solusi menampilkan berbagai file. Perancang WPF menampilkan tampilan desain dan tampilan XAML MainWindow.xaml dalam tampilan terpisah. Anda dapat menggeser pemisah untuk menampilkan lebih banyak atau lebih sedikit dari salah satu tampilan. Anda dapat memilih untuk hanya melihat tampilan visual atau hanya tampilan XAML.

Catatan

Untuk informasi selengkapnya tentang XAML (Bahasa Markup Aplikasi eXtensible), lihat halaman Gambaran umum XAML untuk WPF.

Setelah Anda membuat proyek, Anda dapat menyesuaikannya. Untuk melakukannya, pilih Jendela Properti dari menu Tampilan, atau tekan F4. Kemudian, Anda dapat menampilkan dan mengubah opsi untuk item proyek, kontrol, dan item lainnya dalam aplikasi.

Merancang antarmuka pengguna (UI)

Jika perancang tidak terbuka, pilih MainWindow.xaml dan tekan Shift+F7 untuk membuka perancang.

Kami menambahkan tiga jenis kontrol ke aplikasi ini: TextBlock kontrol, dua RadioButton kontrol, dan Button kontrol.

Menambahkan kontrol TextBlock

1. Tekan Ctrl+Q untuk mengaktifkan kotak penelusuran dan ketik Toolbox. Pilih Tampilkan > Kotak Alat dari daftar hasil.

2. Di Toolbox, perluas node Kontrol WPF Umum untuk melihat kontrol TextBlock.

   

3. Tambahkan kontrol TextBlock ke permukaan desain dengan memilih item TextBlock dan seret ke jendela di permukaan desain. Pusatkan kontrol di dekat jendela bagian atas. Anda dapat menggunakan panduan untuk memusatkan kontrol.

   Jendela Anda akan terlihat seperti gambar berikut:

   

   Markup XAML akan terlihat seperti contoh berikut:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

Mengkustomisasi teks dalam blok teks

1. Dalam tampilan XAML, temukan markup untuk TextBlock dan ubah atribut Teks dari TextBox menjadi Select a message option and then choose the Display button.

   Markup XAML akan terlihat seperti contoh berikut:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. Pusatkan TextBlock lagi jika Anda mau, lalu simpan perubahan Anda dengan menekan Ctrl+S atau menggunakan item menu File.

Selanjutnya, Anda menambahkan dua kontrol RadioButton ke formulir.

Menambahkan tombol radio

1. Di Toolbox, temukan kontrol RadioButton.

   

2. Tambahkan dua kontrol RadioButton ke permukaan desain dengan memilih item RadioButton dan seret ke jendela di permukaan desain. Pindahkan tombol (dengan memilihnya dan menggunakan tombol panah) sehingga tombol muncul berdampingan di bawah kontrol TextBlock. Anda dapat menggunakan panduan untuk menyelaraskan kontrol.

   Jendela Anda akan terlihat seperti ini:

   

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

   

4. Di jendela Properti untuk kontrol RadioButton kanan, ubah properti Nama menjadi GoodbyeButton, lalu simpan perubahan Anda.

Selanjutnya, Anda menambahkan teks tampilan untuk setiap kontrol RadioButton. Prosedur berikut memperbarui properti Konten untuk kontrol RadioButton.

Tambahkan teks tampilan untuk setiap tombol radio

1. Perbarui atribut Konten untuk dua tombol HelloButton radio dan GoodbyeButton ke "Hello" dan "Goodbye" di XAML. Markup XAML sekarang akan terlihat mirip dengan contoh berikut:

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

Atur tombol radio yang akan diperiksa secara default

Dalam langkah ini, kami mengatur HelloButton untuk diperiksa secara default sehingga salah satu dari dua tombol radio selalu dipilih.

1. Dalam tampilan XAML, temukan markup untuk HelloButton.

2. Tambahkan atribut IsChecked dan atur ke True. Secara khusus, tambahkan IsChecked="True".

   Markup XAML sekarang akan terlihat mirip dengan contoh berikut:

   <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" IsChecked="True" 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>
   

Elemen UI akhir yang Anda tambahkan adalah kontrol Tombol .

Menambahkan kontrol tombol

1. Di Toolbox, temukan kontrol Tombol, lalu tambahkan ke permukaan desain di bawah kontrol RadioButton dengan tarik ke formulir di tampilan desain. Panduan dapat membantu Anda memusatkan kontrol.

2. Dalam tampilan XAML, ubah nilai Konten untuk kontrol Tombol dari Content="Button" ke Content="Display", lalu simpan perubahannya.

   Jendela Anda harus menyerupai cuplikan layar berikut.

   

   Markup XAML sekarang akan terlihat mirip dengan contoh berikut:

   <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

Menambahkan kode ke tombol tampilan

Kotak aplikasi ini berjalan, kotak pesan muncul setelah pengguna memilih tombol radio, lalu memilih tombol Tampilan. Satu kotak pesan muncul untuk Halo, dan satu lagi muncul untuk Selamat Tinggal. Untuk membuat perilaku ini, Anda menambahkan kode ke Button_Click peristiwa di MainWindow.xaml.cs.

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

   MainWindow.xaml.cs terbuka, dengan kursor di peristiwa Button_Click.

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Saat Anda mengklik dua kali tombol Tampilan , Click="Button_Click" ditambahkan ke XAML.

   Markup XAML sekarang akan terlihat mirip dengan contoh berikut:

   <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Masukkan kode berikut:

   if (HelloButton.IsChecked == true)
   {
        MessageBox.Show("Hello.");
   }
   else if (GoodbyeButton.IsChecked == true)
   {
       MessageBox.Show("Goodbye.");
   }
   

3. Simpan aplikasi.

Men-debug dan menguji aplikasi

Selanjutnya, Anda men-debug aplikasi untuk mencari kesalahan dan menguji bahwa kedua kotak pesan muncul dengan benar. Petunjuk berikut memberi tahu Anda cara membuat dan meluncurkan debugger, tetapi nanti Anda mungkin membaca Membangun aplikasi WPF (WPF) dan Mendebug WPF untuk informasi selengkapnya.

Mengubah nama MainWindow.xaml

Mari kita beri MainWindow nama yang lebih spesifik. Di Penjelajah Solusi, klik kanan pada MainWindow.xaml dan pilih Ganti nama. Ubah nama file menjadi Greetings.xaml.

Temukan dan perbaiki kesalahan

Dalam langkah ini, Anda menemukan kesalahan yang kami timbulkan sebelumnya dengan mengubah nama file MainWindow.xaml .

Mulai penelusuran kesalahan dan temukan kesalahannya

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

   Jendela Mode Pemutus muncul, dan jendela Output menunjukkan bahwa IOException telah terjadi: Tidak dapat menemukan sumber daya mainwindow.xaml.

   

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

Kami mengganti nama MainWindow.xaml menjadi Greetings.xaml di awal tutorial ini, tetapi kodenya masih mengacu pada MainWindow.xaml sebagai URI startup untuk aplikasi, sehingga proyek tidak dapat dimulai.

Tentukan Greetings.xaml sebagai URI startup

1. Di Penjelajah Solusi, buka file App.xaml.

2. Ubah StartupUri="MainWindow.xaml" menjadi StartupUri="Greetings.xaml", dan simpan perubahannya.

Sebagai langkah opsional, ini menghindari kebingungan untuk mengubah judul jendela aplikasi Anda agar sesuai dengan nama baru ini.

1. Di Penjelajah Solusi, buka file Greetings.xaml yang baru saja Anda ganti namanya.

2. Ubah nilai properti Window.Title dari Title="MainWindow" menjadi Title="Greetings", dan simpan perubahannya.

Mulai debugger lagi (tekan F5). Anda sekarang akan melihat jendela Pesan Pembuka untuk aplikasi Anda.

Sekarang tutup jendela aplikasi untuk menghentikan penelusuran kesalahan.

Men-debug dengan titik henti

Anda dapat menguji kode selama penelusuran kesalahan dengan menambahkan beberapa titik henti. Anda dapat menambahkan titik henti dengan memilih Debug>Ganti Titik henti, dengan mengeklik di margin kiri editor di sebelah baris kode yang Anda inginkan untuk membuat titik henti, atau dengan menekan F9.

Menambahkan titik henti

1. Buka Greetings.xaml.cs, dan pilih baris berikut: MessageBox.Show("Hello.")

2. Tambahkan titik henti dari menu dengan memilih Debug, lalu Ganti Titik henti.

   Lingkaran merah muncul di sebelah baris kode di margin paling 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 Greetings, pilih tombol radio Halo, lalu pilih tombol Tampilkan.

   Garis MessageBox.Show("Hello.") disorot dengan warna kuning. Di bagian bawah IDE, jendela Autos, Locals, dan Watch disatukan di sisi kiri, dan jendela Tumpukan Panggilan, Titik henti, Pengaturan Pengecualian, Perintah, Immediate, dan Output ditambahkan bersama-sama di sisi kanan.

   

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

   Aplikasi melanjutkan eksekusi, dan kotak pesan dengan kata "Halo" muncul.

7. Pilih tombol OK pada kotak pesan untuk menutupnya.

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 pesan muncul, pilih tombol OK pada kotak pesan untuk menutupnya.

10. Tutup jendela aplikasi untuk menghentikan proses penelusuran kesalahan.

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

Menampilkan representasi elemen antarmuka pengguna

Di aplikasi yang sedang berjalan, Anda akan melihat widget yang muncul di bagian atas jendela Anda. Widget adalah pembantu runtime yang menyediakan akses cepat ke beberapa fitur penelusuran kesalahan yang bermanfaat. Pilih tombol pertama, Buka Live Visual Tree. Anda akan melihat jendela dengan pohon yang berisi semua elemen visual halaman Anda. Perluas node untuk menemukan tombol yang Anda tambahkan.

Membangun versi rilis aplikasi

Sekarang setelah Anda memverifikasi bahwa semuanya berfungsi, Anda dapat menyiapkan versi rilis aplikasi.

1. Pada menu utama, pilih Build>Solusi pembersihan untuk menghapus file perantara dan file output yang dibuat selama build sebelumnya. Langkah ini tidak diperlukan, tetapi akan membersihkan output build debug.

2. Ubah konfigurasi build untuk HelloWPFApp dari Debug menjadi Rilis dengan menggunakan kontrol dropdown pada toolbar (saat ini tertulis "Debug").

3. Membangun solusi dengan memilih Build>Membangun Solusi.

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

Langkah berikutnya

Selamat atas penyelesaian tutorial ini! Untuk mempelajari lebih lanjut, lanjutkan dengan tutorial berikut.

Lanjutkan dengan tutorial WPF lainnya

Baca juga

• Tips produktivitas