31天學(xué)會(huì)Windows Phone 7開發(fā):頁面間導(dǎo)航
本文,我們來探討如何在Silverlight for Windows Phone中進(jìn)行頁面間導(dǎo)航。這非常重要,原因有二:首先,你不會(huì)愿意在一個(gè)XAML文件中構(gòu)建整個(gè)應(yīng)用程序。第二,因?yàn)橄旅娴脑瓌t,你的程序會(huì)自動(dòng)利用手機(jī)內(nèi)建的返回按鍵。這允許你的用戶想返回到之前的操作時(shí)可以向前導(dǎo)航。下一篇文章我們將會(huì)深入討論返回按鍵。
在頁面間導(dǎo)航有很多種方法,但是我打算只講一種。我更喜歡叫它簡單Web導(dǎo)航。正如其名,這里采取的方式正如你在HTML頁面中導(dǎo)航相似。當(dāng)然還有一些其他的框架可用(像MVVM),但是本篇文章的目的是講解這個(gè)簡單的方法。
簡單Web導(dǎo)航
假設(shè)我們有很多頁面,并且我們想給用戶能在它們之間穿梭的一種方式。先來構(gòu)建一個(gè)簡單的導(dǎo)航UI讓我們能做以上的事情,現(xiàn)在開始:
1.創(chuàng)建一個(gè)新的Windows Phone Application
2.添加幾個(gè)Windows Phone縱向頁面
我們將在第4日討論頁面方向(縱向和橫向)。現(xiàn)在只談縱向。我創(chuàng)建了3個(gè)縱向頁面:Pasta.xaml, Sauce.xaml和Cheese.xaml。我將用幾種不同的方法把它們聯(lián)系在一起。
3.改變頁面的標(biāo)題,以便在頁面變更后可以知道所在的位置
當(dāng)你創(chuàng)建一個(gè)新頁面時(shí),有一個(gè)叫“PageTitle”的XAML元素它默認(rèn)被設(shè)置為“page name”。在每個(gè)頁面中都更改這個(gè)元素以便于知道你當(dāng)前處于哪個(gè)頁面。我喜歡這樣做是因?yàn)榭梢詼p少出錯(cuò)的幾率。你會(huì)發(fā)現(xiàn)當(dāng)你投入精力制作一個(gè)項(xiàng)目時(shí)起初的代碼看起來都很相似,所以讓他們看起來有所區(qū)別(至少在編碼時(shí))會(huì)有很大幫助。
4.在MainPage.xaml中創(chuàng)建幾個(gè)超鏈接(hyperlink)
在頁面間建立鏈接,有幾種不同的方式。***種是全XAML解決方案。為此,我們可以使用超鏈接按鈕(HyperlinkButton)控件。以下是代碼:
- <HyperlinkButton Content="Pasta" NavigateUri="/Pasta.xaml" Height="30" HorizontalAlignment="Left"
- Margin="10,10,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
- <HyperlinkButton Content="Sauce" NavigateUri="/Sauce.xaml" Height="30" HorizontalAlignment="Left"
- Margin="10,10,0,0" Name="hyperlinkButton2" VerticalAlignment="Top" Width="200" />
- <HyperlinkButton Content="Cheese" NavigateUri="/Cheese.xaml" Height="30" HorizontalAlignment="Left"
- Margin="10,10,0,0" Name="hyperlinkButton3" VerticalAlignment="Top" Width="200" />
當(dāng)你運(yùn)行項(xiàng)目時(shí),你可以點(diǎn)擊任何一個(gè)超鏈接按鈕然后跳轉(zhuǎn)到相應(yīng)的頁面中。使用返回鍵同樣可以使你回到上一個(gè)界面。如果你返回多次,你會(huì)發(fā)現(xiàn)一旦越過了程序的***頁你就離開了當(dāng)前的應(yīng)用程序。
5.通過代碼導(dǎo)航到頁面
如果你喜歡通過代碼而非完全使用XAML,你可以僅僅用一些XAML元素來實(shí)現(xiàn)。在本例中,我們使用按鈕。我創(chuàng)建了3個(gè)按鈕,每一個(gè)都指向相同的事件處理程序。在下面的C#代碼中,你會(huì)看到我實(shí)際上檢測了是哪個(gè)按鈕被點(diǎn)擊了,然后導(dǎo)航到相應(yīng)的頁面。返回鍵的所有功能仍然可用。
XAML
- <Button x:Name="PastaButton" Content="Pasta" Click="Button_Click" Width="200" Height="75" />
- <Button x:Name="SauceButton" Content="Sauce" Click="Button_Click" Width="200" Height="75" />
- <Button x:Name="CheeseButton" Content="Cheese" Click="Button_Click" Width="200" Height="75" />
C#
- private void Button_Click(object sender, RoutedEventArgs e)
- {
- Button clickedButton = sender as Button;
- switch (clickedButton.Name)
- {
- case "PastaButton":
- NavigationService.Navigate(new Uri("/Pasta.xaml", UriKind.Relative));
- break;
- case "SauceButton":
- NavigationService.Navigate(new Uri("/Sauce.xaml", UriKind.Relative));
- break;
- case "CheeseButton":
- NavigationService.Navigate(new Uri("/Cheese.xaml", UriKind.Relative));
- break;
- }
- }
正如你看到的,僅僅使用了NavigationService就將用戶的動(dòng)作記錄了下來,同時(shí)使用返回鍵就可以使它沿著決策樹返回。
下一篇,我們探索如何利用返回按鍵來實(shí)現(xiàn)更多的功能。
原作者:Jeff Blankenburg 譯者:金山崟霸
中文來源:http://www.cnblogs.com/porscheyin/archive/2010/11/21/1883175.html
英文來源:http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-2-Page-Navigation.aspx
【編輯推薦】