{"id":1645,"date":"2020-10-29T18:03:12","date_gmt":"2020-10-29T18:03:12","guid":{"rendered":"https:\/\/serkanseker.com\/?p=1645"},"modified":"2021-02-22T07:41:59","modified_gmt":"2021-02-22T07:41:59","slug":"xamarin-forms-mvvm-pattern","status":"publish","type":"post","link":"https:\/\/serkanseker.com\/tr\/xamarin-forms-mvvm-pattern\/","title":{"rendered":"Xamarin.Forms MVVM Pattern"},"content":{"rendered":"\n

When developing applications in Xamarin<\/a>.Forms, the user interface is generally developed in XAML and interaction is provided with background codes. However, this causes maintenance and testing issues when the application grows and becomes complex. You can avoid these problems by setting up projects with the MVVM model.<\/p>\n\n\n\n

MVVM (Model – View – ViewModel) model separates the business and presentation layers of an application from the user interface. This separation helps make testing, maintenance, and development of an application easier. Naturally, it enables designers and developers to collaborate more harmoniously.<\/p>\n\n\n\n

<\/p>

  1. MVVM Design Pattern<\/a><\/strong>

    <\/p> <\/li>

  2. MVVM (Model-View-ViewModel)<\/a><\/strong>

    <\/p> <\/li>

  3. Binding ViewModel to View<\/a><\/strong>

    <\/p> <\/li>

  4. Updating View in Response to Changes in MVVM<\/a><\/strong>

    <\/p> <\/li>

  5. Implementing Commands<\/a><\/strong>

    <\/p> <\/li>

  6. Advantages of MVVM Pattern<\/a><\/strong>

    <\/p> <\/li>

  7. Disadvantages of MVVM Pattern<\/a><\/strong>

    <\/p> <\/li>

  8. Conclusion<\/a><\/strong>

    <\/p> <\/li><\/ol><\/div>\n\n\n\n

    MVVM Design Pattern<\/h2>\n\n\n\n

    First of all, it is important to understand the components’ tasks and how they interact with each other. The MVVM pattern consists of the basic components of Model, View and ViewModel. These layers are separate from each other. The Model layer doesn’t know the ViewModel layer and the ViewModel layer doesn’t know the View layer. Thus, it is possible to develop the components independently.<\/p>\n\n\n\n

    \"MVVM
    MVVM Pattern in Xamarin.Forms Apps<\/figcaption><\/figure>\n\n\n\n

    MVVM (Model-View-ViewModel)<\/h2>\n\n\n\n

    Model<\/h3>\n\n\n\n

    Model, in short, are non-visual classes that contain data that will be used in the application.The model class is independent of the ViewModel class. Examples are Data transfer objects (DTOs), Plain Old CLR Objects (POCOs).<\/p>\n\n\n\n

    ViewModel<\/h3>\n\n\n\n

    It binds data between View and Model, executes commands and reports changes, that is, it acts as a bridge. ViewModel knows the model layer but not the View layer. ViewModel makes use of the PropertyChanged event when connecting data and the ObservableCollection class for collections.<\/p>\n\n\n\n

    View<\/h3>\n\n\n\n

    View is the layer on which the image of the application is presented, that is, the UI elements are located. Ideally, build the views with XAML. Thus, you will apply the Separation of Concerns principle. In Xamarin.Forms applications, the View is usually derived from the Page or ContentView class. To interact with a view item in view, such as click, selection, define a command method in the ViewModel class and connect it to the view component. I will illustrate this below with a simple example later.<\/p>\n\n\n\n

    Binding ViewModel to View<\/h2>\n\n\n\n

    The ViewModel class is usually attached to the View layer declaratively and programmatically.<\/p>\n\n\n\n

    Binding Declaratively<\/h3>\n\n\n\n

    Knowingly connecting is a simpler method. It is a declarative binding of the view model to the BindingContext of the view in XAML.<\/p>\n\n\n\n

    <ContentPage ... xmlns:local="clr-namespace:eShop">  \n    <ContentPage.BindingContext>  \n        <local:LoginViewModel \/>  \n    <\/ContentPage.BindingContext>  \n<\/ContentPage><\/code><\/pre>\n\n\n\n
    Its simplicity is an advantage, but it connects with the default constructor of the ViewModel class, meaning it has no parameters.<\/p>\n\n\n\n
    Binding Programmatically<\/h3>\n\n\n\n
    The ViewModel class connects with the BindingContext property in the xaml.cs class of the view. With this method, parameterized constructor methods of ViewModel class can be connected.<\/p>\n\n\n\n
    public LoginView()  \n{  \n    InitializeComponent();  \n    BindingContext = new LoginViewModel(navigationService);  \n}<\/code><\/pre>\n\n\n\n
    Updating View in Response to Changes in MVVM<\/h2>\n\n\n\n
    ViewModel and Model classes accessible by View must implement the INotifyPropertyChanged interface. This way, when the basic properties of the ViewModel or Model class change, the components in the view change. It always triggers the PropertyChanged event when the value of a property changes and its values are used by other properties. Also, never trigger the PropertyChanged event if the value of a property doesn’t change.<\/p>\n\n\n\n
    In the example below, BaseViewModel is implementing the INotifyPropertyChanged interface. The OnPropertyChanged method checks and reports changes.<\/p>\n\n\n\n
        public class BaseViewModel : INotifyPropertyChanged\n    {\n\n        public event PropertyChangedEventHandler PropertyChanged;\n\n        public void OnPropertyChanged([CallerMemberName] string name = "")\n        {\n            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));\n        }\n\n    }<\/code><\/pre>\n\n\n\n
    Implementing Commands<\/h2>\n\n\n\n
    Commands are examples of objects that implement the ICommand interface. Use commands to interact with UI elements in Xamarin.Forms. To add commands to the view, add command methods in the ViewModel class, then bind these methods to the view component.<\/p>\n\n\n\n
    Let’s show it with an example.<\/p>\n\n\n\n
    First, we defined a command method named ShareCommand in ViewModel class. This method will be called when clicking the PancakeView component in the view.<\/p>\n\n\n\n
    public ICommand ShareCommand => new Command(() => Share.RequestAsync(selectedTrack.PreviewUrl));<\/code><\/pre>\n\n\n\n
    Then I connected the command method using the TapGestureRecognizer feature of the PancakeView component. So when I click on PancakeView, the ShareCommand method will work.<\/p>\n\n\n\n
    <pv:PancakeView>\n    <pv:PancakeView.GestureRecognizers>\n        <TapGestureRecognizer Command="{Binding ShareCommand}"\/>\n    <\/pv:PancakeView.GestureRecognizers>\n    <Image Source="share.png" HeightRequest="40" WidthRequest="40"\/>\n<\/pv:PancakeView><\/code><\/pre>\n\n\n\n
    Advantages of MVVM Pattern<\/h2>\n\n\n\n