【WP開發學習筆記】之頁面導航

最近用了一個多月時間終於把看C#看完了（其實之前也看過曾瑛老師的視頻教程，無奈看完后基本都忘記差不多了，當時嘗試wp開發時非常吃力，只得扔下wp重新學習C#）。再次看完C#，於是又重新開始了學習wp開發。此后,我會把我學習過程中的筆記與大家分享，共同交流和學習。我的微博賬號是@馬and康；

頁面導航也就是在應用內在的幾個頁面之間切換，本例是可以從主界面導航到界面1、界面2、當然也支持從界面1、界面2導航到主界面，這是一個很簡單的例子，不過無論多復雜的其應用原理跟這也都是一樣的。導航主要可以運用兩個控件，一個是HyPerLinkButon,還有一個是Button;一般在頁面導航中只要通過HyperlinkButton即可，當然你可以根據個人愛好選擇自己習慣的控件；

主界面(MainPage)如下：

主界面(MainPage)XAML代碼如下：

<phone:PhoneApplicationPage
    x:Class="頁面導航.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Black"  >
        <StackPanel x:Name="TitlePanel" Grid.Row="0" >
            <TextBlock Text="主界面" FontSize="30" FontFamily="宋"/>
            <TextBlock Text="Main Page" FontSize="80" FontFamily="仿宋"/>
 <HyperlinkButton Content="Go to Page1" FontSize="30" Foreground="Red" NavigateUri="/Page1.xaml"/> <HyperlinkButton Content="Go to Page2" FontSize=" 30" Foreground="Red" NavigateUri="/Page2.xaml"/> <Button Content="Go to Page1" FontSize=" 30" Foreground="Red" Click="Button_Click" />         </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

 

主界面（MainPage)C#主要代碼如下；

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

界面一（Page1）如下；

界面二（Page2)如下；

至於Page1,Page2的代碼就不寫出來了，因為其代碼跟主界面的HyperlinkButton中的代碼類似，可以自行參考MainPage中加紅加粗部分；