[Silverlight] 當麻許的Phone7筆記 - 3.導覽/導航 頁面(Page Navigation)

2010/12/23

這翻譯不是很妥但是我不知道怎麼翻譯會比較好…
這一篇主要談論是的是有關於頁面跟頁面之間的切換…
有點像是 HTML 裡面的 <a href="target.html">去目標頁</a> 的感覺…
像是超連結的切換頁面…

至於為什麼要這樣做?!
在以前我們寫Silverlight的時候其實會習慣性的製作一個符合跟LayoutRoot一樣大的UserControl
等到使用者動作後切換的時候我就把 LayoutRoot 清空然後載入目標的UserControl…

但是在手機上面這樣做當然也可以,但是如果User按下了Windows Phone 7 的Back鍵(巴庫鍵)…
就會跳出應用程式,這是我們不樂見的結果,這應該要是要回到上一畫面才對…

再來,如果按照畫面切換這樣對於設計師在規劃使用者操作流程也會顯得比較乾淨…

首先建立一個Windows Phone Application

blog-58


之後我們建立一個 Target.xaml 的頁面讓我們可以從主要的MainPage.xaml跳轉過去…
blog-59

blog-60

之後大功告成…

我們在MainPage.xaml 中建立一個Button 並且在Click 事件中放入…


private void btnGotoTarget_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Target.xaml", UriKind.Relative));
}

這樣按鈕點下去時就可以跳轉到Traget.xaml 頁面…

但是如果我需要帶一個參數過去…
譬如說我希望在MainPage.xaml 帶一個 id 過去,讓Target.xaml 可以透過這id去跟網路要資料…
這種寫法超級像是以前在寫網頁的時候透過get去傳參數
這時候可以把這事件內容改成…


private void btnGotoTargetPara_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Target.xaml?id=當麻", UriKind.Relative));
}

但是呢! 必須要在Target.xaml 裡面加入一個覆寫的function


protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //先去檢查是否有傳id的參數進來,如果有就跳出來顯示參數的值
    if (this.NavigationContext.QueryString.ContainsKey("id"))
    {
        MessageBox.Show(this.NavigationContext.QueryString["id"]);
    } 
}




執行結果..

blog-61


這時候我們家設計說話了…
難道我在製作畫面也要靠C# 才能跳轉頁面嗎?!

其實透過 HyperlinkButton 這元件也是可以只透過XAML 就可以做到頁面跳轉 …


<HyperlinkButton Content="到目標頁" Height="30" HorizontalAlignment="Left" Margin="50,200,0,0" Name="hlbtnGotoTarget"  NavigateUri="/Target.xaml" VerticalAlignment="Top" Width="200" />

大致上介紹了也實作了這些方式可以切換畫面,使用者的操作會被記錄,隨時都可以按下返回鍵讓他看到他想看的上一個畫面…

讚一下:


檔案下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.