Set BindingContext to ViewModel in XAML on Xamarin.Forms

Question

I want to develop a simple project with Xamarin.Form and MVVM. In my solution (named XamarinPOC) i have (in addition to standard Xamarin.Forms projects) one separate project for the model (XamarinPOC.Model) and one separate project for the ViewModel (XamarinPOC.ViewModel).

I defined in a XamarinPOC.ViewModel project an abstract class for a BaseViewModel class (that implements the INotifyPropertyChanged Interface) and after I've created a SummaryViewModel class that extend BaseViewModel class with a simple property:

namespace XamarinPOC.ViewModel
{
    public class SummaryViewModel : BaseViewModel
    {

        private string _test = "The binding is OK!";
        public String test
        {
            get
            {
                return _test;
            }
            set
            {
                _test = value;
                OnPropertyChanged("test");
            }
        }
        public SummaryViewModel(){}
    }
}

Next I created a simple ContentPage (SummatyView) in a XamarinPOC project that contain only a label that i want show the text defined in ViewModel. I want to use a XAML for defining the View and the binding but when I run the app nothing is displayed, I no errors on compile-time and runtime but the text are not displayed. My XAML is this

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinPOC.ViewModel,assembly=XamarinPOC.ViewModel"
             x:Class="XamarinPOC.Summary"
             Title="Summary List"
             BindingContext="XamarinPOC.ViewModel.SummaryViewModel">
  <StackLayout>
    <Label Text="{Binding test}"/>
  </StackLayout>
</ContentPage>

and finally my app.cs is:

 namespace XamarinPOC
{
     public class App : Application
     {
         public App()
         {
             MainPage = new Summary();
         }
     }
 }

In the XamarinPOC project I've added a reference to XamarinPOC.ViewModel and XamarinPOC.Model assemblies.

I think the problem is in the XAML definition of binding, but i don't find the error. Where am I wrong?

Solution

To bind the view to the viewmodel from Xaml in your case do it like this

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:XamarinPOC.ViewModel; assembly=XamarinPOC.ViewModel"
             x:Class="XamarinPOC.Summary"
             Title="Summary List">
  <ContentPage.BindingContext>
    <viewModels:SummaryViewModel/>
  </ContentPage.BindingContext>
  <StackLayout>
    <Label Text="{Binding test}"/>
  </StackLayout>
</ContentPage>

One side note I noticed is with naming conventions, it is better to put all your ViewModels, even if it is only one viewModel, inside a folder named "ViewModels" So the namespace in your case would be XamarinPOC.ViewModels

Comments

[Jason]

You need to assign BindingContext an instance of your ViewModel, not the class definition itself

[fabiuz]

Thanks for the answer, I tried your solution but the app thrown a runtime exception on trying to resolve the namespace xmlns:local="clr-namespace:XamarinPOC.ViewModel; assembly=XamarinPOC.ViewModel" but your solution going to a correct direction, after other searchs i've found the info for correct implementation: xmlns:mvvm="clr-namespace:XamarinPOC.ViewModel;assembly=Xama‌​rinPOC.ViewModel" the only difference with your solution is in the xmlns prefix, because the use of xmlns:local is wrong in this case and i need to use another prefix (i choose xmlns:mvvm)

[Ahmad ElMadi]

Great! just fixed it

[Post Impatica]

You can't bind IsBusy on the ContentPage because the viewmodel isn't set yet. Makes me cry.

[Ahmad ElMadi]

I think yes you can, just like how you bind the title. The question is why you want to bind it from the page level ?

[Prashant Pimpale]

@BraveHeart i am also facing the same issue. When I assIGN the value hardcoded its binding to the view but while retrieving data from api its not working

[Ahmad ElMadi]

@PrashantPimpale I am afraid I do not understand you , maybe you need to make the binding TwoWay mode.

[Prashant Pimpale]

@AhmadElMadi please have a look at the question which is more similar to my problem stackoverflow.com/q/51079625/7124761. It would be more grateful if you can suggest anything!