如何以编程方式滚动滚动查看器并保留动画

Question

我有一个页面，其内容水平比手机宽，有点像全景图，但没有所有视差内容，我想让用户轻弹滚动，并按下按钮滚动到滚动查看器中指定的偏移量。 ScrollToHorizo​​ntalOffset 对于按钮来说效果很好，只是它丢失了动画，而我想保留动画。

Answer 1

我正在做一件非常相似的事情。我创建了 WizardControl 和 WizardPage 用户控件。用户可以在页面之间滑动或使用下一个和上一个按钮。

我创建了一个幻灯片效果动画来在页面之间移动。代码如下：

Storyboard sb = SlideEffect(MainPanel, (-_pageWidth * pagesToMove));
sb.Completed += Slide_Completed;
sb.Begin();


private Storyboard SlideEffect(UIElement controlToAnimate, double positionToMove)
{
    //Get position of stackpanel
    GeneralTransform gt = controlToAnimate.TransformToVisual(MainGrid);
    Point p = gt.Transform(new Point(0, 0));

    //add new storyboard and animation
    Storyboard sb = new Storyboard();
    DoubleAnimation da = new DoubleAnimation { To = p.X + positionToMove };
    Storyboard.SetTarget(da, controlToAnimate);

    Storyboard.SetTargetProperty(da, new PropertyPath("(controlToAnimate.RenderTransform).(TransformTranslate.X)"));

    ExponentialEase ee = new ExponentialEase { Exponent = 6.0, EasingMode = EasingMode.EaseOut };
    da.EasingFunction = ee;

    sb.Children.Add(da);
    return sb;
}

MainPanel 是一个水平堆栈面板。向导页面已添加到其中。

_pageWidth 很重要，因为它在纵向和横向模式下都有效。

使用pagestoMove是因为我有一个按钮可以直接返回第一页。

更新 - 添加向导主面板定义和添加页面方法

<StackPanel
    x:Name="MainPanel"
    Grid.Row="1"
    Orientation="Horizontal"
    RenderTransformOrigin="0.5,0.5"
    Margin="0,0,0,10"
    Width="480">

    <StackPanel.RenderTransform>
        <TranslateTransform
            X="0" />
    </StackPanel.RenderTransform>

</StackPanel>


public void AddPage(WizardPageControl page)
{
    MainPanel.Width += _pageWidth;

    page.PageWidth = _pageWidth;

    double newRight = (MainPanel.Width - _pageWidth) * -1;
    MainPanel.Margin = new Thickness(0, 0, newRight, 10);

    MainPanel.Children.Add(page);

    _wizardPageList.Add(page);

    TotalPages++;
}