Как сделать навигацию по страницам в стиле iOS NavigationController под WinRT?

Предположим, у нас есть 2 страницы (Windows.UI.Xaml.Controls.Page).
page1 вызывает this.Frame.Navigate(typeof(Page2), ); для отображения второй страницы.
Как анимировать страницы так, чтобы исходящая страница анимировалась слева, а входящая — справа?

Вот текущий код:

XAML-файл

<Page>   
    ...  
    <Page.Transitions>  
        <TransitionCollection>  
            <PaneThemeTransition Edge="Right" x:Name="pageTransition"/>  
        </TransitionCollection>  
    </Page.Transitions>  
    ...  
</Page>

Файл CS

protected override void OnNavigatedFrom(NavigationEventArgs e)  
{  
    if (e.NavigationMode == NavigationMode.New) pageTransition.Edge = EdgeTransitionLocation.Left;  
    else if (e.NavigationMode == NavigationMode.Back) pageTransition.Edge = EdgeTransitionLocation.Right;  
    base.OnNavigatedFrom(e);  
}

navigation windows-runtime pane windows-store-apps winrt-xaml
person Nick Utenkov    schedule 07.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Один из способов — заменить стандартный элемент управления Frame и использовать мой AlternativeFrame контролировать, что делает именно то, что вы просите. Он поддерживает переходы, когда отображаются две страницы, и вы также можете предварительно загрузить следующую страницу, чтобы она сразу же открывалась, когда пользователь запрашивает ее.

Альтернативное решение — сделать снимок экрана текущей страницы с помощью RenderTargetBitmap.RenderAsync() и отобразить его перед корневым фреймом, чтобы скрыть его за этим снимком экрана, затем перейти на новую страницу и, когда она загрузится, запустить анимацию, которая скользит по снимку экрана. в сторону, одновременно вставляя новую страницу на место. В стандартном элементе управления Frame нет встроенной поддержки межстраничных переходов, но его несложно создать самостоятельно.

Вот как выглядит AlternativeFrame:

<controls:AlternativeFrame
    x:Name="rootFrame"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:Extensions="using:WinRTXamlToolkit.Controls.Extensions" 
    Extensions:FrameworkElementExtensions.ClipToBounds="True">
    <controls:AlternativeFrame.PageTransition>
        <controls:PushTransition
            ForwardDirection="Random"
            BackwardDirection="Random" />
    </controls:AlternativeFrame.PageTransition>
</controls:AlternativeFrame>

Вам нужно использовать это с AlternativePage вместо простого Page:

<controls:AlternativePage
    x:Class="YourApp.YourPageType"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinRTXamlToolkit.Controls">
    <Grid>
    </Grid>
</controls:AlternativePage>

Затем вы можете предварительно загрузить новую страницу следующим образом:

await rootFrame.Preload(typeof(YourApp.YourPageType), null);

и перемещайтесь следующим образом:

await rootFrame.Navigate(typeof(YourApp.YourPageType), null);

Также есть несколько других переходов, и вы можете добавить свои собственные, но PushTransition реализует то, что вы просите.

Да, и вы можете получить набор инструментов для NuGet здесь.

person Filip Skakun    schedule 07.05.2014