Binding a variable inside a viewmodel to a different variable in another viewmodel

Question

I'm implementing a WPF application using the MVVM pattern.

The application is basically a communications panel (comms panel) with control widgets laid on top of it (e.g., dial pads, intercom lines, etc). The control widgets have also been implemented using the MVVM pattern, as this allows us to easily test them on an individual basis.

I have this "dial pad" control widget, which exposes a DialedNumber public field in its view model:

public string DialedNumber
    {
        get { return _dialPadModel.DialedNumber; }
        set
        {
            _dialPadModel.DialedNumber = value;
            RaisePropertyChanged("DialedNumber");
        }
    }

The "dial pad" control widget also exposes its view model via a public field in the view:

public DialPadViewModel DialPadViewModel
    {
        get { return DataContext as DialPadViewModel; }
    }

And it also exposes it through its view, which just writes/reads from the public field in the view model:

public string DialedNumber
    {
        get
        {
            return DialPadViewModel.DialedNumber;
        }
        set
        {
            DialPadViewModel.DialedNumber = value;
        }
    }

The DialPad is placed in a comms panel (also implemented using MVVM), which has a DialedPABXNumber public field in its view model:

public string DialedPABXNumber
    {
        get { return _dialedPABXNumber; }
        set
        {
            _dialedPABXNumber = value;
            OnPropertyChanged("DialedPABXNumber");
        }
    }

Now, I want to be able to link the DialedNumber field from the DialPad to the DialedPABXNumber field from the comms panel. However, I'm struggling in coming up with the right XAML syntax in order to do it. My approach would be something like this:

<PanelControls:DialPad x:Name="MyDialPad2" DialPadViewModel.DialedNumber="{Binding Path=CommsPanelViewModel.DialedPABXNumber, Mode=OneWayToSource}"/>

By doing this, I'm getting a runtime exception when the comms panel XAML is loaded. More specifically:

Cannot set unknown member '{http://schemas.microsoft.com/winfx/2006/xaml/presentation}DialPadModel.DialedNumber'.

How can I specify in the XAML that I'd like to access DialPadViewModel.DialedNumber?

Edit: Adding this background information about how the components fit together. The application's main window has two sub-windows: a control panel on the left and the proper comms panel, which is loaded dynamically.

<Window x:Class="Comms.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Views="clr-namespace:Comms.View"
    xmlns:ViewModel="clr-namespace:Comms.ViewModel"
    Title="Comms" Height="350" Width="525" Closing="WindowClosing">
<Window.Resources>
    <DataTemplate x:Name="CommsControlPanelViewModel" DataType="{x:Type ViewModel:CommsControlPanelViewModel}">
        <Views:CommsControlPanelView x:Name="CommsControlPanelView"/>
    </DataTemplate>
    <DataTemplate x:Name="CommsPanelViewModel" DataType="{x:Type ViewModel:CommsPanelViewModel}">
        <Views:CommsPanelView x:Name="CommsPanelView"/>
    </DataTemplate>
</Window.Resources>

<StackPanel x:Name="Layout" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">
    <ContentControl Content="{Binding CommsControlPanelView}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <ContentControl Content="{Binding CommsPanelView}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>

The comms panel is dynamically loaded. Here's the XAML file for the panel:

<Border x:Name="CommsPanelBorder"
    Style="{DynamicResource BorderTemplate}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:PanelControls="clr-namespace:CommsPanelControlsLib.View;assembly=CommsPanelControlsLib"
    VerticalAlignment="Top">
<StackPanel>
    <!-- PABX Dial Pad -->
    <StackPanel Orientation="Horizontal">
    <PanelControls:DialPad x:Name="MyDialPad2" DialPadViewModel.DialedNumber="{Binding Path=CommsPanelViewModel.DialedPABXNumber, Mode=OneWayToSource}"/>
    </StackPanel>
</StackPanel>

Answer 1

I'm a bit confused about what you're trying to do, however it sounds like you're trying to bind a property from one object to a property in another object

First off, there are two types of properties: Regular properties and Dependency Properties. If you want to set a property with a binding it needs to be a DependencyProperty, so DialPadViewModel.DialedNumber must be a dependency property if the value is going to be supplied by a binding like you have.

Second, your actual binding is trying to reference CommsPanelViewModel.DialedPABXNumber. This will actually bind to MyDialPad2.DataContext.CommsPanelViewModel.DialedPABXNumber, which I think if I understand your code correctly, is not a valid property.

I think what you are trying to do is find the CommsPanelViewModel that is the DataContext for CommsPanelView, and bind to its DialedPABXNumber property.

To do this, you first need to change the source of the binding to find your CommsPanelView through either a RelativeSource or ElementName binding, and you need to set the Path to DataContext.DialedPABXNumber, because the DataContext for CommsPanelView is a CommsPanelViewModel, and that view model has the property DialedPABXNumber

<PanelControls:DialPad x:Name="MyDialPad2" DialPadViewModel.DialedNumber="{Binding ElementName=CommsPanelView, Path=DataContext.DialedPABXNumber, Mode=OneWayToSource}"/>

That said, I'm not positive that you'll be able to find the CommsPanelView with a binding using your current XAML layout, due to the templates involved. Give it a try, but if that isn't the case you still have a few options available to you.

You could try storing the property you need in an unused dependency property such as the Tag property, then you can use a RelativeSource or ElementName property to find the ContentControl and bind to its Tag property

<ContentControl Content="{Binding CommsControlPanelView}" Tag="{Binding CommsPanelView.DialedPABXNumber}" />

You could also use some kind of Messaging System like MVVM Light's Messenger or Prism's EventAggregator to pass the value around. (I have a brief summary of these in an article on my blog)

Or you could link the two properties in the ViewModel layer, so CommsControlPanelViewModel contains a property to store CommsViewModel.DialedPABXNumber and that property gets updated when needed from the ViewModel layer itself.

Answer 2

To bind to a property, this property has to be a DependencyProperty. You could make a Dummy-Property on your View an manipulate your ViewModel through the PropertyChangedCallback:

public static DependencyProperty TestProperty = DependencyProperty.Register("Test", typeof(string), typeof(View), new PropertyMetadata("default", new PropertyChangedCallback(TestPropertyChanged)));
public string Test
{
    get { return GetValue(TestProperty).ToString(); }
    set { SetValue(TestProperty, value); }
}
public static void TestPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
    ViewModel vm= ((View)obj).DataContext;
    if (vm.Test != e.NewValue.ToString())
    {
        vm.Test = e.NewValue.ToString();
    }
} 

Now you can bind to this property in your View.

But I think this violates the MVVM-pattern, doesnt it?

Answer 3

After a long chat with Blachshma (thanks Blachshma!), I modified the DialPad code by getting rid of its model and moving the code inside the viewmodel to its code behind.

The binding I've used in the panel's XAML file is as follows:

<PanelControls:DialPad x:Name="MyDialPad2" DialedNumber="{Binding Path=CommsPanelViewModel.DialedPABXNumber, Mode=OneWayToSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"/>

I can confirm that clicking the buttons in the dial pad is effectively triggering a change in the DialedPABXNumber field inside the CommsPanelViewModel, which is what I wanted. However, in order to do that, I made some heavy modifications in the DialPad's code and now I cannot perform unit tests on it. I'll mark the question as answered and I'll open a new one in order to deal with this new issue.

Thanks everyone for your input!