Binding model with multiple properties in UserControl using one DependencyProperty

Question

I would like to be able to bind complex model (many properties) to UserControl through DependencyProperty, and if model would be edited in UserControl I would like to see this edited information inside my binded model.

Example application: Model, UserControl (xaml + cs), MainWindow (xaml + cs). I have no ViewModel to simplify idea.

Model:

public class MyModel : INotifyPropertyChanged
{
    private string _surname;
    private string _name;

    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public string Surname
    {
        get => _surname;
        set
        {
            _surname = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

MyModelEditor.xaml (inside Grid):

<DockPanel>
    <TextBox Text="{Binding MyModel.Name}"/>
    <TextBox Text="{Binding MyModel.Surname}"/>
</DockPanel>

Also contains this line in UserControl root element: DataContext="{Binding RelativeSource={RelativeSource Self}}"

MyModelEditor.xaml.cs:

public partial class MyModelEditor : UserControl
{
    public MyModel MyModel
    {
        get => (MyModel)GetValue(MyModelProperty);
        set => SetValue(MyModelProperty, value);
    }

    public static readonly DependencyProperty MyModelProperty =
        DependencyProperty.Register("MyModel", typeof(MyModel), typeof(MyModelEditor), new FrameworkPropertyMetadata(null));

    public MyModelEditor()
    {
        InitializeComponent();
    }
}

MainWindow.xaml (inside Grid):

<DockPanel>
    <Button DockPanel.Dock="Bottom" Content="Press Me!" Click="ButtonBase_OnClick"/>
    <controls:MyModelEditor MyModel="{Binding MyModel}"/>
</DockPanel>

MainWindow.xaml.cs:

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private MyModel _myModel;

    public MyModel MyModel
    {
        get => _myModel;
        set
        {
            _myModel = value;
            OnPropertyChanged();
        }
    }

    public MainWindow()
    {
        InitializeComponent();
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

    private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        MessageBox.Show(MyModel?.Name);
    }
}

My test scenario: type text in textbox, press button.
Current behavior: Message after pressing button is empty.
Expected behavior: Message after pressing button is same like in textbox.

I wold not like to bind to all properties separately, because in future I will have much more then two properties.

Why current approach does not work? How can I achieve my goal?

Answer 1

You are apparently not using the UserControl instance as Binding source in your UserControl's XAML. One way to do this would be to set the Binding's RelativeSource:

<TextBox Text="{Binding MyModel.Name,
                RelativeSource={RelativeSource AncestorType=UserControl}}"/>

---

However, you don't need a new dependency property at all for this purpose. Just bind the UserControl's DataContext to a MyModel instance, like

<controls:MyModelEditor DataContext="{Binding MyModel}"/>

The Bindings in the UserControl's XAML would automatically work with the MyModel object, like this:

<DockPanel>
    <TextBox Text="{Binding Name}"/>
    <TextBox Text="{Binding Surname}"/>
</DockPanel>

Answer 2

For both of your TextBox controls, you should define their Binding with a TwoWay mode (ms docs on binding modes). Which, basically, would assure that the data flow is working in both direction (i.e. from the view model into the view and the other way around):

<DockPanel>
    <TextBox Text="{Binding MyModel.Name, Mode=TwoWay}"/>
    <TextBox Text="{Binding MyModel.Surname, Mode=TwoWay}"/>
</DockPanel>

As a good practice, you should always explicitly define what is the mode of the the Binding (NOTE: by default it's OneWay TwoWay - how to know which is the default?).

Another tip would be to go ahead and use MvvmHelpers nuget (github project), which could spare you the time of implementing INotifyPropertyChanged. Besides, you shouldn't re-invent the wheel

EDIT: Fixes are in your GitHub repo

Two things to note here

1. You have not instantiated your ViewModel (i.e. MyModel), so it was always null
2. You don't need to create DependencyPropery every time you want to pass some information to your UserControl. You could simply bind the DataContext itself