Membangun aplikasi WinUI pertama Anda

Buat aplikasi WinUI pertama Anda dan lihat aplikasi ini hidup di Windows. Panduan singkat ini memandu Anda dari penyiapan alat hingga menjalankan aplikasi, lalu memandu Anda melalui pembaruan antarmuka pertama Anda.

Sebelum Anda mulai

Apa yang akan Anda pelajari

  • Pilih dan siapkan alat pengembangan Anda.
  • Buat dan jalankan aplikasi WinUI.
  • Perbarui antarmuka dan lihat perubahan Anda di aplikasi yang sedang berjalan.

Pilih alat pengembangan Anda

Ikuti salah satu langkah yang direkomendasikan dalam panduan cepat ini:

  • winapp CLI: Bekerja melalui terminal di editor pilihan Anda. Alur kerja baris perintah ini juga berfungsi dengan baik untuk pemrograman berbasis agen.
  • Visual Studio: Gunakan pengalaman pengembangan dan penelusuran kesalahan terintegrasi.

Jika alat Anda sudah terinstal, kunjungi Membuat aplikasi pertama Anda.

Menginstal alat

  1. Aktifkan Mode Pengembang. Anda dapat membuka setelannya melalui Setelan pengembang.

  2. Instal .NET 10 SDK dan Windows App Development CLI. Jika Anda menggunakan WinGet, jalankan:

    winget install --id Microsoft.DotNet.SDK.10 --exact --source winget
    winget install --id Microsoft.WinAppCli --exact --source winget
    

    Lewati penginstalan jika alat yang diperlukan sudah diinstal.

  3. Buka terminal baru agar terminal mengenali perintah yang telah diinstal, lalu periksa versinya:

    dotnet --version
    winapp --version
    

    Gunakan .NET SDK 10 atau yang lebih baru dan winapp CLI 0.6 atau yang lebih baru untuk alur kerja ini.

Note

winapp CLI dalam pratinjau publik. winapp new mengatur templat proyek WinUI, tetapi tidak menginstal SDK .NET. Lihat pengumuman CLI 0.6 untuk mengetahui proyek baru dan perintah run.

Membuat aplikasi pertama Anda

Gunakan alur kerja yang Anda instal di atas untuk membuat dan meluncurkan proyek.

Dari folder tempat Anda menyimpan proyek, jalankan:

winapp new --name MyWinUIApp --template winui --use-defaults
cd MyWinUIApp
winapp run

winapp new membuat aplikasi WinUI kosong. winapp run membangun proyek dan menjalankannya; Anda tidak memerlukan perintah build atau registrasi paket terpisah.

Aplikasi Anda terbuka di jendela desktop. Lanjutkan ke Lakukan perubahan di bawah ini.

Membuat perubahan

Pertahankan proyek yang baru saja Anda buat. Tambahkan pesan pada antarmuka yang sudah ada tersebut:

  1. Tutup aplikasi yang sedang berjalan. Buka MainPage.xaml di editor Anda. Jika templat Anda tidak berisi file tersebut, buka yang dirujuk oleh MainWindow.xaml sebagai gantinya.

  2. Temukan panel tata letak yang menyimpan konten aplikasi. Dalam templat kosong CLI saat ini, MainPage.xaml berisi <Grid /> yang kosong. Ganti kisi kosong tersebut dengan:

    <Grid>
        <TextBlock
            Text="Hello, WinUI!"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" />
    </Grid>
    

    Jika panel sudah berisi kontrol, tambahkan hanya TextBlock di dalam panel tersebut. Pertahankan kontrol, nama, dan penanganan aktivitas yang ada. Jangan ganti di sekitar atau PageWindow, atau bilah bingkai dan judul di MainWindow.xaml.

  3. Simpan file tersebut. Jalankan winapp run lagi dari folder proyek, atau tekan F5 di Visual Studio.

Selamat! Anda telah membuat, menjalankan, dan memperbarui aplikasi WinUI pertama Anda. Jendela sekarang menampilkan Halo, WinUI!

Troubleshooting

Problem Apa yang harus diperiksa
winapp atau dotnet tidak dikenali. Buka kembali terminal setelah penginstalan. Gunakan perintah versi di tab CLI untuk mengonfirmasi bahwa kedua alat tersedia.
winapp new tidak dikenali. Alur kerja ini memerlukan winapp CLI 0.6 atau yang lebih baru. Perbarui CLI menggunakan metode penginstalan yang Anda pilih.
Templat WinUI tidak muncul di Visual Studio. Buka penginstal Visual Studio, pilih Ubah, dan konfirmasikan bahwa beban kerja pengembangan aplikasi WinUI diinstal. Mulai ulang Visual Studio setelahnya.
Build melaporkan kesalahan SDK atau pemulihan. Periksa prasyarat alur kerja yang dipilih dan kesalahan pertama dalam output build. Gunakan dukungan SDK Aplikasi Windows untuk memeriksa persyaratan versi sebelum mengubah properti proyek.
Penyebaran melaporkan bahwa Mode Pengembang dinonaktifkan. Aktifkan Mode Pengembang, lalu jalankan aplikasi lagi.
Pesan baru Anda tidak muncul. Simpan file XAML dan jalankan ulang proyek. Dalam templat dengan MainPage.xaml, tambahkan pesan ke halaman tersebut daripada mengganti bingkai hosting jendela.

Langkah berikutnya

Tutorial Catatan menggunakan proyek terpisah WinUINotes untuk mengajar halaman, navigasi, pengikatan data, dan penyimpanan lokal. Anda juga dapat menemukan contoh kontrol yang berfokus pada topik tertentu dalam Sampel kode dan Galeri WinUI.