Question

我有一个页面，其内容比手机水平宽，有点像全景，但没有所有的视差内容，我想让用户轻弹滚动，并按下按钮滚动到指定的偏移内滚动查看器。 ScrollToHorizontalOffset适用于按钮，但它会丢失动画，我想保留动画。

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，因为我有一个按钮可以直接返回到第一页。

更新 - 添加向导主面板def并添加页面方法

<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++;
}

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

1 个答案: