While naming is not important, for overview, it can be helpful to stick to a pattern of NamePage and the accompanying NamePageModel. In this page, we will insert our first bit of MVVM and data binding.įirst, let’s create a new class which we will be named DncMvvmPageModel. This is a very powerful tool when designing layouts, be sure to check it out. We can see how it looks like in the Xamarin.Forms XAML previewer. When we open this up, there is a very simple ContentPage in it with a centered Label. Because we choose to use XAML, there is a page already in our PCL which is named after our project, so in my case DncMvvmPage.xaml. We will not focus on this right now, so you can leave these options as-is.Īfter Visual Studio has finished processing, you should be presented with your brand-new app. The last screen presents you with some options to configure a repository and add a test project.
If you forget to check it, you can still use XAML in your project, just like you can still use code when you do use XAML. The last option, use XAML, is just to setup a first page for you.
In the next screen, name your app and make sure to choose a Portable Class Library for ‘Shared Code’ (I will refer to this as PCL from now on) and check Use XAML for user interface files. Make sure you don’t choose the Forms App, which is a great template as well as it gives you an ASP.NET Core backend automatically, but that is not what we need right now. Go to File > New Solution and choose the Blank Forms App. Let’s first create a new Xamarin.Forms app. In this example, I will be working with Visual Studio for Mac, but everything will work just fine on Windows with Visual Studio as well, and for building Universal Windows apps (UWP).
The best way to learn about something is to get to work with it, so let’s create a sample app which shows us how to implement MVVM. To make it more clear – and simply because I have become more accustomed to it – I always use Page and PageModel. There is no difference, it is just that a View in Xamarin (or even mobile) is refered to as a Page most of the time. One last thing on naming throughout this article, I will refer to a ViewModel as a PageModel. This probably is due to two main reasons: first, the naming of Xamarin XAML is adapted to be better suited for mobile concepts, and second it prevents people from taking existing layouts in WPF and paste them into a mobile app, causing the app to be a user experience disaster.īut Xamarin.Forms has more in store for you when you want to work with MVVM. Although the concept is identical, the naming between these two platforms is different. XAML is created by Microsoft and is used extensively in Windows Presentation Foundation (WPF) applications. If you would like, you could even mix both, although I would not recommend it.
If you decide later on to switch to code, you can and vice versa too. However, this choice does not mean you can only use the option you have chosen. This is why for the rest of this article, I will use XAML.
I like to use XAML as I think it is clearer. If you have built a Forms app before, you will know that one of the choices you have to make early on is to use either XAML (Extensible Application Markup Language) OR code to assemble your UI.īoth have the same functionality and can do the exact same thing, it just comes down to a matter of taste. Note: This article is based on Xamarin Forms v3 but once you get a grip on the concepts, you can use it for Xamarin Forms v4 too. Now, let us zoom in on how MVVM can be used in Xamarin.Forms apps.
Subscribe to our magazines for FREE and download all previous, current and upcoming editions. NET Core, MVC, Azure, Angular, React, and more.
To help you update the UI from the ViewModel, data binding is used.Īre you keeping up with new developer technologies? Advance your IT career with our Free Developer magazines covering C#, Patterns, Xamarin. The ViewModel is responsible for converting values in a way, for the View to present them to the user. The image below shows a schematic representation. The ViewModel acts as a value converter between the Model and the View. The pattern consists of three ingredients: Model, View and ViewModel. It is an architectural pattern which enables you to separate business logic from UI code. It is derived from the MVC pattern which you probably already know about.
Let me briefly explain what MVVM is, in case you don’t know it yet.