**Course Title:** .NET MAUI App Development **Section Title:** Fundamentals of XAML and MVVM **Topic:** Commands, Data Binding, and PropertyChanged notifications **Introduction** In the previous topics, we explored the basics of XAML for UI design and the fundamentals of MVVM architecture. In this topic, we will dive deeper into the key concepts that make MVVM so powerful: Commands, Data Binding, and PropertyChanged notifications. **Commands** In MVVM, Commands are used to encapsulate the logic of a user interaction. They are typically used in conjunction with UI elements such as buttons, menu items, or gestures. A Command is an object that implements the ICommand interface, which defines two methods: `CanExecute` and `Execute`. * `CanExecute`: This method determines whether the command can be executed. It is typically used to enable or disable a UI element based on certain conditions. * `Execute`: This method is called when the command is executed. Here's an example of a simple Command: ```csharp public class RelayCommand : ICommand { private readonly Func<bool> _canExecute; private readonly Action _execute; public RelayCommand(Func<bool> canExecute, Action execute) { _canExecute = canExecute; _execute = execute; } public bool CanExecute(object parameter) { return _canExecute(); } public void Execute(object parameter) { _execute(); } public event EventHandler CanExecuteChanged; } ``` You can then use this RelayCommand in your ViewModel like this: ```csharp private RelayCommand _saveCommand; public RelayCommand SaveCommand { get { if (_saveCommand == null) { _saveCommand = new RelayCommand(CanSave, Save); } return _saveCommand; } } private bool CanSave() { return !string.IsNullOrEmpty(FirstName) && !string.IsNullOrEmpty(LastName); } private void Save() { // Save logic here } ``` In your XAML, you can bind a button to this Command like this: ```xaml <Button Command="{Binding SaveCommand}" /> ``` **Data Binding** Data Binding is the process of linking the properties of a UI element to the properties of an object. This allows you to synchronize the UI with the data, making it easier to update the UI when the data changes. In .NET MAUI, you can bind to properties of an object using the `Binding` markup extension. Here's an example: ```xaml <Entry Text="{Binding Email}" /> ``` In this example, the `Text` property of the `Entry` element is bound to the `Email` property of the ViewModel. **PropertyChanged notifications** PropertyChanged notifications are used to notify the UI that a property has changed. This is typically done using the INotifyPropertyChanged interface, which defines the PropertyChanged event. Here's an example of how you can implement INotifyPropertyChanged in your ViewModel: ```csharp public class MyViewModel : INotifyPropertyChanged { private string _email; public string Email { get { return _email; } set { if (_email != value) { _email = value; OnPropertyChanged(); } } } private void OnPropertyChanged() { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Email))); } public event PropertyChangedEventHandler PropertyChanged; } ``` In this example, the `Email` property raises the PropertyChanged event when its value changes. The UI can then be updated to reflect the new value. **Putting it all together** Here's an example of how you can use Commands, Data Binding, and PropertyChanged notifications in your .NET MAUI app: ```xaml ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.Views.MyPage"> <StackLayout> <Entry Text="{Binding Email}" /> <Button Command="{Binding SaveCommand}" /> </StackLayout> </ContentView> ``` ```csharp public class MyViewModel : INotifyPropertyChanged { private string _email; private RelayCommand _saveCommand; public string Email { get { return _email; } set { if (_email != value) { _email = value; OnPropertyChanged(); } } } public RelayCommand SaveCommand { get { if (_saveCommand == null) { _saveCommand = new RelayCommand(CanSave, Save); } return _saveCommand; } } private bool CanSave() { return !string.IsNullOrEmpty(Email); } private void Save() { // Save logic here } private void OnPropertyChanged() { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Email))); } public event PropertyChangedEventHandler PropertyChanged; } ``` In this example, the `Email` property is bound to an `Entry` element, and the `SaveCommand` is bound to a `Button`. When the `Email` property changes, the UI is updated to reflect the new value. When the button is clicked, the `SaveCommand` is executed. **Conclusion** Commands, Data Binding, and PropertyChanged notifications are powerful tools in .NET MAUI that can help you create robust and maintainable apps. By using these concepts, you can decouple your UI from your business logic and make it easier to test and maintain your app. For more information on Commands, Data Binding, and PropertyChanged notifications, check out the official .NET MAUI documentation: * [Commands](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/mvvm/commanding) * [Data Binding](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/mvvm/data-binding) * [PropertyChanged notifications](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/mvvm/property-change-notifications) We hope this helps you in your .NET MAUI app development journey. Let us know if you have any questions or need further clarification. Do you want to know how to implement validation in your .NET MAUI app? Check out the next topic: [Validation in .NET MAUI](link to next topic).