Custom Control not displaying correctly

Question

The Suraface SDK exmaples includes an exmaple which creates a ScatterViewItem which contains an Image and allows the user to annotate the image using a InkCanvas, it also contains two buttons which changes modes.

 <!-- Photo Pad - Transparent InkCanvas with transparent background overlaid on an image -->
<s:ScatterViewItem Height="256" Width="342" MinWidth="225" MaxWidth="600">
  <Grid>
    <!-- Row and column definitions to position content and buttons -->
    <Grid.RowDefinitions>
      <RowDefinition Height="30" />
      <RowDefinition />
      <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="30" />
      <ColumnDefinition />
      <ColumnDefinition Width="30" />
      <ColumnDefinition Width="30" />
      <ColumnDefinition Width="30" />
      <ColumnDefinition />
      <ColumnDefinition Width="30" />
    </Grid.ColumnDefinitions>

    <!-- The Ink Canvas -->
    <Grid Grid.Column="0" Grid.ColumnSpan="7" Grid.Row="0" Grid.RowSpan="5">
      <Image Name="Photo" />

      <Viewbox StretchDirection="Both" Stretch="Fill">
        <s:SurfaceInkCanvas x:Name="PostcardCanvas" IsHitTestVisible="False" Height="256" Width="342" Background="Transparent" UsesTouchShape="False" />
      </Viewbox>
    </Grid>

    <!-- Clear -->
    <s:SurfaceButton Grid.Row="2" Grid.Column="2" Padding="5" Click="ClearClicked">
      <Image Source="Resources\Clear.png" />
    </s:SurfaceButton>

    <!-- Move/Draw Mode -->
    <s:SurfaceButton Grid.Row="2" Grid.Column="4" Padding="5" Click="InkCanvasOnOffChanged">
      <Image x:Name="MoveButtonImage" Source="Resources\Move.png" />
    </s:SurfaceButton>
  </Grid>
</s:ScatterViewItem>

I tried to create a User Control using the mark-up above but when I run my example only a small part of the image is displayed and no buttons exist despite the control being rendered correctly in the Visual studio editor.

My Custom Control is as follows:

<UserControl x:Class="Interactive_Phone_Call.AnnotatedImage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:s="http://schemas.microsoft.com/surface/2008"
         d:DesignHeight="500" d:DesignWidth="500"
         mc:Ignorable="d">

<Grid Height="256" Width="342" MinWidth="225" MaxWidth="600">
        <!-- Row and column definitions to position content and buttons -->
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30" />
            <ColumnDefinition />
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="30" />
            <ColumnDefinition />
            <ColumnDefinition Width="30" />
        </Grid.ColumnDefinitions>

        <!-- The Ink Canvas -->
        <Grid Grid.Column="0" Grid.ColumnSpan="7" Grid.Row="0" Grid.RowSpan="5">
        <Image Name="Photo"/>
        <Viewbox StretchDirection="Both" Stretch="Fill">
                <s:SurfaceInkCanvas x:Name="PostcardCanvas" IsHitTestVisible="False" Height="256" Width="342" Background="Transparent" UsesTouchShape="False" />
            </Viewbox>
        </Grid>

        <!-- Clear -->
        <s:SurfaceButton Grid.Row="2" Grid.Column="2" Padding="5" Click="ClearClicked">
            <Image Source="Resources\Clear.png" />
        </s:SurfaceButton>

        <!-- Move/Draw Mode -->
        <s:SurfaceButton Grid.Row="2" Grid.Column="4" Padding="5" Click="InkCanvasOnOffChanged">
            <Image x:Name="MoveButtonImage" Source="Resources\Move.png" />
        </s:SurfaceButton>
    </Grid>

In my application I create a ScatterView

<s:ScatterView x:Name="scatter">

    </s:ScatterView>

And then add the control using:

scatter.Items.Add(new AnnotatedImage("Resources\\Desert.jpg"));

I am new to WPF and the Surface SDK, could anyone please tell me where I am going wrong?