Bagikan melalui

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

  • Artikel

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 SDK Aplikasi Windows (WinUI 3), Extensible Application Markup Language (XAML), dan bahasa pemrograman C#.

Catatan

WinUI 3 adalah komponen platform UI asli yang dikirim dengan SDK Aplikasi Windows (sepenuhnya dipisahkan dari Windows SDK). Untuk informasi selengkapnya, lihat WinUI 3.

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

Membuat proyek

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

Penting

Visual Studio 2019 hanya mendukung SDK Aplikasi Windows 1.1 dan yang lebih lama. Visual Studio 2022 direkomendasikan untuk mengembangkan aplikasi dengan semua versi SDK Aplikasi Windows.

Templat SDK Aplikasi Windows 1.1.x tersedia dengan menginstal ekstensi Visual Studio (VSIX).

Catatan

Jika Anda sudah menginstal ekstensi SDK Aplikasi Windows Visual Studio (VSIX), hapus instalan sebelum menginstal versi lain. Untuk petunjuk arah, lihat Mengelola ekstensi untuk Visual Studio.

  • Anda dapat menginstal VSIX rilis 1.1.x stabil terbaru dari Visual Studio. Pilih Ekstensi>Kelola Ekstensi, cari SDK Aplikasi Windows, dan unduh ekstensi SDK Aplikasi Windows. Tutup dan buka kembali Visual Studio, dan ikuti perintah untuk menginstal ekstensi. Pastikan untuk menginstal templat untuk SDK Aplikasi Windows 1.1.
  • Atau, Anda dapat mengunduh ekstensi langsung dari Visual Studio Marketplace, dan menginstalnya:

Unduh templat SDK Aplikasi Windows C# SDK VS2019

Setelah ekstensi templat diinstal, Anda dapat membuat proyek pertama Anda. Untuk informasi selengkapnya tentang dukungan Visual Studio 2019, lihat Menginstal alat untuk SDK Aplikasi Windows. Sisa tutorial ini akan mengasumsikan Anda menggunakan Visual Studio 2022.

  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, Dipaketkan (WinUI 3 di Desktop), lalu pilih Berikutnya.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Catatan

    Jika Anda tidak melihat templat proyek Aplikasi Kosong, Paket (WinUI 3 di Desktop), klik tautan Instal alat dan fitur lainnya.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Alat Penginstal Visual Studio diluncurkan. Pilih beban kerja Pengembangan Desktop .NET, lalu di panel Detail penginstalan kotak dialog penginstalan, pilih SDK Aplikasi Windows Templat C# (di bagian bawah daftar). Sekarang pilih Ubah.

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

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

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

    Catatan

    Jika ini pertama kalinya Anda menggunakan Visual Studio untuk membuat aplikasi SDK Aplikasi Windows, kotak dialog Pengaturan mungkin muncul. Pilih Mode pengembang, lalu pilih Ya.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

    Visual Studio menginstal paket Mode Pengembang tambahan untuk Anda. Saat penginstalan paket selesai, tutup kotak dialog Pengaturan.

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

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

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Tinjau Kontrol tombol yang ditumpuk dalam StackPanel di akar Jendela.

    Screenshot showing 'Button' highlighted in the XAML editor.

Mengubah label pada tombol

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

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

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

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

Mengubah penanganan aktivitas

"Penanganan aktivitas" terdengar rumit, tapi itu hanyalah 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 code-behind.

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

    Di sinilah hal-hal menjadi menarik. Penanganan aktivitas default terlihat seperti ini:

    Screenshot showing the C# code for the default myButton_Click event handler.

    Mari kita ubah, sehingga terlihat seperti ini:

    Screenshot showing the C# code for the new async myButton_Click event handler.

    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 menggunakan kontrol ContentDialog untuk menampilkan pesan selamat datang dalam kontrol popup modal dalam jendela saat ini. (Untuk informasi selengkapnya tentang menggunakan Microsoft.UI.Xaml.Controls.ContentDialog, lihat Kelas ContentDialog.)

Jalankan aplikasi

Saatnya untuk membangun, menyebarkan, dan meluncurkan aplikasi SDK Aplikasi Windows "Halo Dunia" untuk melihat seperti apa tampilannya. Berikut caranya.

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

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Atau, Anda dapat memilih Debug>Mulai Penelusuran Kesalahan dari bilah menu atau tekan F5 untuk memulai aplikasi Anda.)

  2. Lihat aplikasi Anda, yang muncul segera setelah layar splash menghilang. Aplikasi akan terlihat mirip dengan gambar ini:

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Pilih tombol Halo Dunia.

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

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  4. Untuk menutup aplikasi, pilih tombol Hentikan Penelusuran Kesalahan 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 SDK Aplikasi Windows, WinUI 3, dan Ide Visual Studio. Untuk mempelajari selengkapnya, lanjutkan dengan tutorial berikut:

Tutorial: Membuat penampil foto sederhana dengan WinUI 3

Baca juga