Pada artikel ini kita akan membahas konsep data binding dan MVVM pattern yang ada pada .NET MAUI, sebelumnya buat project dengan nama BelajarMAUI.MobileApp pada Visual Studio 2022. Untuk instalasi IDE dan paket .NET Multi-platform anda dapat membaca artikel sebelumnya pada link berikut.
Data Binding pada .NET MAUI
.NET MAUI project terdiri dari satu atu lebih halaman, di setiap halaman terdapat banyak objek yang digunakan untuk menampilkan data, objek ini disebut views. Salah satu tugas yang akan dilakukan oleh aplikasi adalah mengambil data dari berbagai macam sumber data, dan menampilkannya pada objek view. Selain itu ketika ada perubahan data yang dilakukan pada view, perubahan tersebut juga harus dapat dikembalikan ke sumber data, agar data selalu sinkron. Data Binding membantu proses tersebut menjadi lebih mudah untuk dilakukan.
Ada beberapa jenis Data Binding yang dapat dibuat pada .NET MAUI diantaranya: view-to-view binding, binding ke objek collection, dan binding value converter.
View-to-view bindings
Anda dapat mendefinisikan data binding untuk menghubungkan dua view pada satu halaman yang sama. Caranya adalah menggunakan BindingContext, dan menambahkan x:Reference pada xaml markup. Berikut adalah contoh penggunaan view-toview binding antara label dan slider.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BelajarMAUI.MobileApp.ViewToViewBindingPage"
Title="ViewToViewBindingPage">
<VerticalStackLayout>
<Label Text="ROTATION"
BindingContext="{x:Reference slider}"
Rotation="{Binding Path=Value}"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Center"
VerticalOptions="Center" HeightRequest="200" />
<Slider x:Name="slider"
Maximum="360"
VerticalOptions="Center" />
<Label BindingContext="{x:Reference slider}"
Text="{Binding Value, StringFormat='The angle is {0:F0} degrees'}"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Center"
VerticalOptions="Center" />
</VerticalStackLayout>
</ContentPage>
Binding to Object
Pada contoh berikut akan ditunjukan bagaimana cara untuk membinding data bertipe Collection kedalam view.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BelajarMAUI.MobileApp.DataBindingPage"
Title="DataBindingPage">
<VerticalStackLayout>
<Entry x:Name="empID" Placeholder="Employee ID" />
<Entry x:Name="empName" FontSize="Medium" Placeholder="Employee Name" />
<Entry x:Name="empPosition" FontSize="Medium" Placeholder="Employee Position" />
<Button x:Name="btnBinding" Text="Binding Data" Clicked="btnBinding_Clicked" />
<Button x:Name="btnCheckDataSource" Text="Check Data Source" Clicked="btnCheckDataSource_Clicked" />
</VerticalStackLayout>
</ContentPage>
Untuk menbinding object ke view secara manual, tambahkan kode berikut.
public class Employee
{
public int EmployeeID { get; set; }
public string? Name { get; set; }
public string? Position { get; set; }
}
private void btnBinding_Clicked(object sender, EventArgs e)
{
var empIDBinding = new Binding();
empIDBinding.Source = newEmployee;
empIDBinding.Path = "EmployeeID";
empIDBinding.Mode = BindingMode.OneWay;
var empNamaBinding = new Binding()
{
Source = newEmployee,
Path = "Name",
Mode = BindingMode.TwoWay
};
var empPositionBinding = new Binding()
{
Source = newEmployee,
Path = "Position",
Mode = BindingMode.TwoWay
};
empID.SetBinding(Entry.TextProperty, empIDBinding);
empName.SetBinding(Entry.TextProperty, empNamaBinding);
empPosition.SetBinding(Entry.TextProperty, empPositionBinding);
}
Dapat dilihat bahwa ada dua mode binding pada contoh tersebut, one-way binding, dan two-way binding. Bedanya untuk one-way binding, data hanya akan ditampilkan satu arah, yaitu dari sumber data ke view. Untuk two-way binding, ketika dilakukan perubahan di sisi view, maka akan berpengaruh juga ke sumber datanya.
private void btnCheckDataSource_Clicked(object sender, EventArgs e)
{
DisplayAlert("Data Source", $"Employee ID: {newEmployee.EmployeeID}\nName: {newEmployee.Name}\nPosition: {newEmployee.Position}", "OK");
}
Binding To Collection
Contoh binding selanjutnya adalah membinding object bertipe collection. Berikut contoh pembuatan list yang akan dibinding pada object ListView.
public BindingCollectionPAge()
{
InitializeComponent();
//seeding list of employees
var listEmployees = new List<Employee>
{
new Employee { EmployeeID = 1, Name = "Ben Doe", Position = "Manager" },
new Employee { EmployeeID = 2, Name = "Jane Doe", Position = "Supervisor" },
new Employee { EmployeeID = 3, Name = "John Smith", Position = "Staff" },
new Employee { EmployeeID = 4, Name = "Jane Smith", Position = "Staff" },
new Employee { EmployeeID = 5, Name = "Scott Doe", Position = "Manager" }
};
lvData.ItemsSource = listEmployees;
}
Untuk membinding Collection tersebut pada object ListView, tambahkan kode xaml berikut
<VerticalStackLayout>
<ListView x:Name="lvData">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Position}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</VerticalStackLayout>
Jika program dijalankan, maka akan dapat dilihat hasilnya:
Binding Value Converter
Binding Value Converter adalah salah satu fitur yang sangat berguna ketika ada kebutuhan untuk mengkonversi nilai binding yang akan ditampilkan. Sebagai contoh misal jika nilai property IsStaff pada collection bernilai true maka akan akan ditampilkan label berwarna hijau, jika bukan staff maka label yang tampil akan berwarna merah.
Buat class yang mengimplementasikan IValueConverter. Class ini digunakan untuk mengkonversi nilai boolean menjadi nilai berupa warna (dalam RGB).
public class BoolToValueConverter : IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is bool)
{
if ((bool)value)
{
return Color.FromRgb(0, 255, 0);
}
else
{
return Color.FromRgb(255, 0, 0);
}
}
return Color.FromRgb(0, 0, 0);
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Untuk menggunakan class tersebut pada Binding tambahkan kode xaml berikut:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BelajarMAUI.MobileApp.BindingValueConverterPage"
xmlns:local="clr-namespace:BelajarMAUI.MobileApp.Converter"
Title="BindingValueConverterPage">
<ContentPage.Resources>
<local:BoolToValueConverter x:Key="BoolToValueConverter" />
</ContentPage.Resources>
<VerticalStackLayout>
<ListView x:Name="lvData">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" TextColor="{Binding IsStaff, Converter={StaticResource BoolToValueConverter}}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</VerticalStackLayout>
</ContentPage>
Kemudian tambahkan data Employee yang akan ditampilkan pada ListView.
public BindingValueConverterPage()
{
InitializeComponent();
//seeding employees data
var listEmployee = new List<Employee>
{
new Employee { EmployeeID=1, Name = "Erick",Position="Manager", IsStaff = true },
new Employee { EmployeeID=2, Name = "Budi",Position="Staff", IsStaff = true },
new Employee { EmployeeID=3, Name = "Joko",Position="Guest", IsStaff = false },
new Employee { EmployeeID=4, Name = "Rudi",Position="Staff", IsStaff = true },
new Employee { EmployeeID=5, Name = "Dodi",Position="Guest", IsStaff = false },
};
lvData.ItemsSource = listEmployee;
}
Dapat dilihat bahwa data Employee yang memiliki nilai IsStaff=true akan berwarna hijau, dan sebaliknya akan berwarna merah.
Erick Kurniawan 
Leave a comment