UWP 项目导航

Question

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

Answer 1

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

创建三个页面。（右击项目=>添加=>新建项=>空白页）
为新创建的页面添加一些控件。

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>

UWP 项目导航

UWP Item Navigation

c#

scroll

desktop-application

win-universal-app

uwp