Tutorial: Membuat aplikasi Windows App SDK pertama Anda di Visual Studio dengan XAML dan C#

Dalam pengenalan lingkungan pengembangan terintegrasi (IDE) Visual Studio ini, Anda akan membuat aplikasi "Halo Dunia" yang berjalan di perangkat Windows 10 atau yang lebih baru. Untuk melakukannya, Anda akan menggunakan templat proyek Windows App SDK (WinUI 3), Extensible Application Markup Language (XAML), dan bahasa pemrograman C#.

Nota

WinUI 3 adalah komponen platform UI asli yang disertakan dengan Windows App SDK (yang sepenuhnya terpisah dari Windows SDK). Untuk informasi selengkapnya, lihat WinUI 3.

Jika Anda belum menginstal Visual Studio, buka halaman unduhan Visual Studio untuk menginstalnya secara gratis.

Prasyarat

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

• Beban kerja dan komponen yang diperlukan untuk mengembangkan dengan WinUI dan Windows App SDK. Untuk memverifikasi atau menginstal beban kerja di Visual Studio, pilih Alat >Dapatkan Alat dan Fitur. Untuk informasi selengkapnya, lihat Mengubah beban kerja atau komponen individual.

  Pada tab Beban Kerja dari penginstal Visual Studio, pilih beban-beban kerja dan komponen-komponen berikut:

  Visual Studio 2022 versi 17.10 dan yang lebih baru

  • Untuk C# pengembangan aplikasi menggunakan Windows App SDK, pilih pengembangan aplikasi Windows.

  Visual Studio 2022 versi 17.1 - 17.9

  • Untuk C# pengembangan aplikasi menggunakan Windows App SDK, pilih .NET Desktop Development.
  • Kemudian di panel Detail Penginstalan dari kotak dialog penginstalan, pilih templat Windows App SDK C# (di dekat bagian bawah daftar).

Membuat proyek

Pertama, buat proyek WinUI 3. Jenis proyek dilengkapi dengan semua file templat yang Anda butuhkan, sebelum Anda bahkan menambahkan apa pun!

1. Buka Visual Studio, dan pada jendela mulai, pilih Buat proyek baru.

2. Pada halaman Buat proyek baru, masukkan WinUI di kotak pencarian, pilih templat C# untuk Aplikasi Kosong, Dikemas (WinUI 3 di Desktop), lalu pilih Berikutnya.

   

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

   

   Nota

   Jika ini pertama kalinya Anda menggunakan Visual Studio untuk membuat aplikasi Windows App SDK, kotak dialog Pengaturan mungkin muncul. Pilih mode Pengembang, lalu pilih Ya.
   
   
   
   Visual Studio menginstal paket Mode Pengembang tambahan untuk Anda. Setelah penginstalan paket selesai, tutup kotak dialog Pengaturan.

Membuat aplikasi

Saatnya untuk mulai mengembangkan. Anda akan menambahkan kontrol tombol, menambahkan tindakan ke tombol, lalu menjalankan aplikasi "Halo Dunia" untuk melihat seperti apa tampilannya.

Menambahkan tombol ke kanvas Desain

1. Di Penjelajah Solusi, klik dua kali MainWindow.xaml untuk membuka editor markup XAML.

   

   Editor XAML adalah tempat Anda dapat menambahkan atau mengubah markup. Tidak seperti proyek UWP, WinUI 3 tidak memiliki tampilan Desain.

   

2. Tinjau kontrol Tombol yang ditumpuk dalam StackPanel di akar jendela .

   

Mengubah label pada tombol

1. Di Editor XAML, ubah nilai Isi Tombol dari "Klik saya" menjadi "Halo Dunia!".

   

2. Perhatikan bahwa tombol memiliki penanganan aktivitas Klik bernama myButton_Click ditentukan juga. Kita akan sampai ke itu di langkah berikutnya.

   

Mengubah penanganan aktivitas

"Penangan peristiwa" terdengar rumit, tetapi ini hanya nama lain untuk kode yang dipanggil saat peristiwa terjadi. Dalam hal ini, ini menambahkan tindakan yang dipicu oleh tombol "Halo Dunia!".

1. Di Penjelajah Solusi, klik dua kali MainWindow.xaml.cs, halaman kode di belakang.

2. Edit kode penanganan aktivitas di jendela editor C# yang terbuka.

   Di sinilah hal-hal menjadi menarik. Pengendali kejadian bawaan terlihat seperti ini:

   

   Mari kita ubah, sehingga terlihat seperti ini:

   

   Berikut adalah kode untuk disalin dan ditempelkan:

   private async void myButton_Click(object sender, RoutedEventArgs e)
   {
       var welcomeDialog = new ContentDialog()
       {
           Title = "Hello from HelloWorld",
           Content = "Welcome to your first Windows App SDK app.",
           CloseButtonText = "Ok",
           XamlRoot = myButton.XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }
   

Apa yang baru saja kita lakukan?

Kode ini menggunakan kontrol ContentDialog untuk menampilkan pesan selamat datang dalam kontrol popup modal di dalam jendela saat ini. (Untuk informasi selengkapnya tentang menggunakan Microsoft.UI.Xaml.Controls.ContentDialog, lihat ContentDialog Class.)

Jalankan aplikasi

Saatnya untuk membangun, menyebarkan, dan meluncurkan aplikasi Windows App SDK "Hello World" untuk melihat seperti apa tampilannya. Begini caranya.

1. Gunakan tombol Putar (memiliki teks HelloWorld (Paket)) untuk memulai aplikasi di komputer lokal.

   

   (Atau, Anda dapat memilih Debug>Mulai Debugging dari bilah menu atau menekan F5 untuk memulai aplikasi Anda.)

2. Lihat aplikasi Anda, yang muncul setelah halaman pembuka menghilang. Aplikasi akan terlihat mirip dengan gambar ini:

   

3. Pilih tombol Hello World.

   Perangkat Windows 10 atau yang lebih baru Anda akan menampilkan pesan yang bertuliskan "Selamat datang di aplikasi Windows App SDK pertama Anda" dengan judul "Halo dari HelloWorld." Klik Ok untuk menutup pesan.

   

4. Untuk menutup aplikasi, pilih tombol Hentikan Debugging di toolbar. (Atau, pilih Debug>Hentikan penelusuran kesalahan dari bilah menu, atau tekan Shift+F5.)

Langkah berikutnya

Selamat atas penyelesaian tutorial ini! Kami harap Anda mempelajari beberapa dasar tentang Windows App SDK, WinUI 3, dan Visual Studio IDE. Untuk mempelajari lebih lanjut, lanjutkan dengan tutorial berikut:

Tutorial: Membuat penampil foto sederhana dengan WinUI 3

Lihat juga

• Menulis aplikasi untuk Windows: Memilih teknologi pengembangan
• gambaran umum Windows App SDK
• contoh Windows App SDK / WinUI 3