Why does not display the content of the label?

Question

So I have got a view with a label and I have got a ViewModel for it.

ViewModelBase

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected virtual bool SetAndRaisePropertyChanged(ref T storage, T value, [CallerMemberName] string propertyName = "")
    {
        if (EqualityComparer.Default.Equals(storage, value))
            return false;
        storage = value;
        this.RaisePropertyChanged(propertyName);
        return true;
    }

    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

This is how the ViewModel looks like:

  private string _balance = "1111$";
    public string Balance
    {
        get { return _balance; }
        set { SetAndRaisePropertyChanged(ref _balance, value); }
    }

And here is the view:

In the designer, I can see the content of the label

But when I run the application, the label is empty

What is the problem?

I have already created some ViewModel, but there I worked with textboxes. We used INotifyPropertyChanged interface, and I am not sure how does it work, so my guess was, that it sets the content, but won't display it, because the label is not updating, so I tried to use the OnPropertyChanged function with a PropertyChangedEventHandler, what we used earlier to the other ViewModels, but it didn't work either, I do not know what can be wrong.

user_6065774 · Answer

There are some frameworks providing class already implementing the needed interfaces, if you want to do it yourself, here is a possibility:

First you have your ViewModelBase and all your ViewModels should inherit it

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected virtual bool SetAndRaisePropertyChanged(ref T storage, T value, [CallerMemberName] string propertyName = "")
    {
        if (EqualityComparer.Default.Equals(storage, value))
            return false;
        storage = value;
        this.RaisePropertyChanged(propertyName);
        return true;
    }
}

then in your viewmodel you will declare your property like this:

private String _mBalance;
public String Balance
{
  get { return _mBalance; }
  set => SetAndRaisePropertyChanged(ref _mBalance, value);
}

[EDIT]: I want to keep the history of the answer, so check my edit below with full fonctionnal example:

Usually I split in more files, but i wanted to stay simple, so you need 2 files (I'm trying to apply MVVM pattern so i'm adding directories): - Views\MainWindow.xaml - ViewModels\MainWindowViewModel.cs

Views\MainWindow.xaml:

ViewModels\MainWindowViewModel.cs:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace StackOverflow_DBG.ViewModels
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        protected virtual bool SetAndRaisePropertyChanged(ref T storage, T value, [CallerMemberName] string propertyName = "")
        {
            if (EqualityComparer.Default.Equals(storage, value))
                return false;
            storage = value;
            this.RaisePropertyChanged(propertyName);
            return true;
        }
    }

    public class RelayCommand : ICommand
    {
        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }
        private Action methodToExecute;
        private Func canExecuteEvaluator;
        public RelayCommand(Action methodToExecute, Func canExecuteEvaluator)
        {
            this.methodToExecute = methodToExecute;
            this.canExecuteEvaluator = canExecuteEvaluator;
        }
        public RelayCommand(Action methodToExecute)
            : this(methodToExecute, null)
        {
        }
        public bool CanExecute(object parameter)
        {
            if (this.canExecuteEvaluator == null)
            {
                return true;
            }
            else
            {
                bool result = this.canExecuteEvaluator.Invoke();
                return result;
            }
        }
        public void Execute(object parameter)
        {
            this.methodToExecute.Invoke();
        }
    }

    class MainWindowViewModel : ViewModelBase
    {
        private String m_LabelTxt = "Foo";
        public String LabelTxt
        {
            get { return m_LabelTxt; }
            set => SetAndRaisePropertyChanged(ref m_LabelTxt, value);
        }

        private String m_ValueTxt;
        public String ValueTxt
        {
            get { return m_ValueTxt; }
            set => SetAndRaisePropertyChanged(ref m_ValueTxt, value);
        }

        private RelayCommand m_ChangeLabel;
        public RelayCommand ChangeLabel
        {
            get { return m_ChangeLabel; }
            set { m_ChangeLabel = value; }
        }

        public MainWindowViewModel()
        {
            ChangeLabel = new RelayCommand(() => {
                if (LabelTxt == "Foo")
                {
                    LabelTxt = "Bar ";
                }
                else
                {
                    LabelTxt = "Foo ";
                }
            });
        }
    }
}

This way you also see how to bind button for example. Press the button to see that the update is well done. If using same directories than me, remember to edit app.xaml to use StartupUri="Views/MainWindow.xaml"> instead of

StartupUri="MainWindow.xaml">

user_10585732 · Answer

Have you properly set the DataContext on the window/control to your view model? You need to set your DataContext before you are able to use bindings. And as such, you should probably use the proper way for binding:

Edit:

Okay, I'll give you a concrete example of what I mean. Also, you're going to run into a lot of issues using a view model as a StaticResource. Why do I say this? Because once you start adding dependencies to your view model (accessing business logic, etc), you will need some form of dependency injection (DI) or a similar way to do so.

So you have your ViewModelBase, so I'll use that and not duplicate myself. Here's a simple view model:

public class AccountViewModel : ViewModelBase
{
    string _balance = "1111$";

    public AccountViewModel(string accountNumber)
    {
        AccountNumber = accountNumber;
    }

    public string AccountNumber { get; }

    public string Balance
    {
        get { return _balance; }
        set { SetAndRaisePropertyChanged(ref _balance, value); }
    }
}

Here's the view code (MainWindow.xaml):

And the code behind (MainWindow.xaml.cs):

public partial class MainWindow
{
    public MainWindow(AccountViewModel dataContext)
    {
        DataContext = dataContext;
        InitializeComponent();
    }
}

And for fun, the App.xaml.cs (set up for BuildAction - Page):

public partial class App
{
    [STAThread]
    public static void Main(string[] args)
    {
        new MainWindow(new AccountViewModel("123456789")).ShowDialog();
    }
}

This will show you what you are expecting, and display the Balance correctly. There are a few things you can try to see what your issue is:

Is there any information in the output window when debugging that tells you if a binding error is occurring?

Can you give a shorter version of your application showing all parts (i.e. a short project that duplicates the issue) and upload it somewhere?

user_6023118 · Answer

Delete the margin solved the problem. I guess the margin pushed out the label.

Why does not display the content of the label?

3 Answers