MVVM Binding in Xamarin

Question

For a while now I have been having trouble with the Binding context in Xamarin.

Here's my Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Gren
{
    public class TaskModel
    {
        public string Title { get; set; }
        public int Duration { get; set; }
    }
}

Here's my ViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Gren.ViewModel
{
    public class HomeViewModel
    {
        public TaskModel TaskModel { get; set; }

        public HomeViewModel()
        {
            TaskModel = new TaskModel
            {
                Title = "Creating UI",
                Duration = 2
            };
        }
    }
}

And here's my view's code behind, where I bind my ViewModel to the View:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Gren.ViewModel;

namespace Gren
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ModelBinding : ContentPage
    {
        public ModelBinding()
        {
            InitializeComponent();
            BindingContext = new HomeViewModel();
        }
    }
}

My View's code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Gren.ModelBinding"
             BackgroundColor="Red">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Title ofTask"/>
            <Entry Text="{Binding {}TaskModel.Title}"/>

            <Label Text="Duration ofTask"/>
            <Entry Text="{Binding {}TaskModel.Duration}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

This runs well. Now I'm sure you'd notice the {} in the binding tag of the text property of each entry. Yeah, it is normally not supposed to be there but when I run it without the {}, it won't display the values of the binded property as it would with the {} in front. I want to know if there's a better way to code this.

My Xamarin is almost non existent and quite rusty... but have you tried Text="{Binding Path=TaskModel.Title}"? — slugster

RobDigital RobDigital · Accepted Answer · 2018-04-18T16:33:41

Hmm that really is odd.. Is that really the entirety of your view XAML? Because I'm suspecting that something else in there may be causing this.

What I would like to see you try and do it set this up entirely in XAML.

Comment out your BindingContext in C# in your view's code behind for now.
In the view XAML, add a namespace reference to your viewmodels (without knowing your exact setup, assuming your VMs are in a folder called ViewModels) it will be something like this:

 xmlns:viewModels="clr-namespace:Gren.ViewModels;assembly=Gren"

Then set the binding context for the entire page in XAML.

<ContentPage.BindingContext>
    <viewModels:HomeViewModel/>
</ContentPage.BindingContext>

Now, use the normal binding syntax and it should be fine (unless as previously mentioned, something else exists in your view XAML that is disrupting this).

<Entry Text="{Binding TaskModel.Title}"/>

MVVM Binding in Xamarin

1 Answers