Adding the View

Create a new folder named Views into the MvvmCrossDemo.Forms.UI project to store the views. Add a new Xamarin.Forms Content Page item called FirstView.xaml into the View folder to correspond the FirstViewModel.cs in the MvvmCrossDemo.Core project so that we can reuse the ViewModel layer.

Xamarin.Forms uses the XAML language to describe the UI but bear in mind that there are slight differences between the Xamarin.Forms XAML and the UWP XAML. For instance, we use TextBox in UWP to represent a control that can receive the input from users, but in Xamarin.Forms, the control is called Entry. For the Button control, in UWP we use Content property to show the text of the Button, but in Xamarin.Forms, the property is called Text. It makes a little bit inconvenience but probably, they will be unified to XAML Standard in the future. For more details, please check all the control definitions of Xamarin.Forms here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/.

Open the FirstView.xaml.cs and make sure it is inherited from MvxContentPage, as shown below:

using MvvmCross.Forms.Views;
using MvvmCrossDemo.Core.ViewModels;

namespace MvvmCrossDemo.Forms.UI.Views
{
    public partial class FirstView : MvxContentPage<FirstViewModel>
    {
        public FirstView()
        {
            InitializeComponent();
        }
    }
}

Then open the FirstView.xaml file and update the content like this:

<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage x:TypeArguments="viewModels:FirstViewModel"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
    xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"
    xmlns:viewModels="clr-namespace:MvvmCrossDemo.Core.ViewModels;assembly=MvvmCrossDemo.Core"
    x:Class="MvvmCrossDemo.Forms.UI.Views.FirstView">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Your Name"></Label>
            <Entry Text="{Binding UserName, Mode=TwoWay}"></Entry>
            <Button Text="Click Me!" Command="{Binding GetGreetingCommand}"></Button>
            <Label Text="{Binding Greeting}"></Label>
        </StackLayout>
    </ContentPage.Content>
</views:MvxContentPage> 

Look, the file content contains similar controls with UWP, but has some different controls. We changed the base class of the FirstView from ContentPage to MvxContentPage and added the references to views, mvx and viewModels. Additionally, we need to specify the x:TypeArguments as in the xaml file. The MvxContentPage class in the FirstView.xaml.cs also has a generic parameter as FirstViewModel. So that we built the relationship between the FirstView and the FirstViewModel. The first UI is done!