The course is part of this learning path
This course looks at the Xamarin Forms implementation of the Model-View-ViewModel architecture, paying special attention to data and command binding. We see how to bind view models and nested models to views, and explore notification mechanisms built into the Xamarin Forms core for bi-directional data and view updating. The course also looks at XAML markup extensions and value converters for displaying images within a Xamarin Forms app.
Learning Objectives
Understand the model and view model aspects of MVVM and create an application using the Flyout app template
Intended Audience
This course is designed for anyone interested in enhancing their knowledge of Xamarin, with a focus on MVVM.
Prerequisites
To get the most from this course, you should have a basic understanding of interfaces and reflection in the context of C# and .NET.
Source Code
I'll start with the Flyout Xamarin Forms application template available in Visual Studio on macOS and Windows for this demonstration. I'll call it MVVMFlyout and target Android and iOS. There's a lot of new functionality in this new app that we haven't seen before. I will be ignoring some things that aren't relevant to MVVM but talk about other features that are related to UI topics I've touched on in previous courses.
In the solution explorer, we can see the familiar folder structure with the addition of the Services folder. So that's the view folder with our XAML-defined content pages. The ViewModels folder contains the C# classes that are the conduit between the data and the views. BaseViewModel is an ancestor class from which the other view models are descended, containing shared functionality. The Services folder has classes for connecting to an app's data. In this case, data is mocked up just for demonstration purposes. We can see the MockDataStore creates and returns a list of items. Finally, we have the models folder containing the item class definition. Through the magic of video, I'm going to run the vanilla flyout app next to the one I've modified to highlight the areas we'll be looking at.
I've customized the app's title or navigation bar, changing the background color and text while adding an image. The flyout menu works the same in both instances, although I've changed the background color and the menu images. More importantly, my menu images change color when the menu item is selected. In the vanilla app, we see the items defined in the MockDataStore class, whereas the modified app has a new view called StudentPage. The student page is where we'll look at data binding.
The student class comprises four public string members, FirstName, LastName, Country, and Language. The Language class is also basic, having just two public string members. In contrast, the Country class is a little more complicated, not because it needs to be, but because the data is sourced from a web service. Hence the JSON property name attributes that come from System.Text.Json.Serialization, as opposed to using NewtonSoft's JSON libraries.
The student class represents the profile of the app's user, so the student store, mocking a local database, will only contain one student or profile. We have just two methods in the student store, one for adding and updating a student and one for retrieving their data. The Language store is the original app's mock datastore repurposed, returning a list of language objects.
While the country store implements the modified IDataStore interface, it is also descended from the RestService class, which has the code for pulling JSON data from a web service and deserializing it. Last but not least, a constants class, containing the URL for the rest countries service. It's not vital that you understand all of this code, as it isn't essential to the main data binding thrust of the course, but it's helpful to give you context within the application.
Hallam is a software architect with over 20 years experience across a wide range of industries. He began his software career as a Delphi/Interbase disciple but changed his allegiance to Microsoft with its deep and broad ecosystem. While Hallam has designed and crafted custom software utilizing web, mobile and desktop technologies, good quality reliable data is the key to a successful solution. The challenge of quickly turning data into useful information for digestion by humans and machines has led Hallam to specialize in database design and process automation. Showing customers how leverage new technology to change and improve their business processes is one of the key drivers keeping Hallam coming back to the keyboard.