C# User Control (MVVM) surface a property in MV

Question

I feel though i may be missing somethig here, or its not doable (which i find hard to belive).

I have a UserControl thats using MVVM archtitecture.

The UserControl looks like this.

 public partial class UserControl1 : UserControl
    {
        private string _labelContents;

        public UserControl1()
        {
            InitializeComponent();
            DataContext = new UserControl1_VM();
        }
    }

The VM looks like this.

public class UserControl1_VM : INotifyPropertyChanged { private string _labelContents = "Set from VM";

    public string LabelContent
    {
        get => _labelContents;
        set { _labelContents = value; OnPropertyChanged("LabelContent"); }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

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

I want to be able to put in a MainView or similar this:

  <mv:UserControl1 LabelContent="My Text"></mv:UserControl1>

But VS states that it "Cannot relsolve symbol LabelContent". Which is understandable as its in the view model. Without putting that Property in to the code behind in the UserControl, and passing the value through it seems impossible. I may just be looking for the wrong thing.

This is a very basic exaple, but LabelContent i think needs to be a dependancy properties because it is bound to it self ie ulimately.

<mv:UserControl1 LabelContent="{Binding LabelText}"></mv:UserControl1>

Any help with this would be great, as it has me scratching my head, and making me bald!!

Just to let you know if its not a Dependancy Property this works, but seems very clumsy.

Cheers

James

Answer 1

you don't need any view models for UserControl, just a dependency property:

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }

    public string LabelContent
    {
        get { return (string)GetValue(LabelContentProperty); }
        set { SetValue(LabelContentProperty, value); }
    }

    public static readonly DependencyProperty LabelContentProperty = DependencyProperty.Register
    (
        nameof(LabelContent),
        typeof(string),
        typeof(UserControl1),
        new PropertyMetadata(String.Empty)
    );    
}

then put it in a view and assign or bind property:

<mv:UserControl1 Name="uc1" LabelContent="My Text"/>

<mv:UserControl1 Name="uc2" LabelContent="{Binding Path=LabelContent, ElementName=uc1}"/>