How make ScrollViewer work properly - windows phone 8

Question

I have added a ScrollViewer object on my application page and I have added many control objects 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, and the page keeps returning to it's original position before the user has the opportunity to enter any information.

My XAML code is here:

<phone:PhoneApplicationPage
x:Class="ChronosMobile.PhoneApp.OrçamentoPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Margin="0,0,0,-153">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="LayoutRoot1" Background="#FF4F8899" Margin="0,0,0,59">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->

    <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer Margin="-10,0,10,169">
                <StackPanel Height="916">
                    <TextBox x:Name="txtNomeCliente" Height="Auto" TextWrapping="Wrap"    
                        Text="" Background="White" BorderBrush="White" IsReadOnly="True"/>
                    <Button x:Name="BotaoCatalogo" Content="Catálogo"
                        Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoCatalogo_Click"/>
                    <Button x:Name="BotaoItens" Content="Itens"
                        Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoItens_Click"/>
                    <Grid Background="#FF0F3B48" Margin="12,0,12,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Margin="5">
                            <TextBlock Text="Qtde. de Itens:" 
                                FontSize="{StaticResource PhoneFontSizeMedium}"/>
                            <TextBlock x:Name="lblQuantidadeProdutos" Text="0" Margin="10,0,0,0" FontSize="{StaticResource PhoneFontSizeMedium}" Width="43"/>
                        </StackPanel>
                        <StackPanel Grid.Column="1"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal"
                            Margin="2">

                            <TextBlock x:Name="lblValorTotal" FontSize="{StaticResource PhoneFontSizeMedium}"/>

                        </StackPanel>
                    </Grid>
                    <Button x:Name="BotaoPagamentos" Content="Adicionar Pagamento"
                        Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoPagamentos_Click"/>
                    <ListBox x:Name="ListaPagamentos" ItemsSource="{Binding ListaPagamentos}"/>
                    <ListBox x:Name="ListaEntrega" ItemsSource="{Binding ListaEntrega}"/>
                    <Grid Background="#FF0F3B48" Margin="12,0,12,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Margin="5">
                            <TextBlock 
                                FontSize="16" FontWeight="Bold">
                                <Run FontWeight="Normal" Text="Forma de pagamento: A vista"/>
                            </TextBlock>
                            <TextBlock 
                                FontSize="16">
                                <Run Text="Parcela(s):"/>
                                <Run Text=" "/>
                                <Run Text="1"/>
                            </TextBlock>
                            <TextBlock 
                                FontSize="16">
                                <Run Text="Vencimento"/>
                                <Run Text=":"/>
                                <Run Text=" "/>
                                <Run Text="25/05/2013"/>
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Grid.Column="1"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Right"
                            Margin="2">
                            <TextBlock 
                                FontSize="{StaticResource PhoneFontSizeMedium}" Margin="0">
                                <Run Text="    "/>
                                <Run Text="Valor"/>
                            </TextBlock>
                            <TextBlock Text="R$ 399,00" 
                                FontSize="{StaticResource PhoneFontSizeMedium}"/>
                        </StackPanel>
                    </Grid>

                    <Button x:Name="cmdEntrega" Content="Entrega" Width="Auto" Height="80" VerticalAlignment="Top" Background="#FF3FAACA" BorderBrush="#FF3FAACA" Click="BotaoEntrega_Click"/>

                    <Grid Background="#FF0F3B48" Margin="12,0,12,0" Height="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5*"/>
                            <ColumnDefinition Width="4*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Margin="5,12,81,0" Height="38" Grid.ColumnSpan="2">
                            <TextBlock x:Name="lblTransportadora" 
                                FontSize="{StaticResource PhoneFontSizeMedium}" Width="149">
                                <Run FontSize="20" Text="Transportadora"/>
                                <Run FontSize="20" Text=":"/>
                            </TextBlock>
                        </StackPanel>
                    </Grid>
                    <Grid Height="13" Width="437"/>
                    <Grid Background="#FF0F3B48" Margin="12,0,12,0" Height="135">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5*"/>
                            <ColumnDefinition Width="4*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Margin="5,12,81,0" Height="38" Grid.ColumnSpan="2">
                            <TextBlock x:Name="lblTransportadora1" 
                                FontSize="{StaticResource PhoneFontSizeMedium}" Width="58" Margin="0,-2,0,12">
                                <Run FontSize="20" Text="Rua:"/>
                            </TextBlock>
                        </StackPanel>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}" Margin="5,11,128,85">
                            <Run FontSize="20" Text="Descrição:"/>
                        </TextBlock>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}" Margin="5,96,165,10">
                            <Run FontSize="20" Text="Cidade:"/>
                        </TextBlock>
                        <TextBlock x:Name="lblDescricao" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="26" Margin="113,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="315"/>
                        <TextBlock x:Name="lblRua" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="26" Margin="113,57,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="317"/>
                        <TextBlock x:Name="lblCidade" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="26" Margin="113,99,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="319"/>
                    </Grid>
                    <Grid Height="20" Width="437"/>
                    <TextBlock Text="Informações Adicionais:" Margin="15,10,0,0"/>
                    <TextBox x:Name="TxtInfoAdicional" Height="Auto" TextWrapping="Wrap"    
                        Text="{Binding InfoAdicional, Mode=TwoWay}" Background="White" BorderBrush="White"/>
                    <Button x:Name="BotaoFinalizar" Content="Salvar Orçamento"
                        Width="238" Height="80" VerticalAlignment="Top"
                        HorizontalAlignment="Right" BorderBrush="#FF3FAACA" Background="#FF3FAACA"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>

    <!--TitlePanel contains the name of the application and page title-->

    <!--ContentPanel - place additional content here-->
</Grid>

Answer 1

I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps

• First create a ScrollViewer
• Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
• Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)

See the below Code

<ScrollViewer Height="500">
        <Grid Name="Container" Height="700">
            <TextBox/>
            <TextBox/>
            <TextBox/>
        </Grid>
</ScrollViewer>

Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.

Answer 2

You have to set the height of your ScrollViewer. It should be smaller than the StackPanel to achieve the scroll effect you desire. It should also be smaller than the screen size if you wish to see it's entire contents.