Home > front end >  .Net MAUI: View not drawing data from ViewModel - Intellisense shows a connection
.Net MAUI: View not drawing data from ViewModel - Intellisense shows a connection

Time:10-22

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:

The bound DataView text does not appear.

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

CodePudding user response:

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();
      }
}
  • Related