windows-store-apps - 滚动到 ScrollViewer 中的控件

Question

在我的 Windows Store 8 Metro 风格应用程序中，我有一个滚动查看器，用于滚动堆栈面板的项目。当动态更改选择并且所选项目不在可见区域中时，我想自动滚动滚动条。

例如：这些选项卡是部分选项卡。当用户单击跳过按钮时，将跳过所选部分并选择下一个部分。当用户跳过最后一个部分时，他会跳到第一部分，但这里滚动查看器不会自动滚动到第一个选项卡，因为该用户无法在可见区域中看到所选部分。

Answer 1

这比你想象的要容易。

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var visual = MyRectangle.TransformToVisual(MyScrollViewer);
    var point = visual.TransformPoint(new Point(0, 0));

    // Windows 8.0
    MyScrollViewer.ScrollToVerticalOffset(point.Y);

    // Windows 8.1
    MyScrollViewer.ChangeView(null, point.Y, null);
}

使用此 XAML

<ScrollViewer x:Name="MyScrollViewer">
    <StackPanel>
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle x:Name="MyRectangle" Fill="Red" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
        <Rectangle Fill="Wheat" Height="200" Width="200" Margin="10" />
    </StackPanel>
</ScrollViewer>

祝你好运！

Answer 2

您可以改用 ListView 和 ScrollIntoView 方法。或者您可以使用 ScrollViewer 类的 ScrollToVerticalOffset 方法，但您需要项目的大小才能正确滚动。

Answer 3

根据 Jerry 的回答，下面的代码将更改 Scroll Viewer 的偏移量，以便控件位于 ScrollViewer 的视口内（如果它还没有的话）。

如果控件已经完全可见，则不会滚动滚动查看器。

var transform = control.TransformToVisual(MyScrollViewer);
var topLeft = transform.TransformPoint(new Point(0, 0));
var top = topLeft.Y;
var left = topLeft.X;
var bottom = top + control.ActualHeight;
var right = left + control.ActualWidth;

double? scrollToY = null;
if (top < 0)
{
    scrollToY = top + MyScrollViewer.VerticalOffset;
}
else if (bottom > MyScrollViewer.ViewportHeight)
{
    scrollToY = bottom + MyScrollViewer.VerticalOffset - MyScrollViewer.ViewportHeight;
}

double? scrollToX = null;
if (left < 0)
{
    scrollToX = left + MyScrollViewer.HorizontalOffset;
}
else if (right > MyScrollViewer.ViewportWidth)
{
    scrollToX = right + MyScrollViewer.HorizontalOffset - MyScrollViewer.ViewportWidth;
}

MyScrollViewer.ChangeView(scrollToX, scrollToY, null);

如果您只需要滚动一个轴，您可以删除不需要的轴的代码。