Блог

У меня есть страница, содержимое которой по горизонтали шире, чем телефон, что-то вроде панорамы, но без всего этого параллакса, и я хочу позволить пользователю щелкнуть для прокрутки, а также нажать кнопку для прокрутки до заданных смещений в scrollviewer. ScrollToHorizontalOffset отлично работает для кнопки, за исключением того, что она теряет анимацию, а я хочу сохранить анимацию.

Я делаю очень похожую вещь. Я создал пользовательские элементы управления WizardControl и WizardPage. Пользователь может переключаться между страницами или использовать кнопки next и previous.

Я создал анимацию с эффектом слайда для перемещения между страницами. Вот код:

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