UWP 项目导航

Question

我想实现这种行为和布局，哪个控件最适合在 UWP 上执行此操作。 下一个按钮应 go 向前滚动，后退按钮转到上一项（内容）

Answer 1

目前尚不清楚它是如何在这个应用程序中实现的。 但是我们可以使用Frame.Navigate方法来实现类似的效果。 请参考以下步骤来执行此操作。

1. 创建三个页面。（右键单击项目=>添加=>新建项目=>空白页）
2. 向新创建的页面添加一些控件。

主页.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>

主页.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>