title: Bind user control dependency properties in MVVM style Windows Phone app
body: <p>I'm having some issues with binding some custom controls in a Windows Phone app right now. Usually this is never an issue but apparently my mind can't comprehend this today.</p>
  
  <p>So I'm doing an MVVM style setup which is good. I have my page with a view and also a viewmodel. Now on a WebClient callback I assign the dataContext of my view to the list of models in my ViewModel, nice and simple thus far...now in my view I created a ListBox with a custom control in the datatemplate which is basically a cell in the list. I once again set my user controls dataContext to binding, and binding all the models values to the regular UI elements works no problem.</p>
  
  <p>Here's a sample:</p>
  
  <pre><code>&lt;Grid Grid.Column="0"&gt;
              &lt;Image Source="{Binding SmallPath}" VerticalAlignment="Top"/&gt;
          &lt;/Grid&gt;
  
          &lt;Grid Grid.Column="1"&gt;
              &lt;StackPanel Margin="12,0,0,0"&gt;
                  &lt;TextBlock x:Name="MemberId_TextBlock" Text="{Binding MemberId}" FontSize="28"
                             Margin="0,-8,0,0"
                             Foreground="{StaticResource PhoneForegroundBrush}"/&gt;
                  &lt;StackPanel Orientation="Horizontal" Margin="0,-11,0,0"&gt;
                      &lt;TextBlock Text="{Binding DaysReported}" FontSize="42"
                                 Margin="0,0,0,0"
                                 Foreground="{StaticResource PhoneAccentBrush}"/&gt;
                      &lt;TextBlock Text="days" FontSize="24"
                                 Margin="3,19,0,0"
                                 Foreground="{StaticResource PhoneSubtleBrush}"/&gt;
                  &lt;/StackPanel&gt;
              &lt;/StackPanel&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>That's in my user control, and here's the the view where the usercontrol is housed:</p>
  
  <pre><code>&lt;Grid x:Name="LayoutRoot" Background="Transparent"&gt;
      &lt;ListBox Name="TopSpotter_ListBox" ItemsSource="{Binding}"&gt;
          &lt;ListBox.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;StackPanel&gt;
                      &lt;!--&lt;TextBlock Text="{Binding MemberId}"/&gt;--&gt;
                      &lt;controls:TopSpotterItemControl DataContext="{Binding}"/&gt;
                      &lt;Grid Height="18"/&gt;
                  &lt;/StackPanel&gt;
              &lt;/DataTemplate&gt;
          &lt;/ListBox.ItemTemplate&gt;
      &lt;/ListBox&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Now this is good enough but what I want to do in my view is set data from my model like Booleans that determine whether or not I should show certain Grids etc. So if I try to set a dependency property explicitly in my control it fires and will run logic in the Getter/Setters for instance. HOWEVER if I try to set these custom objects from a binding source it won't actually set.</p>
  
  <p>Here's what works:</p>
  
  <pre><code>&lt;controls:TopSpotterItemControl ChampVisibility="True"&gt;
  </code></pre>
  
  <p>This way will trigger the ChampVisibility property and then in the code behind of the user control I can set visibilities.</p>
  
  <p>Here's what fails but I want to work:</p>
  
  <pre><code>&lt;controls:TopSpotterItemControl ChampVisibility="{Binding IsChamp"&gt;
  </code></pre>
  
  <p>In addition I can still set the DataContext to {Binding} and the result will be unchanged.</p>
  
  <p>In this scenario IsChamp is part of my model that I would like to bind to this user control which I guess comes from the dataContext being set on the view from the viewModel. I'm not sure what I can do to get this so the bindings work etc. without having to set custom properties.</p>
  
  <p>Finally, here's my user control:</p>
  
  <pre><code>public partial class TopSpotterItemControl : UserControl
  {
      public string MemberId
      {
          get
          {
              return this.MemberId_TextBlock.Text;
          }
          set
          {
              this.MemberId_TextBlock.Text = value;
          }
      }
  
      public bool ChampVisibility {
          set
          {
              if (value)
              {
                  this.Champ_Grid.Visibility = System.Windows.Visibility.Visible;
              }
          }
      }
  
      public static readonly DependencyProperty MemberNameProperty =
          DependencyProperty.Register("MemberId", typeof(string), typeof(TopSpotterItemControl), new PropertyMetadata(null));
  
      public static readonly DependencyProperty ChampVisibilityProperty =
          DependencyProperty.Register("ChampVisibility", typeof(bool), typeof(TopSpotterItemControl), new PropertyMetadata(null));
  
      public TopSpotterItemControl()
      {
          InitializeComponent();
      }
  }
  </code></pre>
  
  <p>Bit long winded and I hope I made things on the issue clear. My one major hang up so far, and I'd like to abstract as much control as I can to the user control via dependency properties explicitly set in xaml, rather than setting up binding in its xaml that depend on the knowledge of a model. Thanks!</p>