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?

You need to assign BindingContext an *instance* of your ViewModel, not the class definition itself — Jason, Jul 24 '16 at 14:26

Ahmad ElMadi · Accepted Answer · 2016-07-26T22:27:39.647

58

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

edited Jul 26 '16 at 22:27

answered Jul 24 '16 at 21:16

Ahmad ElMadi

2,507
21
36

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=XamarinPOC.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**) – fabiuz Jul 25 '16 at 21:48
Great! just fixed it – Ahmad ElMadi Jul 26 '16 at 22:28
You can't bind IsBusy on the ContentPage because the viewmodel isn't set yet. Makes me cry. – Post Impatica May 11 '18 at 01:28
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 ? – Ahmad ElMadi May 12 '18 at 20:12
@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 – Prashant Pimpale Jun 29 '18 at 03:52
@PrashantPimpale I am afraid I do not understand you , maybe you need to make the binding TwoWay mode. – Ahmad ElMadi Jun 29 '18 at 06:50
@AhmadElMadi please have a look at the question which is more similar to my problem https://stackoverflow.com/q/51079625/7124761. It would be more grateful if you can suggest anything! – Prashant Pimpale Jun 29 '18 at 07:09

Set BindingContext to ViewModel in XAML on Xamarin.Forms

1 Answers1

Linked