uwp scrollViewer 设置限制答案

【问题标题】：uwp scrollViewer set limitsuwp scrollViewer 设置限制
【发布时间】：2016-10-19 12:30:31
【问题描述】：

我在 UWP 页面中使用 Grid 和 ScrollViewer，其中每一行代表一个 Shelf。我有 N 行，但我需要在第一行的结尾和最后一行的开头之间设置 ScrollViewer 的限制，因为它们不在屏幕上（我只有这些行，所以当用户滚动到限制我不希望他看到背景，而是看到一个空行）。

有什么方法可以指定 ScrollViewer 的上限和下限吗？

这是我定义这些元素的 XAML：

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Hidden" Name="MyScrollViewer">
    <Grid Name="MyGrid" Tapped="HideOptionMenu">
        <Grid.RowDefinitions>
        </Grid.RowDefinitions>
    </Grid>
</ScrollViewer>

行是在运行时动态添加的，因此行数并不总是相同的。此外，当我调整屏幕大小时，每行的高度都会发生变化。

感谢您的宝贵时间。

【问题讨论】：

标签： xaml scroll grid uwp scrollviewer

【解决方案1】：

我认为无法设置 ScrollViewer 的限制。

实现所需的一种方法是将过度滚动的行放入第一个和最后一个网格行，并将它们转换到 ScrollViewer 的边界之外，以便在过度滚动时可以看到它们。

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>

        <!-- Top overscroll row -->
        <Rectangle Grid.Row="0" HorizontalAlignment="Stretch" Fill="Orange" Stroke="Black">
            <Rectangle.RenderTransform>
                <TranslateTransform Y="-100"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <!-- Bottom overscroll row -->
        <Rectangle Grid.Row="8" HorizontalAlignment="Stretch" Fill="Orange" Stroke="Black">
            <Rectangle.RenderTransform>
                <TranslateTransform Y="100"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <Rectangle Grid.Row="0" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="1" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="2" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="3" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="4" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="5" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="6" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="7" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
        <Rectangle Grid.Row="8" HorizontalAlignment="Stretch" Fill="Red" Stroke="Black"/>
    </Grid>
</ScrollViewer>

对于真正的 StackPanel/ListView 布局使用 Grid 感觉有点笨拙，但由于我不了解您的 UI 的细节，我认为您有这样做的理由。

【讨论】：