Question

I’m having some problems with data binding in WPF. Here’s the scenario: I have made a user control which simulates a Dial Pad (i.e., an array of 12 buttons with the digits from ‘0’ to ‘9’ plus the ‘#’ and ‘Clear’ keys). The control lives inside a class library and it’s been implemented following the MVVM pattern, mainly because I need the components in the class library to be easily unit tested.

The view model for the control is quite simple, it basically updates a public “DialedNumber” string (which is internally connected to the model) every time the user presses a dial pad key button. The binding is working correctly and, by using the debugger, I can confirm that the “DialedNumber” variable inside the viewmodel is getting updated as I press button in the dial pad.

This DialPad control is used by a separate XAML file (Panel.xaml), which laids out several controls that belong to my custom class library.

Now, I’d like to add a TextBlock inside my Panel file in order to display the “DialedNumber” string held inside the DialPad. This is the code snippet in Panel.xaml:

<PanelControls:DialPad x:Name="MyDialPad" DialedNumber="55325"/>
<TextBlock Text="{Binding ElementName=MyDialPad, Path=DialedNumber}" />

The result I’m getting is that the textblock displays the correct number on start (i.e., “55325”), but its content doesn’t get updated as I press the dial pad keys (even though the DialPad’s viewmodel gets updated as I press new keys, as I’ve checked with the debugger).

Here’s the code behind for the DialPad view:

public partial class DialPad : UserControl
{
    public DialPad()
    {
        InitializeComponent();
        DataContext = new DialPadViewModel();
    }

    public void DialedNumberChanged(object sender, EventArgs e)
    {
        return;
    }

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

    public string DialedNumber
    {
        get
        {
            var dialPadViewModel = Resources["DialPadVM"] as DialPadViewModel;
            return (dialPadViewModel != null) ? dialPadViewModel.DialedNumber : "";
        }
        set
        {
            var dialPadViewModel = Resources["DialPadVM"] as DialPadViewModel;
            if (dialPadViewModel != null)
            {
                dialPadViewModel.DialedNumber = value;
            }
        }
    }
}

Here’s the DialPad view model:

public class DialPadViewModel : ObservableObject
{
    public DialPadViewModel()
    {
        _dialPadModel = new DialPadModel();
    }

    #region Fields

    private readonly DialPadModel _dialPadModel;
    private ICommand _dialPadKeyPressed;

    #endregion

    #region Public Properties/Command

    public DialPadModel DialPadModel
    {
        get { return _dialPadModel; }
    }

    public ICommand DialPadKeyPressedCommand
    {
        get
        {
            if (_dialPadKeyPressed == null)
            {
                _dialPadKeyPressed = new RelayCommand(DialPadKeyPressedCmd);
            }
            return _dialPadKeyPressed;
        }
    }

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

    #endregion

    #region Private Helpers

    private void DialPadKeyPressedCmd(object parameter)
    {
        string keyPressedString = parameter.ToString();

        if (keyPressedString.Length > 0)
        {
            if (char.IsDigit(keyPressedString[0]))
            {
                DialedNumber += keyPressedString[0].ToString(CultureInfo.InvariantCulture);
            }
            else if (keyPressedString == "C" || keyPressedString == "Clr" || keyPressedString == "Clear")
            {
                DialedNumber = "";
            }
        }
    }

    #endregion
}

Let me restate my problem: the textblock in Panel.xaml displays the correct number (55325) on start, but its value never gets updated as I press the DialPadButtons. I’ve placed a breakpoint inside DialPadKeyPressedCmd and I can confirm that the method gets executed everytime I press a key in the dial pad.

Answer 1

If you place your DialPad in your View, you can create a DialPadViewModel-Property (public+global) in your ViewViewModel:

public DialPadViewModel DialPadViewModel = new DialPadViewModel();

Now set the DataContext-Binding of your View to the ViewViewModel and bind the DialPads DataContext also to it, like

<local:DialPad DataContext="{Binding}"/>

Now you can bind to the properties in your DialPadViewModel:

<TextBox Text="{Binding Path=DialPadViewModel.DialedNumber}"/>

Thats how you can Access your DialPadViewModel from your View and your DialPad.

EDIT:

Now try changing your DialedNumber Property in your DialPad.xaml.cs like this:

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

EDIT 2: I found the Problem:

In your DialPad.xaml all your Commands were bound to the DialPadViewModel from the resources, while the TextBloc was bound to the DialPads DataContext, which is another instance of the DialPadViewModel.

So everytime you hit a DialPad-Button you changed the value of the DialedNumber from the resources’ DPVM-instance not the DialedNumber from the DataContext’s DPVM-instance.