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.