title: Binding the DataContext of a UserControl in XAML is not working (Windows Phone)
body: <p>When I bind the <code>DataContext</code> of a <code>UserControl</code> the binding works correctly. When I debug the program, I can see that the <code>DataContext</code> of the <code>UserControl</code> is bound to the correct <code>ViewModel</code>. However, when I bind to specific properties (like a text box) in the <code>UserControl</code> to the <code>ViewModel</code>, something fails. The <code>UserControl</code> will pick up the initial values of the <code>ViewModel</code> correctly. If I have some binding string property with a default value of "test", the <code>UserControl</code> displays this correctly. However, none of the changes get propagated back to the <code>ViewModel</code>. So entering "abcd" into the textbox originally displaying "test" does not update the <code>ViewModel</code> to "abcd". The <code>ViewModel</code> incorrectly contains the "test" string. </p>
  
  <p>If the above was unclear or not specific enough, continue on. I'll lay out my architecture with code and XAML snippets.</p>
  
  <p>I have a VM that aggregates other VMs. In this parent VM, child VMs are exposed as a bindable property.</p>
  
  <pre><code>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);
          }
      }
  
      //... 
  }
  </code></pre>
  
  <p>The <code>ChildViewModel</code> is your typical VM and it exposes some other properties such as <code>Strings</code> that I want to bind to a text box or what not. </p>
  
  <pre><code>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);
          }
      }
  
      //...
  }
  </code></pre>
  
  <p>Onto the XAML. The first XAML snippet represents an entire page, and this page's <code>DataContext</code> is bound to the <code>ParentViewModel</code>. This page contains a <code>UserControl</code> which has a <code>DataContext</code> binding associated with the <code>ChildViewModel</code> property exposed in the <code>ParentViewModel</code>. </p>
  
  <pre><code>&lt;phone:PhoneApplicationPage ...&gt;
  
     &lt;!-- Sets the DataContext for the page. --&gt;
     &lt;phone:PhoneApplicationPage.DataContext&gt;
          &lt;vm:ParentViewModel/&gt;
     &lt;/phone:PhoneApplicationPage.DataContext&gt;
  
     &lt;ScrollViewer&gt;
         &lt;phone:Pivot&gt;
             &lt;phone:PivotItem&gt;
                 &lt;!-- ChildView is the UserControl whose DataContext should be bound to ChildViewModel --&gt;
                 &lt;view:ChildView DataContext="{Binding ChildViewModel}"/&gt;
             &lt;/phone:PivotItem&gt;
         &lt;/phone:Pivot&gt;
     &lt;/ScrollViewer&gt;
  
  &lt;/phone:PhoneApplicationPage&gt;
  </code></pre>
  
  <p>The <code>ChildView</code> XAML is quite straight forward. There's a text box that is bound to the <code>Name</code> property in the <code>ChildViewModel</code>. To make it clear, I don't bind any <code>DataContext</code> in the <code>ChildView</code> since it has already been bound in the above snippet.</p>
  
  <pre><code>&lt;UserControl ... &gt;
  
      &lt;StackPanel&gt;
          &lt;!-- Binding to the Name property --&gt;
          &lt;TextBox Text="{Binding Name}"/&gt;
      &lt;/StackPanel&gt;
  
  &lt;/UserControl&gt; 
  </code></pre>
  
  <p>If someone can tell me why this approach is not working, I will upvote your answer and say "Thanks!".</p>