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

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!