滚动时将滚动查看器内的堆栈面板项目停止在显示左侧 [英] stop the stackpanel items inside scroll viewer to be at the display left side when scroll

问题描述

我在滚动查看器内的堆栈面板中水平添加了 10 张图像.当用户滑动页面时，scrollviewer 停止在某个位置，如果滚动停止在 2 张图像的中间，如下所示的第一张图像，我想将编号为 3 的图像设置为自动滚动并适合左侧屏幕如第二张图

I have added 10 images in a stackpanel horizontally which is inside a scrollviewer. When user swipe the page ,the scrollviewer stops at certain position, if the scroll stops in the middle of 2 images like the first image shown below i want to set the image with number 3 to be automatically scroll and fit with the left side of the screen like in the second image

for (int i = 0; i <= 9; i++)
{
    Uri uri = new  Uri("http://d1mu9ule1cy7bp.cloudfront.net//catalogues/47/pages/p_" + i + "/thump.jpg");
    ImageSource img1 = new BitmapImage(uri);
    Image rect = new Image { RenderTransform = new TranslateTransform() };

    rect.Source = img1;

    stack.Children.Add(rect);

}

XAML:

<Grid x:Name="LayoutRoot" Width="480" Background="Transparent" Margin="0,-33,0,0" Height="800">

 <ScrollViewer HorizontalContentAlignment="Left" HorizontalAlignment="Left" Name="scroll" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">

  <StackPanel Name="stack" Width="Auto" Orientation="Horizontal" HorizontalAlignment="Left"  >

</StackPanel>
</ScrollViewer>
</Grid>

推荐答案

您需要做的第一件事是检测哪个项目与屏幕的一侧重叠.为此，请遍历 StackPanel 中的每个项目，并确定它们相对于在屏幕上具有固定位置的某个其他元素的位置.

The first thing you need to do is detect which item is overlapping the side of the screen. To do this, iterate over each item within the StackPanel and determine their location relative to some other element that has a fixed location on screen.

为此，我使用以下扩展方法:

To do this, I use the following extension method:

/// <summary>
/// Gets the relative position of the given UIElement to this.
/// </summary>
public static Point GetRelativePosition(this UIElement element, UIElement other)
{
    return element.TransformToVisual(other)
                  .Transform(new Point(0, 0));
}

即对于每个项目调用以下内容；

i.e. for each item call the following;

Point position = stackPanelItem.GetRelativePosition(someFixedElement);

使用每个项目的位置，您应该能够确定哪个项目与屏幕重叠.

Using the location of each item, you should be able to work out which one overlaps the screen.

然后您需要计算需要滚动多少以确保您的项目完全可见，然后使用 ScrollViewer.ScrollToVerticalOffset 滚动到该位置.

You then need to calculate by how much you need to scroll in order to ensure that your item is fully visible, then use ScrollViewer.ScrollToVerticalOffset to scroll to that location.

这篇关于滚动时将滚动查看器内的堆栈面板项目停止在显示左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！