Question

您好我正在尝试使用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>

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

Answer 1

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

这样的结果是控件相互重叠，看起来只有一个控件可见（你可能会看到2个控件，因为你强制“底部”对齐网格中的某些项目，这意味着这些将对齐到单元格的底部，并且不会与顶部对齐的其他控件重叠。这可能就是为什么ScrollViewer只显示列表的一部分的原因。

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

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

Answer 2

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

ScrollViewer向下滚动但快速回到顶部

2 个答案: