**Course Title:** .NET MAUI App Development **Section Title:** Fundamentals of XAML and MVVM **Topic:** Introduction to MVVM architecture: Binding UI to ViewModel **Objective:** By the end of this topic, you will be able to understand the basics of MVVM architecture, implement data binding in your .NET MAUI app, and effectively separate concerns between your UI and business logic. **What is MVVM architecture?** The Model-View-ViewModel (MVVM) pattern is a widely used software architecture pattern that separates an application into three main components: 1. **Model (M):** Represents the data and business logic of your application. This is where you define your data structures, data access, and any other logic that doesn't rely on the user interface. 2. **View (V):** This is your user interface, typically written in XAML. The View is responsible for rendering the UI and handling user input. 3. **ViewModel (VM):** Acts as an intermediary between the Model and View. The ViewModel exposes the data and functionality of your Model in a form that's easily consumable by your View. **Why use MVVM architecture?** MVVM provides several benefits, including: * **Separation of Concerns (SoC):** By separating your concerns into three distinct components, you can work on each piece independently without worrying about the impact on other areas of your app. * **Easier Maintenance:** With a clear separation of concerns, it's easier to update or replace individual components without affecting the rest of your app. * **Testability:** MVVM makes it easier to write unit tests for your app, as you can test each component independently. **Data Binding in MVVM** Data binding is the process of linking a property on your ViewModel to a property on your View. This allows you to effortlessly keep your UI in sync with your data. **Example:** Suppose we have a ViewModel with a `Name` property: ```csharp public class MyViewModel { public string Name { get; set; } } ``` We want to bind the `Name` property to a `Label` in our XAML: ```xaml <Label Text="{Binding Name}" /> ``` The `{Binding Name}` syntax tells .NET MAUI to bind the `Text` property of the `Label` to the `Name` property of our ViewModel. **Implementing INotifyPropertyChanged** When the `Name` property in our ViewModel changes, we need to notify our View to update the binding. .NET MAUI provides the `INotifyPropertyChanged` interface to handle this: ```csharp public class MyViewModel : INotifyPropertyChanged { private string name; public string Name { get { return name; } set { name = value; OnPropertyChanged(nameof(Name)); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } ``` By implementing `INotifyPropertyChanged`, we can notify our View when the `Name` property changes, ensuring that the binding stays up-to-date. **Commanding** Commanding is a feature in .NET MAUI that allows you to bind a command to an event handler in your ViewModel. This is useful for handling events like button clicks. For example, suppose we want to create a `LoginCommand` in our ViewModel: ```csharp public class MyViewModel { public ICommand LoginCommand { get; set; } public MyViewModel() { LoginCommand = new Command(Login); } private void Login() { // Handle login logic here } } ``` We can then bind the `LoginCommand` to a `Button` in our XAML: ```xaml <Button Text="Login" Command="{Binding LoginCommand}" /> ``` **Conclusion** In this topic, you learned the basics of MVVM architecture and how to implement data binding in your .NET MAUI app. We covered the importance of separation of concerns, data binding, and commanding. By following these principles, you can create maintainable, scalable, and testable .NET MAUI apps. **Further Reading:** * [.NET MAUI Documentation: MVVM Pattern](https://docs.microsoft.com/en-us/dotnet/maui/xaml/mvvm) * [.NET MAUI Documentation: Data Binding](https://docs.microsoft.com/en-us/dotnet/maui/xaml/data-binding) * [Microsoft Learn: .NET MAUI Tutorial](https://learn.microsoft.com/en-us/samples/dotnet/maui-samples/index/) **Leave a Comment/Ask for Help:** If you have any questions or need help with this topic, feel free to leave a comment below.