.Net MAUI: View not drawing data from ViewModel - Intellisense shows a connection

Question

My VIEW refuses to draw data from the VIEWMODEL. The Visual Studio 2022 intellisense fills in the connections as if there is a connection, and it compiles just fine...but no data displays. I've stepped away from XAML for several years, and I'm trying to jump back in.

I am trying to have an entry field update the VIEWMODEL, and then the label to display the text being written to the VIEWMODEL. I keep paring the code back, trying to get ANYTHING to work before trying to execute more complicated bindings, but for now I can't get the VIEW to connect to the VIEWMODEL.

The following XAML is the extremely stripped down VIEW code.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:model="clr-namespace:MauiCalendar.Model"
         xmlns:viewmodel="clr-namespace:MauiCalendar.ViewModel"
         x:Class="MauiCalendar.View.DaySingleView"
         x:DataType="viewmodel:DaySingleViewModel"
         Title="{Binding Title}">

    <VerticalStackLayout>
        <Entry
            Text="{Binding Title}" />

        <Label 
            Text="{Binding Title}" />

        <Label
            Text="Test" />

        <Button
            Text="Load Days" />
    </VerticalStackLayout>
</ContentPage>

The VIEWMODEL is called "DaySingleViewModel" located inside a ViewModel directory. I've got multiple fields and methods, but I'm stripping them out to keep this question lean.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Diagnostics;
using System.Diagnostics;
using System.ComponentModel;
using MauiCalendar.Model;
using MauiCalendar.Services;


namespace MauiCalendar.ViewModel
{
    [ObservableObject]
    public partial class DaySingleViewModel 
    {
        public DaySingleViewModel()
        { }

        [ObservableProperty]
        string title = "Starting Value";
    }
}

The above code outputs the following:

Would anyone with more experience be willing to take a look at what I'm doing wrong?

First, have you "Registered" the view and viewmodel? [Intellisense works because of `x:DataType`, but that is NOT what connects the two at runtime.] If so, then second, you have three xaml elements binding to the same property, Title. Perhaps that is somehow causing an issue. Remove all uses of `{Binding Title}`, except the one in `Label`. Does that work? — ToolmakerSteve, Oct 21 '22 at 04:16

score 1 · Accepted Answer · answered Oct 21 '22 at 06:12

I tested your code, and you need add BindingContext to connect the View with ViewModel firstly. Here's the code snippet below for your reference. Just keep the code neat and easy to understand.

View:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiCalendar.View.DaySingleView">
    
    <VerticalStackLayout>

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

        <Label Text="{Binding Title}" />

        <Label Text="Test"/>

        <Button Text="Load Days"/>

    </VerticalStackLayout>
</ContentPage>

View's code-behind:

using MauiCalendar.ViewModel; 
namespace MauiCalendar.View;

public partial class DaySingleView : ContentPage
{
      public DaySingleView()
      {
        BindingContext = new DaySingleViewModel();
        InitializeComponent();
      }
}

ViewModel:

using CommunityToolkit.Mvvm.ComponentModel; 

namespace MauiCalendar.ViewModel
{

    [ObservableObject]
    public partial class DaySingleViewModel
    {
        [ObservableProperty]
        string title = "Starting  Value";

        public DaySingleViewModel() { }
    }
}

Starting Page:

using MauiCalendar.View; 

namespace MauiCalendar;

public partial class App : Application
{
      public App()
      {
            InitializeComponent();

            MainPage = new DaySingleView();
      }
}

Thank you very much for your help. This is how I used to bind...in the CS page. I thought it would be better in MAUI to bind via the XAML. Now I need to figure out where I went wrong. Thanks again! — RAB, Oct 22 '22 at 06:30

.Net MAUI: View not drawing data from ViewModel - Intellisense shows a connection

1 Answers1