Lesson 13: Controls & Data Binding — Android Dev Tutorial

🎨 UI with MAUI

Controls & Data Binding

Entry, Button, CollectionView, and MVVM bindings.

MVVM Data Binding in MAUI

csharp

// ViewModel — install CommunityToolkit.Mvvm NuGet
public partial class TaskViewModel : ObservableObject
{
    [ObservableProperty] string _taskName = "";
    [ObservableProperty] ObservableCollection<TaskItem> _tasks = [];

    [RelayCommand]
    async Task AddTaskAsync()
    {
        if (string.IsNullOrWhiteSpace(TaskName)) return;
        Tasks.Add(new TaskItem { Name = TaskName });
        TaskName = "";
    }
}

xml

<ContentPage.BindingContext>
  <vm:TaskViewModel />
</ContentPage.BindingContext>

<VerticalStackLayout Padding="16">
  <Entry Text="{Binding TaskName}" Placeholder="New task..." />
  <Button Text="Add" Command="{Binding AddTaskCommand}" />
  <CollectionView ItemsSource="{Binding Tasks}">
    <CollectionView.ItemTemplate>
      <DataTemplate>
        <Label Text="{Binding Name}" Padding="8" />
      </DataTemplate>
    </CollectionView.ItemTemplate>
  </CollectionView>
</VerticalStackLayout>

Key Takeaways

ObservableObject from CommunityToolkit.Mvvm provides INotifyPropertyChanged

[ObservableProperty] source-generates property boilerplate automatically

[RelayCommand] wraps async methods as ICommand for XAML binding

CollectionView is the modern, performant list control in MAUI