Updating a dependency property based on changes in the view model

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.

Answer 2

It sounds like you can add a TextBox to your view and bind it's Text property to your view-model's DialedNumber property.

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

Your view-model property can look something like this:

    private string _dialedNumber;
    [DefaultValue("551")]
    public string DialedNumber
    {
        get { return _dialedNumber; }
        set
        {
            if (value == _dialedNumber)
                return;
            _dialedNumber= value;
            _yourModel.DialedNumber= _dialedNumber;
            this.RaisePropertyChanged("DialedNumber");
        }
    }

Let me know if I misunderstood your question.

Answer 3

DependencyProperties are meant to point to some other property to get their value. So you can either point it to your DialPadViewModel.DialedNumber, or you can point it to some other string when the UserControl is used (either a binding or a hardcoded value like "551"), but you can't do both.

In your case, when someone binds to the DialedNumber dependency property, they are replacing the current value (the binding to DialPadViewModel.DialedNumber) with a new value.

Depending on how your code looks and what you want to do, there are a few ways around it.

First, you could insist that people who want to use your control also use your ViewModel, and don't make DialedNumber a public dependency property.

So instead of being allowed to create a custom class with a property of SomeOtherDialedNumber and binding

<DialPad DialedNumber="{Binding SomeOtherDialedNumber}">

they are forced to use the DialPadViewModel in their code anytime they want to use the DialPad control. For this to work, you would need to remove the this.DataContext = new DialPadViewModel in your code-behind the UserControl since the user will be providing the DialPadViewModel to your UserControl, and you can use an implicit DataTemplate to tell WPF to always draw DialPadViewModel with your DialPad UserControl.

<DataTemplate DataType="{x:Type DialPadViewModel}">
    <local:DialPad />
</DataTemplate>

The other alternative I can think of is to synchronize your DependencyProperty with your ViewModel property with some PropertyChange notifications.

You would need to update DialPadViewModel.DialedNumber anytime the DialedNumber dependency property changes (You may need to use DependencyPropertyDescriptor.AddValueChanged for property change notification), and you would also have to write something to update the source of the DialedNumber dependency property anytime DialPadViewModel.DialedNumber changes.

Personally, if my UserControl has a ViewModel then I use the first option. If not, I get rid of the ViewModel entirely and build the logic for my UserControl in the code-behind, without a ViewModel.

The reason for this is that WPF works with two layers: a UI layer and a data layer. The DataContext is the data layer, and a ViewModel is typically part of the data layer. By setting the data layer (DataContext) explicitly in the UserControl's constructor, you are combining your data layer with your UI layer, which goes against one of the biggest reasons for using MVVM: separation of concerns. A UserControl should really just be a pretty shell only, and you should be able to place it on top of any data layer you want.