【填坑】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提到,按下返回键时,并不会后退,而是直接退出,这个还需要我们的进一步讨论。

futa: