title: How to bind a DependencyProperty of a UserControl to a property in it's ViewModel in MVVM?
body: <p>The question is not about how to get the stuff working, it already does; it's about some strange behavior I'm experiencing, and I need to understand it. I have a <code>ResourceDictionary</code> that contains some styles, one of them got <code>TargetType="{x:Type UserControl}"</code> and <code>x:Key="UCStyle"</code>; that one is applied on multiple <code>UserControl</code>s in the project.
  Some of these <code>UserControl</code>s got <code>string State</code> property in their ViewModel to be used to apply Visual States (through an external class, and an attached property, bound to the ViewModel in XAML). Till this point everything was perfect, then, I tried to add <code>DependencyProperty State</code> to the <code>UserControl</code>, and simply bind it to the state property in the ViewModel, my attempt was:</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;ResourceDictionary&gt;
          &lt;ResourceDictionary.MergedDictionaries&gt;
              &lt;!--ResourceDictionary Source="..."/--&gt;
          &lt;/ResourceDictionary.MergedDictionaries&gt;
          &lt;Style x:Key="MyStyle" TargetType="{x:Type local:MyUserControl}" BasedOn="{StaticResource UCStyle}"&gt;
              &lt;Setter Property="State" Value="{Binding State, Mode=TwoWay}"/&gt;
          &lt;/Style&gt;
      &lt;/ResourceDictionary&gt;
  &lt;/UserControl.Resources&gt;
  &lt;UserControl.Style&gt;
      &lt;DynamicResourceExtension ResourceKey="MyStyle" /&gt;
  &lt;/UserControl.Style&gt;
  </code></pre>
  
  <p>This worked perfectly at the runtime, but in the design-time, it always underline these lines
  <a href="https://i.stack.imgur.com/Ei59A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ei59A.jpg" alt="&#39;MyUserControl&#39; TargetType doesn&#39;t match type of element &#39;UserControl&#39;."></a></p>
  
  <p>And shows an error says: </p>
  
  <blockquote>
    <p>'MyUserControl' TargetType doesn't match type of element 'UserControl'.</p>
  </blockquote>
  
  <p>And doesn't apply neither <code>UCStyle</code> nor <code>MyStyle</code> in the XAML Viewer in Visual Studio, and doesn't even draw the child <code>UserControl</code>s properly. I didn't expect the solution to run properly, but it did!</p>
  
  <p>Now my questions are:</p>
  
  <ul>
      <li>Why does it show these errors in the design-time while it runs properly?</li>
      <li>How to get rid of these errors in the design-time? (I cleaned, and re-built the solution, and restarted Visual Studio, and none of these worked)</li>
      <li>What's the best practice to deal with `UserControl` Visual States in such situation in <strong>MVVM</strong>?</li>
      <li>What's the best practice to bind a DependencyProperty of a UserControl to a property in it's ViewModel in <strong>MVVM</strong>?</li>
  </ul>
  
  <p><em>I'm using Visual Studio 2012.</em></p>