【填坑】UWP学习笔记19

19

哈哈哈！

我回来填坑了！

果然学了C#就是不一样啊！哈哈哈！

---

首先，Bob讲解的主要是概念：

想要做一个普通的App，你最需要的理解的概念之一就是页面。App的页面就好像网页之于网站——都是最基本的构成。

一个App的主要组成是这样的：窗口——（根）框架——页面（.xaml文件）。

我们这次课程的主要目的是，在一个主页面（MainPage）之上，做一个像浏览器那样的，内含了多个Page的、能相互导航的应用。

由前文可知，Frame具有导航的属性，即，能够加载（实例化）Page至当前页面，所以，这成为了我们的选择之一。

开始干活吧！

---

首先，在主页面中添加一个Frame，称之为MyFrame，然后在程序加载后导航至Page1：

 MyFrame.Navigate(typeof(BlankPage1));

添加“主页”、“前进”、“后退”等几个按钮，看起来应该是这样的：

上图是整个项目完成后的视图，凑合着看看吧……

照葫芦画瓢，打出主页按钮的代码：

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

那么，前进和后退怎么办呢？

很简单，有MyFrame.CanGoBack，和MyFrame.CanGoForward这两个属性，我们只要写一个if语句就行了。

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

以及：

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

这样，主页就算完成了。

接下来是Page1

关键XAML代码如下：

        <HyperlinkButton Content="Page2一库"  Click="HyperlinkButton_Click"/>
<HyperlinkButton Content="巨硬一库"  NavigateUri="https://www.microsoft.com"/>

简要介绍一下：这是超链接组件，可以链接至URL，也可以绑定事件。

同样的，绑定事件代码如下：

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

接下来，Page2、3就按照这样设计就行了。

有一个问题要说明一下：

在导航的时候，代码是这样的：

Frame.Navigate……

为什么不是MyFrame呢？

其实，由于Page被纳于MyFrame之下，所以Page是MyFrame的子集，即继承了MyFrame的Frame属性。所以直接使用Frame即可。

 

细心的同学会发现，为什么在点击前进、后退的时候没有保留文本呢？那是因为，我们没有传递值啊。Navigate有一种重载函数就是用来传递变量的，只需要在原本函数的后面加逗号，以及要传递的值就可以了。

比如：

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

可是，这样还是有问题啊，后退的时候可就不管用了！于是，Bob使用了绝招：全局“变量”。

在App初始化后加载如下代码：

internal static string somethingimportant;

这是一个静态属性，在这里当作一个全局使用。

修改Page2为：

   private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
App.somethingimportant = valuetextbox.Text;
Frame.Navigate(typeof(BlankPage3),valuetextbox.Text);
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (!String.IsNullOrEmpty(App.somethingimportant))
{
valuetextbox.Text = App.somethingimportant;
}
}

Page3为：

 public BlankPage3()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var value = (string)e.Parameter;
valuetextbox.Text = value;
}

 

最后要讲的是导航至主页的问题。

最右侧的“导航至主页”的代码是这样的：

this.Frame.Navigate(typeof(BlankPage2));

点击之后，变成这样了：

对此Bob没有过多解释，但我的理解是这样的：

与前面同理，这里的StackPanel有继承关系。只不过继承的是rootFrame。所以，导航的事件也变成了rootFrame的导航事件了。故，头部没了也不难理解了——毕竟rootFrame是掌管整个Page的啊！

最后，在移动端的测试中，Bob提到，按下返回键时，并不会后退，而是直接退出，这个还需要我们的进一步讨论。