RiffaMedia

Apa Itu MVVM Model dalam Avalonia?

MVVM (Model-View-ViewModel) adalah pola arsitektur yang digunakan untuk memisahkan logika bisnis dari tampilan (UI). Avalonia adalah framework UI lintas platform berbasis .NET yang mendukung MVVM secara native, mirip dengan WPF atau Xamarin.

Struktur MVVM dalam Avalonia

1. Model

Model merepresentasikan data dan logika bisnis aplikasi, seperti mengambil data dari database atau API.

public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

2. ViewModel

ViewModel bertindak sebagai penghubung antara Model dan View. Ia menggunakan INotifyPropertyChanged agar View dapat mendeteksi perubahan data.

Contoh ViewModel (C# - Avalonia)

using System.ComponentModel;

public class MainViewModel : INotifyPropertyChanged
{
    private string _name = "John Doe";

    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name)));
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
}

3. View

View adalah antarmuka pengguna (UI) yang menampilkan data dari ViewModel menggunakan Data Binding.

<Window xmlns="https://github.com/avaloniaui"
        Title="MVVM Avalonia Example">
    <StackPanel>
        <TextBlock Text="{Binding Name}" FontSize="24"/>
        <Button Content="Change Name" Command="{Binding ChangeNameCommand}" />
    </StackPanel>
</Window>

Untuk membuat mvvm di avalonia bisa kita bikin dengan menjalankan command dibawah ini

dotnet new avalonia.mvvm -o NamaApp