【UWP开发】19-Navigation（导航）除MainPage的其他页面，导航栏功能的添加

如何添加新的空白页

去选项菜单->添加新项，选择空白页

选择的新页面会被导入到mianpage frame以及从中导出

解决方案目录信息

mianpage.xml：

<StackPanel Margin="20,0,0,0">
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <Button Content="Home" Name="HomeButton" Click="HomeButton_Click" Margin="0,0,10,0" />
            <Button Content="Back" Name="BackButton" Click="BackButton_Click" Margin="0,0,10,0" />
            <Button Content="Next" Name="NextButton" Click="NextButton_Click" />
            <Button Content="Navigate" Name="NavigateButton" Click="NavigateButton_Click" Margin="0,0,10,0" />
        </StackPanel>
        <Frame Name="MyFrame" MinHeight="300">

        </Frame>
    </StackPanel>

navigate为导航栏，只有这样能加载页面

想加载Page1信息到MainPage.cs里面加载Page1信息

MainPage.cs：

public sealed partial class MainPage : Page
  {
    public MainPage()
    {
      this.InitializeComponent();
      MyFrame.Navigate(typeof(Page1));
    }

    private void HomeButton_Click(object sender, RoutedEventArgs e)
    {
      MyFrame.Navigate(typeof(Page1));
    }

    private void BackButton_Click(object sender, RoutedEventArgs e)
    {
      if (MyFrame.CanGoBack)
      {
        MyFrame.GoBack();
      }

    }

    private void NextButton_Click(object sender, RoutedEventArgs e)
    {
      if (MyFrame.CanGoForward)
      {
        MyFrame.GoForward();
      }
    }

    private void NavigateButton_Click(object sender, RoutedEventArgs e)
    {
      this.Frame.Navigate(typeof(Page2));
    }



  }

Page1.xaml：

<StackPanel>
        <TextBlock FontSize="48">Page 1</TextBlock>
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
        <HyperlinkButton NavigateUri="http://www.microsoft.com" Content="Go To Microsoft.com" />
    </StackPanel>

超链接按钮如下：

使用NavigateUri转到想要的连接

在Page1.xaml.cs里加一个跳转指令

  private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
    {
      Frame.Navigate(typeof(Page2));
    }

同理：
page2.xaml

<StackPanel Background="Red">
        <TextBlock FontSize="48">Page 2</TextBlock>
        <HyperlinkButton Content="Click to go to page 3" Click="HyperlinkButton_Click" />
    </StackPanel>

page2.cs
同1
page3.xaml

 <StackPanel Background="Yellow">
        <TextBlock FontSize="48">Page 3</TextBlock>
        <TextBox Name="ValueTextBox" Width="200" HorizontalAlignment="Left" />
        <HyperlinkButton Content="Click to go to page 4" Click="HyperlinkButton_Click"/>
    </StackPanel>

page3.cs

 private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
    {
      Frame.Navigate(typeof(Page4), ValueTextBox.Text);
    }

page4.xaml

<StackPanel Background="Green">
        <TextBlock FontSize="48">Page 4</TextBlock>
        <TextBox Name="ValueTextBox" Width="200" HorizontalAlignment="Left" />
        <HyperlinkButton Content="Click to go to page 5" Click="HyperlinkButton_Click"/>
    </StackPanel>

page4.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
      string value = (string)e.Parameter;
      ValueTextBox.Text = value;
    }
        private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page5));
        }

说明：
这里我们将Page3的一个值传到了Page4里面

• 这里分为两个步骤，第一步Page3输入

Page3.xaml文件里

Page3.cs里加入

• 第二步，Page4接收并输出

这个时候我们发现数据进入了Page4我们返回Page3的时候数据不见了，这个时候我们需要进入App.xaml.cs这个文件
1.加红框的代码

2.然后进入Page3.xaml.cs文件里，底下的Page3实际为Page2

这部分代码逻辑也是Page4里的，可以复制过来，稍加修改

如何导航到一个frame level的page里

主函数里加这个，导航栏消失如下图

参考链接

Navigation（导航）