滚动到 ScrollViewer 中的控件答案

【问题标题】：Scroll to a Control in a ScrollViewer滚动到 ScrollViewer 中的控件
【发布时间】：2014-05-05 10:54:57
【问题描述】：

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

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

【问题讨论】：

【解决方案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>

祝你好运！

【讨论】：

【解决方案2】：

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

【讨论】：

我正在使用以下代码：但是当用户在最后一个选项卡上时并按下下一个按钮，根据逻辑选择第一个选项卡。但滚动查看器不会滚动到第一个选项卡。
我也有同样的问题！你找到解决办法了吗？

【解决方案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);

如果只需要滚动一个轴，可以去掉不需要的轴的代码。

【讨论】：