Tutorial MAUI .NET - Bangun aplikasi multi-platform pertama Anda di C #

Windows macOS

Edit kode Anda

Saat mengembangkan aplikasi dengan .NET MAUI, XAML Hot Reload tersedia saat Anda sedang men-debug aplikasi. Ini berarti Anda dapat mengubah antarmuka pengguna (UI) XAML saat aplikasi sedang berjalan dan UI akan diperbarui secara otomatis.

Kembali ke Visual Studio dan biarkan aplikasi berjalan. Di Penjelajah Solusi, klik dua kali file MainPage.xaml di bawah proyek MyFirstMauiApp. Jika Anda tidak melihat panel Penjelajah Solusi, pilih Tampilan > Penjelajah Solusi dari menu utama (atau tekan CTRL+ALT+L).

Panel Penjelajah Solusi dengan file MainPage.xaml disorot.

Kembali ke file MainPage.xaml di VS Code dan biarkan aplikasi berjalan.

Panel Penjelajah Solusi dengan file MainPage.xaml disorot.

Saat ini, Text dari Label kedua pada baris 17 diatur untuk menampilkan Hello, World! seperti yang ditunjukkan pada kode berikut:

MainPage.xaml
<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Perbarui teks untuk membaca Hello, .NET MAUI!:

MainPage.xaml
<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

UI aplikasi diperbarui secara otomatis saat Anda membuat perubahan.

Windows menjalankan aplikasi .NET MAUI. Pesan 'Halo, .NET MAUI!' ditampilkan karena diperbarui dengan Hot Reload.

Mac menjalankan aplikasi .NET MAUI. Pesan 'Halo, .NET MAUI!' ditampilkan karena diperbarui dengan Hot Reload.

Saat mengembangkan aplikasi dengan .NET MAUI, Anda juga dapat menggunakan .NET Hot Reload untuk memuat ulang kode C# Anda. Mari ubah logika dalam aplikasi agar ketika tombol diklik, hitungannya bertambah 10, dan bukan 1.

Buka MainPage.xaml.cs (file ini berada di bawah MainPage.xaml, atau Anda dapat mengklik kanan dan memilih Lihat Kode dari menu).

Pilihan menu menurun untuk menampilkan kode di belakang MainPage.xaml

Metode OnCounterClicked pada file tersebut saat ini memiliki kode berikut:

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Perbarui count++; menjadi bertambah 10 dengan mengubahnya menjadi count += 10;.

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Untuk menerapkan perubahan kode Anda, simpan file dan pilih tombol Hot Reload di Visual Studio atau pilih ALT+F10.

Pilihan menu menurun untuk menampilkan kode di belakang MainPage.xaml

Pilih tombol Klik ini dan lihat hitungannya bertambah 10. Bagus! Anda dapat menutup aplikasi yang sedang berjalan sekarang.

Penghitung diperbarui dalam kelipatan 10

Melanjutkan