title: Windows Phone 8 User Control with content
body: <p>I want to create a gauge like user control that will display in the background a set of rectangles with proportional width based on a certain DataContext object values. Fot the simplicity of problem I hardcoded rectangles drawing in the sample below.</p>
  
  <pre><code>&lt;UserControl x:Class="MyApp.UI.BlockGauge"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      FontFamily="{StaticResource PhoneFontFamilyNormal}"
      FontSize="{StaticResource PhoneFontSizeNormal}"
      Foreground="{StaticResource PhoneForegroundBrush}"
      d:DataContext="{d:DesignData SampleData/SampleViewModelSampleData.xaml}"
      d:DesignWidth="468" 
      d:DesignHeight="120"
      Name="GaugeControl"&gt;    
  
      &lt;Grid x:Name="LayoutRoot"  Margin="0"&gt;
          &lt;StackPanel x:Name="RootPanel"&gt;
              &lt;Canvas x:Name="BackgroundCanvas"  Height="{Binding ActualHeight, ElementName=RootPanel}" Width="{Binding Width, ElementName=LayoutRoot}"&gt;
                  &lt;ContentPresenter Canvas.ZIndex="0"/&gt;
                  &lt;Rectangle Width="240" Height="{Binding ActualHeight, ElementName=BackgroundCanvas}" Fill="{StaticResource PhoneAccentBrush}" Canvas.ZIndex="-20" /&gt;
                  &lt;Rectangle Width="80" Height="{Binding ActualHeight, ElementName=BackgroundCanvas}" Fill="Green" Canvas.ZIndex="-20" Canvas.Left="240"/&gt;
                  &lt;Rectangle Width="40" Height="{Binding ActualHeight, ElementName=BackgroundCanvas}" Fill="Orange" Canvas.ZIndex="-20" Canvas.Left="320"/&gt;
              &lt;/Canvas&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>The main reason I decide to go with userControl is to calculate rectangles basing on a view-model object bound to it. </p>
  
  <p>I want this control to work on backgound only and allow contents being set by a parent. Whenever I set a content - all user control content is overriden by it and I can see a new contents instead of hardcoded rectagles. I want custom content over a dynamic backgroud.</p>
  
  <p>I've tried templating inside the control but it says that Template propterty is not supported for a user control.</p>
  
  <pre><code>&lt;UserControl.Template&gt;
      &lt;ControlTemplate&gt;
  
      &lt;/ControlTemplate&gt;
  &lt;/UserControl.Template&gt;
  </code></pre>
  
  <p>How can present a injected content over dynamically drawn background?</p>