从一页滑到另一页

Question

How can I let a user of a Windows Universal App swipe from one page to another? (I thought this would be easy to find, but searching hasn't uncovered the answer.)

And if this is possible within one page - that's fine too. (To swipe one grid out and another in.)

Answer 1

Pivot control behaves like you discribed.

See guidelines for tabs and pivots .

Example:

<Page x:Class="App1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot>
        <PivotItem Header="Item 1" Background="Black" />
        <PivotItem Header="Item 2" Background="Red" />
        <PivotItem Header="Item 3" Background="Blue" />
    </Pivot>
</Grid>

Answer 2

You can use GestureRecognizer and manipulate what you wanna do. Create animation for the FX.

Answer 3

I want to say use a FlipView control, but that could be dangerous if your views are too complex. FlipView will keep your pages rendered and ready to be flipped to at all times. I think you can try to implement your own thing to keep memory usage low. Maybe use a GestureRecognizer so that you have control over where the user can swipe and only render what you need and discard anything obsolete or off the screen.

Pivot will also create this effect, but the difference is that it must completely slide one element off the screen and then slide the next one in. It keeps from having two or three views rendered at once, which is good for memory. However, you won't be able to see both pages sliding in/out at the same time.

Try them both, see which is best for you.

Answer 4

I have something similiar to what you're asking:

How to "swipe" from one page to another:

On page 1 (The page where you will swipe FROM) Make a grid, and put these values in:

XAML:

<Grid Padding="15,15,15,15" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Stretch" 
      ManipulationMode="TranslateX,TranslateInertia,System" 
      ManipulationDelta="SwipeablePage_ManipulationDelta"
      ManipulationCompleted="SwipeablePage_ManipulationCompleted">

Code Behind:

private bool _isSwiped;
private void SwipeablePage_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    if (e.IsInertial && !_isSwiped)
    {
        var swipedDistance = e.Cumulative.Translation.X;

        if (Math.Abs(swipedDistance) <= 2) return;

        if (swipedDistance > 0)
        {
            // go to next page
            this.Frame.Navigate(typeof(Page2));
        }
        else
        {
            // do nothing 
        }
        _isSwiped = true;
    }
}