UWP Item Navigation

Question

I'd like to achieve this kind of behavior and layout which control is best suited to do this on UWP. The next button should go scrolling forward and the back button goes to the previous item(content)

Answer 1

It is not clear how it is implemented in this app. But we could use the Frame.Navigate method to achieve similar effects. Please refer to the following steps to do this.

1. Create three pages.(Right click project=> Add=>New Item=> Blank Page)
2. Add some controls to newly created page.

MainPage.xaml:

<Page
..>

<Grid>
    <StackPanel>
        <Frame x:Name="ContentFrame">
 
        </Frame>
        <StackPanel Orientation="Horizontal">
            <TextBlock x:Name="NextText" Text="Next" Foreground="BlueViolet" PointerPressed="NextText_PointerPressed" Margin="0,0,100,0" />
            <Ellipse x:Name="ellipse1" Fill="Blue" Height="20" Width="20" Margin="0,0,10,0" />
            <Ellipse x:Name="ellipse2" Fill="LightGray" Height="20" Width="20" Margin="0,0,10,0"  />
            <Ellipse x:Name="ellipse3" Fill="LightGray" Height="20" Width="20" Margin="0,0,10,0" />
        </StackPanel>
        <TextBlock x:Name="BackText" Text="Back" PointerPressed="BackText_PointerPressed"/>
    </StackPanel>
</Grid>

MainPage.xaml.cs:

public sealed partial class MainPage : Page
{
    public SolidColorBrush Brush1;
    public SolidColorBrush Brush2;
    public MainPage()
    {
        this.InitializeComponent();
        Brush1=new SolidColorBrush(Colors.Blue);
        Brush2 = new SolidColorBrush(Colors.LightGray);
        ContentFrame.Navigate(typeof(BlankPage1));
    }

    private void NextText_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        ellipse1.Fill = Brush2;
        ellipse2.Fill = Brush2;
        ellipse3.Fill = Brush2;
       

        var content=ContentFrame.Content;
        if (content != null)
        {
            var page = ContentFrame.Content.GetType();
            switch (page.Name)
            {
                case "BlankPage1": 
                    ContentFrame.Navigate(typeof(BlankPage2));
                    ellipse2.Fill = Brush1; 
                    break;
                case "BlankPage2": 
                    ContentFrame.Navigate(typeof(BlankPage3));
                    ellipse3.Fill = Brush1;
                    break;
                case "BlankPage3": 
                    break;
            }
        }          
            
    }

    private void BackText_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        ellipse1.Fill = Brush2;
        ellipse2.Fill = Brush2;
        ellipse3.Fill = Brush2;
      
        if (ContentFrame.CanGoBack)
        {
            ContentFrame.GoBack();             
        }

        var content = ContentFrame.Content;
        if (content != null)
        {
            var page = ContentFrame.Content.GetType();
            switch (page.Name)
            {
                case "BlankPage1":
                    ellipse1.Fill = Brush1;
                    break;
                case "BlankPage2":
                    ellipse2.Fill = Brush1;
                    break;
                case "BlankPage3":
                    ellipse3.Fill = Brush1;
                    break;
            }
        }
       
    }
}

BlankPage1.xaml:

<Page
  ..>

    <Grid>
        <StackPanel>
            <TextBlock Text="Page1"/>
        </StackPanel>    
</Grid>
</Page>

BlankPage2.xaml:

<Page
    ..>

    <Grid>
        <StackPanel>
            <TextBlock Text="Page2"/>
        </StackPanel>  
  </Grid>
</Page>