Tutorial: Membuat aplikasi Universal Windows Platform pertama Anda di Visual Studio dengan XAML dan C#

Catatan

Jika Anda senang dengan fungsionalitas Anda saat ini di Platform Windows Universal (UWP), maka tidak perlu memigrasikan jenis proyek Anda ke SDK Aplikasi Windows. WinUI 2.x, dan Windows SDK, mendukung jenis proyek UWP. Jika Anda ingin memulai dengan WinUI 3 dan SDK Aplikasi Windows, maka Anda dapat mengikuti langkah-langkah dalam tutorial SDK Aplikasi Windows.

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 Universal Windows Platform (UWP), Extensible Application Markup Language (XAML), dan bahasa pemrograman C#.

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

Membuat proyek

Pertama, buat proyek Universal Windows Platform. 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 Universal Windows di kotak pencarian, pilih templat C# untuk Aplikasi Kosong (Universal Windows), lalu pilih Berikutnya.

   

   Catatan

   Jika Anda tidak melihat templat proyek Aplikasi Kosong (Universal Windows), klik link Instal lebih banyak alat dan fitur.
   
   
   
   Alat Penginstal Visual Studio diluncurkan. Pilih beban kerja Pengembangan Universal Windows Platform, lalu pilih Ubah.
   
   

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

   

4. Terima pengaturan default Versi target dan Versi minimum di kotak dialog Proyek Universal Windows Platform Baru.

   

   Catatan

   Jika ini pertama kalinya Anda menggunakan Visual Studio untuk membuat aplikasi UWP, dialog Aktifkan Mode Pengembang untuk Windows akan muncul. Pilih pengaturan bagi pengembang untuk membuka Pengaturan. Aktifkan mode Pengembang, lalu pilih Ya.
   
   
   
   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 memulai aplikasi "Halo Dunia" untuk melihat seperti apa tampilannya.

Menambahkan tombol ke kanvas Desain

1. Di Penjelajah Solusi, klik dua kali MainPage.xaml untuk membuka tampilan terpisah.

   

   Ada dua panel: Perancang XAML, yang mencakup kanvas desain, dan Editor XAML, tempat Anda dapat menambahkan atau mengubah kode.

   

2. Pilih Toolbox untuk membuka jendela fly-out Toolbox.

   

   (Jika Anda tidak melihat opsi Toolbox, Anda dapat membukanya dari bilah menu. Untuk melakukannya, pilih Lihat>Toolbar. Atau, tekan Ctrl+Alt+X.)

3. Pilih ikon Sematkan untuk memasang jendela Toolbox.

   

4. Pilih kontrol Tombol lalu seret ke kanvas desain.

   

   Jika Anda melihat kode di Editor XAML, Anda akan melihat bahwa Tombol juga telah ditambahkan di sana:

   

Menambahkan label ke tombol

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

   

2. Perhatikan bahwa tombol di Perancang XAML juga berubah.

   

Menambahkan penanganan aktivitas

"Penanganan aktivitas" terdengar rumit, tapi itu hanyalah nama lain untuk kode yang dipanggil saat peristiwa terjadi. Dalam hal ini, kode tersebut menambahkan tindakan ke tombol "Halo Dunia!".

1. Klik dua kali kontrol tombol pada kanvas desain.

2. Edit kode penanganan aktivitas di MainPage.xaml.cs, halaman di belakang kode.

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

   

   Mari kita ubah, sehingga terlihat seperti ini:

   

   Berikut adalah kode untuk disalin dan ditempelkan:

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
      MediaElement mediaElement = new MediaElement();
      var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
      Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
      mediaElement.SetSource(stream, stream.ContentType);
      mediaElement.Play();
   }
   

Apa yang baru saja kita lakukan?

Kode menggunakan beberapa API Windows untuk membuat objek sintesis ucapan lalu memberinya beberapa teks untuk diucapkan. (Untuk informasi selengkapnya tentang menggunakan SpeechSynthesis, lihat System.Speech.Synthesis.)

Jalankan aplikasi

Saatnya untuk membangun, menyebarkan, dan meluncurkan aplikasi UWP "Halo Dunia" untuk melihat seperti apa tampilan dan suaranya. Berikut caranya.

1. Gunakan tombol Putar (memiliki teks Komputer Lokal) untuk memulai aplikasi di komputer lokal.

   

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

   

3. Pilih tombol Halo Dunia.

   Perangkat Windows 10 atau yang lebih baru akan secara harfiah mengatakan, "Halo, Dunia!".

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 UWP dan IDE Visual Studio. Untuk mempelajari selengkapnya, lanjutkan dengan tutorial berikut:

Membuat antarmuka pengguna

Baca juga

• Ringkasan UWP
• Mendapatkan sampel aplikasi UWP