Windows Phone 8.1 Scroll Viewer not scrolling

Question

I have added a ScrollViewer object on my application page and I have added many textbox and combobox on the ScrollViewer object but the end-user using the app can not view all the elements because the Scroll does not scroll low enough.

Here is my XAMLCode :

<Page x:Class="mobible.Views.Profile"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:mobible.Views"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      Height="665">

    <Page.Resources>
        <Style TargetType="ComboBox">
            <Setter Property="Foreground"
                    Value="Black" />
            <Setter Property="Background"
                    Value="White" />
        </Style>
    </Page.Resources>

    <Grid x:Name="LayoutRoot"
          Background="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"
          AllowDrop="True"
          Height="Auto"
          Width="Auto">
        <ScrollViewer Foreground="#FF0F0D0D"
                      AllowDrop="True"
                      VerticalAlignment="Top"
                      HorizontalAlignment="Center"
                      VerticalScrollBarVisibility="Visible"
                      VerticalScrollMode="Enabled"
                      BringIntoViewOnFocusChange="True"
                      HorizontalScrollMode="Enabled"
                      IsHoldingEnabled="True"
                      Height="715"
                      Margin="0,0,0,-77">
            <StackPanel Height="Auto"
                        Name="stackPanel1"
                        Width="Auto">
                <Grid>
                    <Grid.ChildrenTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition />
                        </TransitionCollection>
                    </Grid.ChildrenTransitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!-- Title Panel -->
                    <StackPanel Grid.Row="0"
                                Margin="19,0,0,508"
                                Grid.RowSpan="2">
                        <Image Height="126"
                               Margin="-19,0,-0.167,0"
                               RenderTransformOrigin="0.504,0.025"
                               Source="ms-appx:///Assets/mobible_logo.png"
                               Stretch="Fill"
                               HorizontalAlignment="Right" />
                    </StackPanel>

                    <!--TODO: Content should be placed within the following grid-->
                    <Grid Grid.Row="1"
                          x:Name="ContentRoot"
                          Margin="19,9.5,19,0"
                          HorizontalAlignment="Center">
                        <TextBox x:Name="txt_lastName"
                                 HorizontalAlignment="Left"
                                 Margin="0,238,0,0"
                                 TextWrapping="Wrap"
                                 Text=""
                                 VerticalAlignment="Top"
                                 Width="361"
                                 Background="White"
                                 BorderBrush="#FF0F0D0D" />
                        <Button x:Name="btn_save"
                                Content="Save"
                                HorizontalAlignment="Left"
                                Margin="-2,628,0,0"
                                VerticalAlignment="Top"
                                Width="360"
                                Height="53"
                                Foreground="#FF0F0D0D"
                                Background="#FFEEDA11"
                                FontSize="17" />
                        <TextBox x:Name="txt_dateofbirth"
                                 HorizontalAlignment="Left"
                                 Margin="1,321,0,0"
                                 TextWrapping="Wrap"
                                 Text=""
                                 VerticalAlignment="Top"
                                 Width="361"
                                 Background="White"
                                 BorderBrush="#FF0F0D0D" />
                        <TextBlock HorizontalAlignment="Left"
                                   Margin="2,128,0,0"
                                   TextWrapping="Wrap"
                                   Text="First Name"
                                   VerticalAlignment="Top"
                                   Height="24"
                                   Width="332"
                                   FontSize="18"
                                   Foreground="#FF0E0D0D"
                                   RenderTransformOrigin="0.516,1.217" />
                        <TextBlock HorizontalAlignment="Left"
                                   Margin="3,213,0,0"
                                   TextWrapping="Wrap"
                                   Text="Last Name"
                                   VerticalAlignment="Top"
                                   Height="22"
                                   Width="200"
                                   FontSize="18"
                                   Foreground="#FF0E0D0D"
                                   RenderTransformOrigin="0.516,1.217" />
                        <TextBlock HorizontalAlignment="Left"
                                   Margin="3,292,0,0"
                                   TextWrapping="Wrap"
                                   Text="Date of birth"
                                   VerticalAlignment="Top"
                                   Height="31"
                                   Width="142"
                                   FontSize="18"
                                   Foreground="#FF0E0D0D"
                                   RenderTransformOrigin="0.516,1.217" />
                        <TextBlock HorizontalAlignment="Left"
                                   Margin="1,372,0,0"
                                   TextWrapping="Wrap"
                                   Text="Gender"
                                   VerticalAlignment="Top"
                                   Height="31"
                                   Width="347"
                                   FontSize="18"
                                   Foreground="#FF0E0D0D"
                                   RenderTransformOrigin="0.516,1.217" />
                        <TextBlock HorizontalAlignment="Left"
                                   Margin="3,456,0,0"
                                   TextWrapping="Wrap"
                                   Text="Country"
                                   VerticalAlignment="Top"
                                   Height="31"
                                   Width="347"
                                   FontSize="18"
                                   Foreground="#FF0E0D0D"
                                   RenderTransformOrigin="0.516,1.217" />
                        <TextBox x:Name="txt_firstName"
                                 HorizontalAlignment="Left"
                                 Margin="-2,157,0,0"
                                 TextWrapping="Wrap"
                                 Text=""
                                 VerticalAlignment="Top"
                                 Width="361"
                                 Background="White"
                                 BorderBrush="#FF0F0D0D" />
                        <TextBlock HorizontalAlignment="Left"
                                   Margin="2,540,0,0"
                                   TextWrapping="Wrap"
                                   Text="Religious background"
                                   VerticalAlignment="Top"
                                   Height="31"
                                   Width="347"
                                   FontSize="18"
                                   Foreground="#FF0E0D0D"
                                   RenderTransformOrigin="0.516,1.217" />
                        <ComboBox x:Name="cmbCountry"
                                  ItemsSource="{Binding}"
                                  HorizontalAlignment="Left"
                                  Height="71"
                                  Margin="1,478,0,0"
                                  VerticalAlignment="Top"
                                  Width="361"
                                  Background="White"
                                  Foreground="Black"
                                  BorderBrush="#FF0F0D0D" />
                        <ComboBox x:Name="cmbReligion"
                                  ItemsSource="{Binding}"
                                  HorizontalAlignment="Left"
                                  Height="71"
                                  Margin="1,564,0,0"
                                  VerticalAlignment="Top"
                                  Width="361"
                                  Background="White"
                                  Foreground="Black"
                                  BorderBrush="#FF0F0D0D">
                            <TextBlock />
                        </ComboBox>
                        <ComboBox x:Name="cmbGender"
                                  ItemsSource="{Binding}"
                                  HorizontalAlignment="Left"
                                  Height="148"
                                  Margin="1,401,0,0"
                                  VerticalAlignment="Top"
                                  Width="361"
                                  Background="White"
                                  BorderBrush="#FF0F0D0D" />
                    </Grid>

                </Grid>
            </StackPanel>
        </ScrollViewer>
    </Grid>

</Page>

Answer 1

First of all: When you only have one row in your grid, you can remove it and just insert the ScrollViewer.

Second: Just set the VerticalAlignment/HorizontalAlignment of the ScrollViewer to Stretch. Or add a Rowdefinition in your Grid that defines the height for your ScrollViewer. Here is an example that works for me:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ScrollViewer Grid.Row="0">
        <StackPanel>

        .... my elements ...

        </StackPanel>
    </ScrollViewer>
    <Button Grid.Row="1" Content="MyButton" />
</Grid>