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
It's all well and good binding data, but if you can't do the same for other user input like button clicks and gestures, you've still got one foot in the tightly bound code-behind camp. Let's start by looking at the traditional or non-bound command scenario. In our student page XAML, we'd give the button a name and associate an action in the code-behind for the clicked event. The most striking aspect of this example is how lonely the SaveBtn_Clicked event is in StudentPage.xaml.cs. I'll just delete the click event handler and go to the view model code. We've got two commands, SaveCommand and CancelCommand, bound to XAML buttons with the same syntax as data binding. The command class is in the Xamarin.Forms library, so built into Xamarin and implements the ICommand interface found in System.Windows.Input. The Command class has four constructors, three methods, CanExecute, Execute, ChangeCanExecute, and one event, CanExecuteChange. In StudentViewModel, the two public commands have been assigned new command class instances. The save command with a two-parameter constructor specifying OnSave to execute and ValidateSave to check whether saving can be executed. The cancel command constructor specifies a private method to execute when clicked. The line below is interesting. This assigns the save command's can execute method, so ValidateSave, to the BaseViewModel's property changed handler. Whenever bound view model values change, the ValidateSave method will be called to see if OnSave can execute. If it can, the control associated with the command will be enabled. The brackets with the underscores represent the save command's signature with two parameters. Even though the underscores represent anonymous parameters, i.e., we don't care what they are, the compiler won't allow the same parameter twice, hence one single underscore and one double underscore. Like data binding, command binding uses reflection to associate the button with the action to execute.
I've removed the data binding from the student class and reinstated it in the view model, adjusting the view's bindings appropriately. Let's run the app without a student in the store and a breakpoint in ValidateSave. When the page is first loaded, and the binding context is set up, ValidateSave is executed. Whenever the underlying view model data is changed courtesy of data binding, ValidateSave is executed through its association with ChangeCanExecute. When all conditions are met, ValidateSave returns true, enabling the save command and button. Clicking save executes OnSave.
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.