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 membuat aplikasi "Halo Dunia" yang berjalan di perangkat Windows 10 atau yang lebih baru. Untuk melakukannya, Anda 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 dikirim dengan Windows App SDK. Ini sepenuhnya dipisahkan dari Windows SDK. Untuk informasi selengkapnya, lihat WinUI 3.

Prasyarat

  • Anda memerlukan Visual Studio 2026 atau versi terbaru Visual Studio 2022 untuk menyelesaikan tutorial ini. Untuk versi gratis, kunjungi Halaman Unduhan Visual Studio.
  • 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 penginstal Visual Studio, pilih yang berikut ini:

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

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

Nota

Di Visual Studio 17.10 - 17.12, beban kerja ini disebut pengembangan aplikasi Windows.

Untuk detailnya, lihat Menginstal alat untuk Windows App SDK.

Membuat proyek

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

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

  2. Pada layar Buat proyek baru , masukkan WinUI di kotak pencarian, pilih templat C# untuk Aplikasi Kosong WinUI (Dipaket), lalu pilih Berikutnya.

    Cuplikan layar dialog 'Buat proyek baru' dengan 'WinUI' dimasukkan di kotak pencarian, dan templat proyek WinUI Blank App (Packaged) disorot.

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

    Cuplikan layar dialog 'Konfigurasikan proyek baru Anda' dengan 'HelloWorld' yang dimasukkan di bidang Nama proyek.

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

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

    Cuplikan layar dialog 'Buat proyek baru' di Visual Studio 2022 dengan 'WinUI' dimasukkan di kotak pencarian, dan templat proyek WinUI Blank App (Packaged) disorot.

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

    Cuplikan layar dialog 'Konfigurasikan proyek baru Anda' di Visual Studio 2022 dengan 'HelloWorld' dimasukkan di bidang Nama proyek.

Nota

Jika artikel ini adalah pertama kalinya Anda menggunakan Visual Studio untuk membuat aplikasi Windows App SDK, dialog Pengaturan mungkin muncul. Pilih mode Pengembang, lalu pilih Ya.

Cuplikan layar memperlihatkan dialog Pengaturan dengan opsi untuk mengaktifkan Mode Pengembang.

Visual Studio menginstal paket Mode Pengembang lain untuk Anda. Ketika penginstalan paket selesai, tutup dialog Pengaturan .

Membuat aplikasi

Saatnya untuk mulai mengembangkan. Di sini Anda menambahkan kontrol tombol, menambahkan tindakan ke tombol, lalu menjalankan aplikasi Hello World untuk melihat seperti apa tampilannya.

Menambahkan tombol ke kanvas Desain

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

    Cuplikan layar jendela Penjelajah Solusi memperlihatkan properti, referensi, aset, dan file dalam proyek HelloWorld, dengan file MainWindow.xaml dipilih.

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

    Cuplikan layar memperlihatkan MainWindow.xaml terbuka di Visual Studio IDE. Panel Editor XAML memperlihatkan markup XAML untuk jendela.

  2. Di dalam <Grid> item, mulai ketik <Button. Intellisense menawarkan opsi tombol. Tekan Tab untuk menerima.

    Cuplikan layar memperlihatkan 'Tombol' disorot di editor XAML.

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

    Cuplikan layar jendela Penjelajah Solusi di Visual Studio 2022 memperlihatkan properti, referensi, aset, dan file dalam proyek HelloWorld, dengan file MainWindow.xaml dipilih.

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

    Cuplikan layar memperlihatkan MainWindow.xaml terbuka di IDE Visual Studio 2022. Panel Editor XAML memperlihatkan markup XAML untuk jendela.

  2. Tinjau kontrol Tombol yang tertanam dalam StackPanel di akar dari Jendela.

    Cuplikan layar memperlihatkan 'Tombol' disorot di editor XAML.

Mengubah label pada tombol

  1. Di Editor XAML, ubah nilai Konten Tombol dari nilainya saat ini menjadi "Halo Dunia!".

    Cuplikan layar memperlihatkan kode XAML untuk Tombol di editor XAML, dengan nilai properti Konten diubah menjadi Halo Dunia!

  2. Letakkan kursor Anda di <Button> tag mulai elemen (setelah atribut yang ada, seperti Content) dan mulai ketik Klik. Intellisense menawarkan penanganan aktivitas baru yang disebut Button_Click. Anda bekerja dengan kode tersebut di bagian berikutnya.

    Cuplikan layar memperlihatkan kode XAML untuk Tombol di editor XAML dengan peristiwa klik tombol disorot.

  1. Di Editor XAML, ubah nilai Konten Tombol dari nilainya saat ini menjadi "Halo Dunia!".

    Cuplikan layar memperlihatkan kode XAML untuk Tombol di editor XAML di Visual Studio 2022, dengan nilai properti Konten diubah menjadi Halo Dunia!

  2. Perhatikan bahwa tombol memiliki penanganan aktivitas Klik bernama myButton_Click ditentukan juga. Anda bekerja dengan itu di langkah berikutnya.

    Cuplikan layar memperlihatkan kode XAML untuk Tombol di editor XAML di Visual Studio 2022 dengan peristiwa klik tombol disorot.

Mengubah penanganan aktivitas

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

  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:

    Cuplikan layar memperlihatkan kode C# untuk penanganan aktivitas Button_Click default.

    Mari kita ubah, sehingga terlihat seperti ini:

    Cuplikan layar memperlihatkan kode C# untuk penanganan aktivitas myButton_Click asinkron baru.

    Berikut adalah kode untuk disalin dan ditempelkan:

    private async void Button_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 = ((FrameworkElement)sender).XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

  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:

    Cuplikan layar memperlihatkan kode C# untuk penanganan aktivitas Button_Click default di Visual Studio 2022.

    Mari kita ubah, sehingga terlihat seperti ini:

    Cuplikan layar memperlihatkan kode C# untuk penanganan aktivitas myButton_Click asinkron baru di Visual Studio 2022.

    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 Kelas ContentDialog.

Jalankan aplikasi

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

  1. Gunakan tombol Putar untuk memulai aplikasi di komputer lokal. Teksnya adalah HelloWorld (Paket).

    Cuplikan layar memperlihatkan kotak dropdown terbuka di samping tombol Putar dengan 'HelloWorld (Paket)' dipilih.

    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:

    Cuplikan layar memperlihatkan aplikasi Windows App SDK 'Hello World' yang sedang berjalan.

  3. Pilih tombol Hello World.

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

    Cuplikan layar memperlihatkan aplikasi 'Halo Dunia' yang sedang berjalan dengan popup berjudul 'Hello from HelloWorld'.

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

Konten terkait

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

Sumber daya ini mungkin juga berguna:

  • Last updated on