WPF - What is the proper binding method for multiple layers?

Question

I've been looking into this problem for a while now, and I would like to know the proper way to do this. I want to make re-usable controls that the properties can be bound to, Then update the controls themselves when the bound property is updated from another source.

So this is kind of the layout;

I have a page (we can call it Page X) that implemented a View Model (View Model X). There is a property in the View Model X (RealPropertyX of type Boolean).

I have a user control that is a sliding checkbox that has a View and View Model.

The View has a Dependency Property:

public bool ValueChecked
    {
        get { return (bool)GetValue(ValueCheckedProperty); }
        set { SetValue(ValueCheckedProperty, value); }
    }

    public static readonly DependencyProperty ValueCheckedProperty =
        DependencyProperty.Register("ValueChecked", typeof(bool), typeof(SliderCheckbox),
            new PropertyMetadata(false));

The View Model implements the bindable property to the view of my user control:

private bool _valueChecked;

    public bool ValueChecked
    {
        get { return _valueChecked; }
        set
        {
            _valueChecked = value;
            OnPropertyChanged(nameof(ValueChecked));
        }
    }

In my SliderUserControl

<CheckBox ... IsChecked="{Binding ValueChecked}"/>

In my Page X View

<controls:SliderCheckbox ValueChecked="{Binding RealPropertyX, Mode=TwoWay}"/>

If my thinking is correct, then from my App View I would be binding to the dependency property on my User Control View. The User Control itself is bound to the property in the View Model. But how do I link the two properly allowing them all to communicate the same value?

I am not sure if I understand your question correctly but in general a `UserControl` isn't tied to a specific view model. It typically inherits its `DataContext` from a parent element which means that you can bind its dependency properties to several different view models depending on the context. — mm8, May 25 '21 at 15:13
So having the DependencyProperty, how would I bind from the dependency property in the view of the UserControl to a checkbox on the View? — Jay Mason, May 25 '21 at 15:15
For example using a relative source: `IsChecked="{Binding ValueChecked, RelativeSource={RelativeSource AncestorType=UserControl}}"` — mm8, May 25 '21 at 15:16

score 2 · Accepted Answer · answered May 25 '21 at 15:19

Generally speaking, a UserControl shouldn't be tied to a specific view model. It typically inherits its DataContext from a parent element which means that you can bind its dependency properties to several different view models depending on the context:

<local:UserControl1 SomeProperty="{Binding SomeSourceProperty}" />

To bind a control in the XAML markup of the UserControl to any of its own dependency properties that are defined in the code-behind, you could use a relative source:

<CheckBox ... IsChecked="{Binding ValueChecked,
    RelativeSource={RelativeSource AncestorType=UserControl}}" />

WPF - What is the proper binding method for multiple layers?

1 Answers1