How to expand Designer View with ScrollViewer in Visual Studio 2013? - xaml

Question

I am adding more content than the Designer View sees in Visual Studio 2013 for Windows Phone 8. I added ScrollViewer within the Grid to be scrollable but it doesn't scroll neither does designer view and I cannot see the content but only see highlights of my content and move them about invisibility without seeing exactly where I would like it to be positioned. The last three buttons I put are not seen in designer view because the view is cut off from seeing it.
So, I would like a solution as to how I can work with the designer view that expands content larger than designer view on a single page?
Secondly, the ScrollViewer is not visible when applied to the Grid. Any solutions to make it work?
Thanks!
XAML Code Focus:
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="JP APPS" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="<Data Query>" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalScrollBarVisibility="Visible" Height="1000" Width="Auto">
<Grid>
<TextBlock x:Name="firstNameTBL" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="First Name:" VerticalAlignment="Top"/>
<TextBox x:Name="firstNameTB" HorizontalAlignment="Left" Height="72" Margin="0,42,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="lastNameTBL" HorizontalAlignment="Left" Margin="10,119,0,0" TextWrapping="Wrap" Text="Last Name:" VerticalAlignment="Top"/>
<TextBox x:Name="lastNameTB" HorizontalAlignment="Left" Height="72" Margin="0,151,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="emailAddressTBL" HorizontalAlignment="Left" Margin="10,228,0,0" TextWrapping="Wrap" Text="Email Address:" VerticalAlignment="Top"/>
<TextBox x:Name="emailAddressTB" HorizontalAlignment="Left" Height="72" Margin="0,260,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="dateOfBirthTBL" HorizontalAlignment="Left" Margin="10,337,0,0" TextWrapping="Wrap" Text="Date Of Birth:" VerticalAlignment="Top"/>
<toolkit:DatePicker HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="dateOfBirthPicker" ValueChanged="dateOfBirthPicker_ValueChanged" Margin="0,370,0,0"/>
<TextBlock HorizontalAlignment="Left" Margin="10,447,0,0" TextWrapping="Wrap" Text="Gender:" VerticalAlignment="Top"/>
<RadioButton Content="Male" HorizontalAlignment="Left" Margin="0,479,0,0" VerticalAlignment="Top"/>
<RadioButton Content="Female" HorizontalAlignment="Left" Margin="113,479,0,0" VerticalAlignment="Top"/>
<TextBlock Name="fingerprint" HorizontalAlignment="Left" Margin="10,551,0,0" TextWrapping="Wrap" Text="Fingerprint:" VerticalAlignment="Top"/>
<Button Content="SCAN HERE" HorizontalAlignment="Stretch" Margin="0,583,232,208" VerticalAlignment="Stretch"/>
<Button Content="Submit" HorizontalAlignment="Left" Margin="154,0,0,136" VerticalAlignment="Bottom"/>
<Button Content="Reset All" HorizontalAlignment="Left" Margin="10,0,0,131" VerticalAlignment="Bottom"/>
</Grid>
</ScrollViewer>
</Grid>
Full XAML Code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="JP APPS" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="<Data Query>" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--Height of the Grid has to be greater than the ScrollViewer's Height to make it scrollable.-->
<!--Removing the ScrollViewer's Height enables you to see the entire page in a transparent-like view-->
<ScrollViewer Height="605" Width="480" HorizontalAlignment="Left" Margin="0,0,0,-390" VerticalAlignment="Top" Grid.Row="1">
<Grid MinHeight="605" Height="1000">
<TextBlock x:Name="firstNameTBL" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="First Name:" VerticalAlignment="Top"/>
<TextBox x:Name="firstNameTB" HorizontalAlignment="Left" Height="72" Margin="0,42,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="lastNameTBL" HorizontalAlignment="Left" Margin="10,119,0,0" TextWrapping="Wrap" Text="Last Name:" VerticalAlignment="Top"/>
<TextBox x:Name="lastNameTB" HorizontalAlignment="Left" Height="72" Margin="0,151,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="emailAddressTBL" HorizontalAlignment="Left" Margin="10,228,0,0" TextWrapping="Wrap" Text="Email Address:" VerticalAlignment="Top"/>
<TextBox x:Name="emailAddressTB" HorizontalAlignment="Left" Height="72" Margin="0,260,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="253"/>
<TextBlock x:Name="dateOfBirthTBL" HorizontalAlignment="Left" Margin="10,337,0,0" TextWrapping="Wrap" Text="Date Of Birth:" VerticalAlignment="Top"/>
<toolkit:DatePicker HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="dateOfBirthPicker" ValueChanged="dateOfBirthPicker_ValueChanged" Margin="0,370,0,0"/>
<TextBlock HorizontalAlignment="Left" Margin="10,447,0,0" TextWrapping="Wrap" Text="Gender:" VerticalAlignment="Top"/>
<RadioButton Content="Male" HorizontalAlignment="Left" Margin="0,479,0,0" VerticalAlignment="Top"/>
<RadioButton Content="Female" HorizontalAlignment="Left" Margin="113,479,0,0" VerticalAlignment="Top"/>
<TextBlock Name="fingerprint" HorizontalAlignment="Left" Margin="10,551,0,0" TextWrapping="Wrap" Text="Fingerprint:" VerticalAlignment="Top"/>
<Button Content="SCAN HERE" HorizontalAlignment="Stretch" Margin="0,420,250,0" VerticalAlignment="Stretch" Height="250"/>
<Button Content="Submit" HorizontalAlignment="Stretch" Margin="0,0,250,94" VerticalAlignment="Bottom"/>
<Button Content="Reset All" HorizontalAlignment="Stretch" Margin="235,0,10,94" VerticalAlignment="Bottom"/>
</Grid>
</ScrollViewer>
</Grid>