title: UserControl's DataContext
body: <p>I'm creating a <code>UserControl</code> I want to use something like this:</p>
  
  <pre><code>&lt;controls:ColorWithText Color="Red" Text="Red color" /&gt;
  </code></pre>
  
  <p>So far, I've implemented similar controls like this:</p>
  
  <pre><code>&lt;UserControl x:Class="Namespace.ColorWithText" Name="ThisControl"&gt;
      &lt;StackPanel Orientation="Horizontal" &gt;
          &lt;Border Width="15" Height="15" Background="{Binding Color, ElementName=ThisControl}" /&gt;
          &lt;TextBlock Text="{Binding Text, ElementName=ThisControl}" /&gt;
      &lt;/StackPanel&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>where <code>Color</code> and <code>Text</code> are dependency properties of the control defined in code. This works, but specifying <code>ElementName</code> every time seems unnecessary.</p>
  
  <p>Another option that works is using</p>
  
  <pre><code>&lt;UserControl x:Class=… DataContext="{Binding ElementName=ThisControl}" Name="ThisControl"&gt;
  </code></pre>
  
  <p>and not specifying <code>ElementName</code>s, but that doesn't seem like a clean solution to me either.</p>
  
  <p>I have two questions:</p>
  
  <ol>
  <li>Why doesn't <code>&lt;UserControl DataContext="{RelativeSource Self}"&gt;</code> work?</li>
  <li>What is the best way to do something like this?</li>
  </ol>