滚动到 ScrollViewer 中的控件 [英] Scroll to a Control in a ScrollViewer

问题描述

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

In my windows store 8 metro style app, I have a scroll viewer for scrolling items of stack panel. I want to scroll the scroll bar automatically when ever a selection is changed dynamically and selected item is not in visible area.

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

For eg : These tabs are Section tabs. When ever user clicks on skip button, the selected section is skipped and next section is selected.When user skips the last section then he jumps to the first section,but here scroll viewer does not scroll to the first tab automatically and because of that user is not able to see the selected section in the visible area.

推荐答案

这比您想象的要容易.

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>

祝你好运！

这篇关于滚动到 ScrollViewer 中的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！