Binding the DataContext of a UserControl in XAML is not working (Windows Phone)

Question

When I bind the DataContext of a UserControl the binding works correctly. When I debug the program, I can see that the DataContext of the UserControl is bound to the correct ViewModel . However, when I bind to specific properties (like a text box) in the UserControl to the ViewModel , something fails. The UserControl will pick up the initial values of the ViewModel correctly. If I have some binding string property with a default value of "test", the UserControl displays this correctly. However, none of the changes get propagated back to the ViewModel . So entering "abcd" into the textbox originally displaying "test" does not update the ViewModel to "abcd". The ViewModel incorrectly contains the "test" string.

If the above was unclear or not specific enough, continue on. I'll lay out my architecture with code and XAML snippets.

I have a VM that aggregates other VMs. In this parent VM, child VMs are exposed as a bindable property.

public class ParentViewModel : ViewModel
{
    #region Binding Properties

    private const string ChildViewModelPropertyName = "ChildViewModel";
    private ChildViewModel childViewModel = new ChildViewModel();
    public ChildViewModel ChildViewModel 
    {
        get { return this.childViewModel ; } 
        set
        {
            if (value == this.childViewModel )
            {
                return;
            }
            this.childViewModel = value;
            RaisePropertyChanged(ChildViewModelPropertyName);
        }
    }

    //... 
}

The ChildViewModel is your typical VM and it exposes some other properties such as Strings that I want to bind to a text box or what not.

public class ChildViewModel : ViewModel
{
    #region Binding Properties

    private const string NamePropertyName = "Name";
    private string name = "";
    public string Name
    {
        get { return this.name; }
        set
        {
            if (value == this.name)
            {
                return;
            }
            this.name = value;
            RaisePropertyChanged(NamePropertyName);
        }
    }

    //...
}

Onto the XAML. The first XAML snippet represents an entire page, and this page's DataContext is bound to the ParentViewModel . This page contains a UserControl which has a DataContext binding associated with the ChildViewModel property exposed in the ParentViewModel .

<phone:PhoneApplicationPage ...>

   <!-- Sets the DataContext for the page. -->
   <phone:PhoneApplicationPage.DataContext>
        <vm:ParentViewModel/>
   </phone:PhoneApplicationPage.DataContext>

   <ScrollViewer>
       <phone:Pivot>
           <phone:PivotItem>
               <!-- ChildView is the UserControl whose DataContext should be bound to ChildViewModel -->
               <view:ChildView DataContext="{Binding ChildViewModel}"/>
           </phone:PivotItem>
       </phone:Pivot>
   </ScrollViewer>

</phone:PhoneApplicationPage>

The ChildView XAML is quite straight forward. There's a text box that is bound to the Name property in the ChildViewModel . To make it clear, I don't bind any DataContext in the ChildView since it has already been bound in the above snippet.

<UserControl ... >

    <StackPanel>
        <!-- Binding to the Name property -->
        <TextBox Text="{Binding Name}"/>
    </StackPanel>

</UserControl> 

If someone can tell me why this approach is not working, I will upvote your answer and say "Thanks!".

Answer 1

<TextBox Text ="{Binding Name,
                Mode=TwoWay}"/>

Setting binding mode to TwoWay will let View to update ViewModel .