如何阻止页面弹回其原始位置

Question

我在我的 Windows Phone 7 页面中围绕内容面板网格实现了一个 ScrollViewer。但是，每当我尝试向下滚动到页面底部时，当我将手指从屏幕上移开时，它就会立即恢复到原来的位置。换句话说，在滚动时它不会保留它的最后一个位置，从而使滚动变得毫无意义。

这是我的页面代码：

<phone:PhoneApplicationPage
                        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"
                        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71" x:Class="StepsForWater.Views.Submit"
                        mc:Ignorable="d"
                        d:DesignWidth="480"
                        d:DesignHeight="696"
                        FontFamily="{StaticResource PhoneFontFamilyNormal}"
                        FontSize="{StaticResource PhoneFontSizeNormal}"
                        Foreground="{StaticResource PhoneForegroundBrush}"
                        SupportedOrientations="Portrait"
                        Orientation="Portrait"
                        shell:SystemTray.IsVisible="True"
                        DataContext="{Binding Submit, Source={StaticResource Locator}}">

<!-- Sample code showing usage of ApplicationBar -->
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="appbar_About" IconUri="/Images/appbar_button1.png" Text="About" Click="appbar_About_Click"/>
        <shell:ApplicationBarIconButton x:Name="appbar_WalkRun" IconUri="/Images/appbar_button2.png" Text="Walk/Run" Click="appbar_WalkRun_Click"/>            
        <!--<shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
            <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
        </shell:ApplicationBar.MenuItems>-->
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.Background>
        <ImageBrush ImageSource="/StepsForWater;component/Images/submit-bg.png" />
    </Grid.Background>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">

        <!--<TextBlock x:Name="ApplicationTitle"
                   Text="MY APPLICATION"
                   Style="{StaticResource PhoneTextNormalStyle}" />
        <TextBlock x:Name="PageTitle"
                   Text="page name"
                   Margin="9,-7,0,0"
                   Style="{StaticResource PhoneTextTitle1Style}" />-->
    </StackPanel>

    <ScrollViewer>
    <!--ContentPanel - place additional content here-->        
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,-241" Background="{x:Null}">            
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="38,57,0,0" x:Name="tBlk_Username" Text="{Binding UserName}" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="27,79,0,0" x:Name="tb_UserNameVal" Text="{Binding UserNameValue, Mode=TwoWay}" VerticalAlignment="Top" Width="423" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="38,169,0,0" x:Name="tBlk_Email" Text="{Binding Email}" VerticalAlignment="Top" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="38,278,0,0" x:Name="tBlk_Message" Text="{Binding Message}" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="27,191,0,0" x:Name="tb_EmailVal" Text="{Binding EmailValue, Mode=TwoWay}" VerticalAlignment="Top" Width="423" />
        <TextBox Height="153" HorizontalAlignment="Left" Margin="27,300,0,0" x:Name="tb_MessageVal" Text="{Binding MessageValue, Mode=TwoWay}" VerticalAlignment="Top" Width="423" />
        <CheckBox Content="{Binding Location}" Height="72" HorizontalAlignment="Left" Margin="27,459,0,0" x:Name="chk_Location" VerticalAlignment="Top" />
        <Button Content="{Binding Submit}" Height="72" HorizontalAlignment="Left" Margin="27,761,0,0" x:Name="btn_Submit" VerticalAlignment="Top" Width="160" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <GalaSoft_MvvmLight_Command:EventToCommand x:Name="SubmitClick" Command="{Binding SubmitCommand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>            
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="50,540,0,0" Name="tBlk_PicInfo" Text="{Binding PictureInfo}" VerticalAlignment="Top" Grid.Row="1" />
        <Image Height="150" HorizontalAlignment="Left" Margin="50,583,0,0" Name="img_FlickrPic" Stretch="Fill" VerticalAlignment="Top" Width="200" Grid.Row="1" Source="{Binding ImageSource}"/>
        <Button Content="Capture" Height="72" HorizontalAlignment="Left" Margin="267,0,0,138" Name="btn_Capture" VerticalAlignment="Bottom" Width="160" d:LayoutOverrides="GridBox" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <GalaSoft_MvvmLight_Command:EventToCommand x:Name="CaptureClick" Command="{Binding CaptureCommand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        </Grid>                        
    </ScrollViewer>
</Grid>

更新：修复了我的问题，我需要做的就是确保我的滚动查看器的高度小于它包含的网格的高度！

Answer 1

正如其他人所提到的，您可能应该重新考虑制作布局的方式。有更清洁的选择。但要回答你的问题，有两个问题。首先是你需要在 ScrollViewer 上指定一个高度。

<ScrollViewer Height="760">
....
</ScrollViewer>

第二个问题是您应用于网格的负边距 241。简单地把它拿下来。它可以防止滚动到该范围内的任何内容。

<Grid x:Name="ContentPanel" Margin="12,0,12,0">
....
</Grid>

应该这样做。