title: UWP UserControl + ContentControl
body: <p>I'm trying to understand how content controls work and how I can place one inside a user control I'm constructing. From what I understand, my user control should have an object dependency property and then I should be able to add a content control to my user control and bind it to the dependency property.</p>
  
  <p>I've tried variations of the User Control <code>XAML</code>, including bypassing the <code>ScrollViewer</code> element and placing the <code>ContentControl</code> inside the base grid of the User Control <code>XAML</code>.</p>
  
  <p>How do I place this image inside this control? And more broadly how do I place any <code>XAML</code> inside a User Control?</p>
  
  <p><strong>User Control CS</strong></p>
  
  <pre><code>namespace CoreProject.UserControls
  {
  public sealed partial class ZoomControl : UserControl
  {
      public ZoomControl()
      {
          this.InitializeComponent();
      }
  
      #region Properties
      public static readonly DependencyProperty ZoomContentProperty =
      DependencyProperty.Register("ZoomContent", typeof(object), typeof(ZoomControl), new PropertyMetadata(null));
      public object ZoomContent
      {
          get { return (object)GetValue(ZoomContentProperty); }
          set { SetValue(ZoomContentProperty, value); }
      }
      #endregion
  
      public void UnZoom()
      {
          // unzoom
          ImageScrollViewer.Visibility = Visibility.Visible;
          var period = TimeSpan.FromMilliseconds(10);
          Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =&gt;
          {
              await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =&gt;
              {
                  ImageScrollViewer.ChangeView(0.0, 0.0, 0.8F, true);
                  ImageScrollViewer.Visibility = Visibility.Collapsed;
              });
          }, period);
      }
  
      public void ZoomToPosition(double zoomOriginX, double zoomOriginY, float zoomFactor, bool disableAnimations)
      {
          ImageScrollViewer.Visibility = Visibility.Visible;
          var period = TimeSpan.FromMilliseconds(10);
          Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =&gt;
          {
              await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =&gt;
              {
                  ImageScrollViewer.ChangeView(zoomOriginX, zoomOriginY, 1.2F, disableAnimations);
              });
          }, period);
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>User Control Xaml</strong></p>
  
  <pre><code>&lt;Grid&gt;
      &lt;ScrollViewer x:Name="ImageScrollViewer" 
                    ZoomMode="Enabled" 
                    Visibility="Collapsed" 
                    HorizontalContentAlignment="Center" 
                    VerticalContentAlignment="Center" 
                    Background="Transparent" 
                    HorizontalScrollMode="Enabled"
                    VerticalScrollMode="Enabled"
                    HorizontalScrollBarVisibility="Hidden"
                    VerticalScrollBarVisibility="Hidden"&gt;
          &lt;Grid&gt;
              &lt;!-- HERE IS WHERE I WANT TO PLACE MY CONTENT --&gt;
              &lt;ContentControl Content="{Binding ZoomContent, ElementName=zoomContent}" /&gt;
          &lt;/Grid&gt;
      &lt;/ScrollViewer&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>User Control Usage</strong></p>
  
  <pre><code>&lt;usercontrols:ZoomControl x:Name="ZoomControl"&gt;
      &lt;usercontrols:ZoomControl.ZoomContent&gt;
          &lt;!-- THIS IS HOW I WANT TO ADD MY CONTENT, SIMPLY PLACE XAML ELEMENT --&gt;
          &lt;Image Source="/Assets/colocationDataCenterData.jpg" /&gt;
      &lt;/usercontrols:ZoomControl.ZoomContent&gt;
  &lt;/usercontrols:ZoomControl&gt;
  </code></pre>