ScrollViewer向下滚动，但会回弹到顶部

本文关键字：顶部 滚动 ScrollViewer | 更新日期: 2023-09-27 18:30:31

嗨，我正在尝试使用 ScrollViewer，但它无法正常工作，当我向下拖动以查看视图的其余部分时，它会一直捕捉到顶部。

我尝试将高度静态设置为页面的设计高度，但这也不起作用，并尝试将其包装在网格中。

这是我的 XAML

<ScrollViewer Height="768">
    <!--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 x:Name="ApplicationTitle" Text="myApp" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="Menu" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223"  HorizontalAlignment="Left" Margin="0,15,0,0" Name="rectangle1"  VerticalAlignment="Top" Click="rectangle1_Click">
            <Image Name="image1" Source="/Images/1.png" />
        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,15,0,0"  HorizontalAlignment="Left" Name="rectangle2"  VerticalAlignment="Top" Click="rectangle2_Click">
            <Image Name="image2" Source="/Images/2.png" />
        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,138"  HorizontalAlignment="Left" Name="rectangle3"  VerticalAlignment="Bottom" Click="rectangle3_Click">
            <Image Name="image3" Source="/Images/3.png" />
        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,0,0,138"  HorizontalAlignment="Left" Name="rectangle4"  VerticalAlignment="Bottom">
            <Image Name="image4" Source="/Images/4.png" />
        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,-89" HorizontalAlignment="Left" Name="rectangle" VerticalAlignment="Bottom" IsTabStop="True">
            <Image Name="image5" Source="/Images/5.png" />
        </Button>
        <TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="79,183,0,0" Name="textBlock1" Text="Stop Gap" VerticalAlignment="Top" Width="133" />
            <TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="285,183,0,0" Name="textBlock2" Text="Time Lapse" VerticalAlignment="Top" Width="150" />
            <TextBlock Foreground="White" Height="40" FontSize="30" HorizontalAlignment="Left" Margin="96,413,0,0" Name="textBlock3" Text="Projects" VerticalAlignment="Top" Width="116" />
            <TextBlock Foreground="White" Height="50" HorizontalAlignment="Left" FontSize="30" Margin="321,413,0,0" Name="textBlock4" Text="Settings" VerticalAlignment="Top" Width="114" />

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

如果您能帮助我，我将不胜感激，谢谢。

ScrollViewer向下滚动，但会回弹到顶部

当前实现不起作用的原因是，您的定义实质上是告诉 Silverlight 将所有图像控件和 TextBlock 控件放入单个网格单元格中。这意味着所有对象都使用网格作为其定位和缩放的基础，而不是像您在代码中期望的那样相互堆叠。

这样做的结果是控件相互重叠，使其看起来只有 1 个控件可见（当您强制"底部"对齐网格中的某些项目时，您可能会看到 2 个控件，这意味着这些控件将与单元格底部对齐，并且不会与与顶部对齐的其他控件重叠。这可能就是为什么看起来只有部分列表被滚动查看器显示的原因）。

Josemiguel的回答确实解释了一个合适的解决方案。另一个（我认为）更简单的选择是使用一个或多个 StackPanel 控件，这将强制控件以指定方向相互堆叠（垂直是默认的）。也可以相互堆叠和嵌套StackPanel。

MSDN： http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel（v=vs.95）.aspx - T - 滚动到 MSDN 页面底部，查看使用多个彩色矩形的堆栈面板的良好示例。

实现它的最佳方法是使用某种控件（如 WrapPanel）并创建一个空的 DataTemplate 来动态添加所需的所有项目。在这里和这里，你会发现一个例子。

相关文章：