Membangun aplikasi .NET MAUI pertama Anda untuk Windows

Dapatkan langsung dengan .NET MAUI dengan membangun aplikasi lintas platform pertama Anda di Windows.

Pendahuluan

Dalam tutorial ini, Anda akan mempelajari cara membuat dan menjalankan aplikasi MAUI .NET pertama Anda untuk Windows di Visual Studio 2022 (17.3 atau yang lebih baru). Kami akan menambahkan beberapa fitur Toolkit MVVM dari Toolkit Komunitas .NET untuk meningkatkan desain proyek default.

Menyiapkan lingkungan

Jika Anda belum menyiapkan lingkungan Anda untuk pengembangan MAUI .NET, ikuti langkah-langkah untuk Mulai menggunakan .NET MAUI di Windows.

Membuat proyek .NET MAUI

1. Luncurkan Visual Studio, dan di jendela mulai klik Buat proyek baru untuk membuat proyek baru:

2. Di jendela Buat proyek baru, pilih MAUI di menu drop-down Semua jenis proyek, pilih templat Aplikasi .NET MAUI, dan klik tombol Berikutnya :

3. Di jendela Konfigurasikan proyek baru Anda, beri nama proyek Anda, pilih lokasi untuk proyek tersebut, dan klik tombol Berikutnya :

4. Di jendela Informasi tambahan, klik tombol Buat :

5. Tunggu hingga proyek dibuat, dan dependensinya dipulihkan:

6. Di toolbar Visual Studio, tekan tombol Windows Machine untuk membuat dan menjalankan aplikasi.

7. Di aplikasi yang sedang berjalan, tekan tombol Klik saya beberapa kali dan amati bahwa jumlah klik tombol bertambah:

Anda baru saja menjalankan aplikasi .NET MAUI pertama Anda di Windows. Di bagian berikutnya, Anda akan mempelajari cara menambahkan fitur pengikatan dan olahpesan data dari Toolkit MVVM ke aplikasi Anda.

Pemecahan Masalah

Jika aplikasi Anda gagal dikompilasi, tinjau Pemecahan masalah yang diketahui, yang mungkin memiliki solusi untuk masalah Anda.

Menambahkan Toolkit MVVM

Sekarang setelah Anda menjalankan aplikasi .NET MAUI pertama Anda di Windows, mari kita tambahkan beberapa fitur MVVM Toolkit ke proyek untuk meningkatkan desain aplikasi.

1. Klik kanan proyek di Penjelajah Solusi dan pilih Kelola Paket NuGet... dari menu konteks.

2. Di jendela Pengelola Paket NuGet, pilih tab Telusuri dan cari CommunityToolkit.MVVM:

3. Tambahkan versi stabil terbaru dari paket CommunityToolkit.MVVM (versi 8.0.0 atau yang lebih baru) ke proyek dengan mengklik Instal.

4. Tutup jendela Manajer Paket NuGet setelah paket baru selesai diinstal.

5. Klik kanan proyek lagi dan pilih Tambahkan | Kelas dari menu konteks.

6. Di jendela Tambahkan Item Baru yang muncul, beri nama kelas MainViewModel dan klik Tambahkan:

7. Kelas MainViewModel akan menjadi target pengikatan data untuk MainPage. Perbarui untuk mewarisi dari ObservableObject di CommunityToolkit.Mvvm.ComponentModel namespace Layanan ini juga akan mengharuskan pembaruan kelas menjadi public dan partial.

8. Kelas MainViewModel akan berisi kode berikut. Catatan CountChangedMessage menentukan pesan yang dikirim setiap kali tombol Klik saya diklik, memberi tahu tampilan perubahan. Atribut ObservableProperty dan RelayCommand yang ditambahkan ke message anggota dan IncrementCounter adalah generator sumber yang disediakan oleh MVVM Toolkit untuk membuat kode boilerplate MVVM untuk INotifyPropertyChanged implementasi dan IRelayCommand . Implementasi IncrementCounter metode berisi logika dari OnCounterClicked dalam MainPage.xaml.cs, dengan perubahan untuk mengirim pesan dengan pesan penghitung baru. Kami akan menghapus kode tersebut di belakang kode nanti.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            if (count == 1)
                message = $"Clicked {count} time";
            else
                message = $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

Catatan

Anda harus memperbarui namespace di kode sebelumnya agar sesuai dengan namespace layanan dalam proyek Anda.

9. Buka file MainPage.xaml.cs untuk pengeditan dan hapus OnCounterClicked metode dan count bidang .

10. Tambahkan kode berikut ke MainPage konstruktor setelah panggilan ke InitializeComponenent(). Kode ini akan menerima pesan yang dikirim oleh IncrementCounter() di MainViewModel dan akan memperbarui CounterBtn.Text properti dengan pesan baru dan mengumumkan teks baru dengan SemanticScreenReader:

WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});

11. Anda juga perlu menambahkan using pernyataan ke kelas :

using CommunityToolkit.Mvvm.Messaging;

12. Di MainPage.xaml, tambahkan deklarasi namespace ke ContentPage sehingga MainViewModel kelas dapat ditemukan:

xmlns:local="clr-namespace:MauiOnWindows"

13. Tambahkan MainViewModel sebagai BindingContext untuk ContentPage:

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

14. Perbarui aktif Button MainPage untuk menggunakan Command alih-alih menangani Clicked peristiwa. Perintah akan mengikat properti IncrementCounterCommand publik yang dihasilkan oleh generator sumber MVVM Toolkit:

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />

15. Jalankan proyek lagi dan amati bahwa penghitung masih mengalami peningkatan saat Anda mengklik tombol:

16. Saat proyek berjalan, coba perbarui pesan "Hello, World!" di Label pertama untuk membaca "Hello, Windows!" di MainPage.xaml. Simpan file dan perhatikan bahwa XAML Hot Reload memperbarui UI saat aplikasi masih berjalan:

Langkah berikutnya

Pelajari cara membuat aplikasi yang menampilkan data Microsoft Graph untuk pengguna dengan memanfaatkan Graph SDK dalam tutorial .NET MAUI untuk Windows.

Topik terkait

Sumber daya untuk mempelajari .NET MAUI

Menggunakan Microsoft Graph API dengan .NET MAUI di Windows